@app-studio/web 0.8.10 → 0.8.11

package/dist/web.esm.js

@@ -188,6 +188,7 @@ var TextComponent = function TextComponent(props) {
 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,
@@ -201,39 +202,46 @@ var VerticalView = function VerticalView(_ref) {
   }, 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.createElement(VerticalView, Object.assign({}, props));
+  return (
+    // Renders the VerticalView component, passing all of the received props through to it.
+    React.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.createElement(View$1, 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.createElement(View$1, 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.createElement(View$1, 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.createElement(CenterView, Object.assign({}, props));
+  return (
+    // Renders the CenterView component, passing down all the props received by the CenterComponent.
+    React.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"];
@@ -1018,6 +1026,7 @@ var useButtonState = function useButtonState() {
 };
 // 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 = useState(false),
     isHovered = _useState[0],
@@ -1028,6 +1037,7 @@ var useLinkState = function useLinkState() {
   };
 };
 
+// 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,
@@ -1042,6 +1052,7 @@ var IconSizes = {
 };
 
 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,
@@ -1062,6 +1073,7 @@ var LinkView = function LinkView(_ref) {
     _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);
   };
@@ -1082,13 +1094,14 @@ var LinkView = function LinkView(_ref) {
   }))));
 };
 
+// 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.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 = {
@@ -1196,6 +1209,8 @@ var IconSizes$1 = {
   }
 };
 
+// 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,
@@ -1208,6 +1223,7 @@ var DefaultSizes = {
   '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,
@@ -1391,12 +1407,14 @@ var LoaderView = function LoaderView(_ref4) {
   }, 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.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.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"];
@@ -1582,26 +1600,34 @@ var FileImage = function FileImage(_ref2) {
   }, 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.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.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.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.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.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,
@@ -1615,10 +1641,13 @@ var useSelectState = function useSelectState(_ref) {
     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.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
@@ -1892,6 +1921,8 @@ var FieldWrapper = function FieldWrapper(_ref) {
   }, 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,
@@ -1904,6 +1935,7 @@ var _excluded$r = ["isHovered", "setIsHovered", "option", "size", "callback", "s
   _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,
@@ -1914,9 +1946,11 @@ var Item = function Item(_ref) {
     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);
   };
@@ -2059,10 +2093,10 @@ var DropDown = function DropDown(_ref4) {
     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) {
@@ -2256,15 +2290,17 @@ var SelectView = function SelectView(_ref6) {
   }));
 };
 
+// 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.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;
@@ -2282,6 +2318,7 @@ var useSwitchState = function useSwitchState(_ref) {
   };
 };
 
+// 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,
@@ -2324,6 +2361,7 @@ var KnobSizes = {
     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,
@@ -2366,6 +2404,7 @@ var SliderSizes = {
     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,
@@ -2500,28 +2539,38 @@ var SwitchView = function SwitchView(_ref) {
   }, KnobSizes[size], styles['circle'])), inActiveChild && !value && React.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && React.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.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 = useState(label != null ? label : placeholder),
     hint = _useState[0],
     setHint = _useState[1];
+  // State hook for tracking whether the text area is hovered over.
   var _useState2 = 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 = useState(defaultValue || ''),
     value = _useState3[0],
     setValue = _useState3[1];
+  // State hook to determine if the text area is currently focused.
   var _useState4 = 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.
   useMemo(function () {
     setHint(isFocused && !value ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
   }, [value, isFocused, label, placeholder]);
@@ -2535,6 +2584,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
     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"];
@@ -2624,7 +2674,6 @@ var TextAreaView = function TextAreaView(_ref) {
   };
   var handleChange = function handleChange(event) {
     if (typeof event === 'string') {
-      //for ios and android
       setValue(event);
       if (onChangeText) onChangeText(event);
     } else {
@@ -2679,34 +2728,44 @@ var TextAreaView = function TextAreaView(_ref) {
   })))));
 };
 
+// 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.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 = 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 = useState(false),
     isFocused = _useState2[0],
     setIsFocused = _useState2[1];
+  // Introduce a boolean state `isHovered` for tracking mouse hover status over the text field.
   var _useState3 = 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 = 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.
   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,
@@ -2813,12 +2872,10 @@ var TextFieldView = function TextFieldView(_ref) {
   };
   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);
@@ -2826,7 +2883,6 @@ var TextFieldView = function TextFieldView(_ref) {
   };
   var handleClear = function handleClear() {
     setValue('');
-    //Web
     if (onChange) {
       onBlur({
         target: {
@@ -2836,7 +2892,6 @@ var TextFieldView = function TextFieldView(_ref) {
       if (onChangeText) onChangeText('');
       if (onChange) onChange('');
     }
-    //for ios and android
     if (typeof document === 'undefined' && onChangeText) onChangeText('');
   };
   return React.createElement(FieldContainer, {
@@ -2886,12 +2941,12 @@ var TextFieldView = function TextFieldView(_ref) {
 };
 
 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.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) {
@@ -4528,6 +4583,7 @@ var countryList = [
 	}
 ];
 
+// 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.useState(countryList),
@@ -4559,6 +4615,7 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
   };
 };
 
+// Defines the size of icons based on predefined size categories to maintain design consistency.
 var IconSizes$4 = {
   xs: 8,
   sm: 10,
@@ -4744,9 +4801,6 @@ var CountryPickerView = function CountryPickerView(_ref5) {
     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,
@@ -4820,13 +4874,14 @@ var CountryPickerView = function CountryPickerView(_ref5) {
   }));
 };
 
+// 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.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() {
@@ -6011,7 +6066,7 @@ var ModalHeader = function ModalHeader(_ref3) {
     padding: 0,
     margin: 0,
     filter: "none",
-    isAuto: true
+    width: 0
   });
   return React.createElement(Horizontal, Object.assign({
     justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',