@dreamcommerce/aurora 2.4.3-1 → 2.4.3-2

package/build/esm/packages/aurora/src/components/controls/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { cssControls, cssControlsError } from './css_classes.js';
 import { ControlContext } from './context.js';
-import Input from './components/input.js';
 import cssStyles from '../../css/controls/main.module.less.js';
+import Input from './components/input.js';
 import { AdditionalInfo } from './components/additional_info.js';
 import Checkbox from './components/checkbox.js';
 import CheckboxSwitch from './components/checkbox_switch.js';
@@ -10,13 +10,12 @@ import Content from './components/content.js';
 import ControlLabel from './components/label.js';
 import Element from './components/element.js';
 import Errors from './components/errors.js';
-import Helper from './components/helper.js';
 import Radio from './components/radio.js';
 import Textarea from './components/textarea.js';
 
-const Control = ({ children, errors, name, id }) => {
+const Control = ({ children, errors, name, id, onClick }) => {
     return (React.createElement(ControlContext.Provider, { value: { errors, name, id } },
-        React.createElement("div", { className: `${cssStyles[cssControls]} ${errors ? cssStyles[cssControlsError] : ''}` }, children)));
+        React.createElement("div", { onClick: onClick, className: `${cssStyles[cssControls]} ${errors ? cssStyles[cssControlsError] : ''}` }, children)));
 };
 Control.Label = ControlLabel;
 Control.Input = Input;
@@ -27,8 +26,7 @@ Control.Content = Content;
 Control.Element = Element;
 Control.Textarea = Textarea;
 Control.Errors = Errors;
-Control.AdditionalInfo = AdditionalInfo;
-Control.Helper = Helper;
+Control.AdditionalInfo = AdditionalInfo;
 
 export default Control;
 //# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/controls/types.d.ts

@@ -4,6 +4,7 @@ import { IColorPickerProps } from "../color_picker/types";
 import { IFilePicker } from "../file_picker/types";
 import { IRange } from "../range/types";
 import { TVerticalPosition } from "../../typings/general";
+import React from 'react';
 export declare type TControlErrors = string[] | null | undefined;
 export interface IControlContext {
     errors?: TControlErrors;
@@ -21,13 +22,13 @@ export interface IControlComposition {
     Textarea: React.FC<ITextareaProps>;
     Errors: React.FC;
     AdditionalInfo: React.FC;
-    Helper: React.FC<IControlHelperProps>;
 }
 export interface IControlProps {
     children: ReactNode;
     errors?: TControlErrors;
     name?: string;
     id?: string;
+    onClick?: (event: React.MouseEvent) => void;
 }
 interface IControlCommonProps {
     errors?: TControlErrors;
@@ -53,6 +54,7 @@ export interface IControlTagsSelectorProps extends IControlCommonProps {
     id?: string;
     name?: string;
     label?: string;
+    labelAdditionalInfo?: string | ReactNode;
     isRequired?: boolean;
     placeholder?: string;
     minTagLength?: number;
@@ -91,6 +93,7 @@ export interface IControlLabelProps {
     id?: string;
     isRequired?: boolean;
     children: any;
+    additionalInfo?: string | ReactNode;
 }
 export interface ICheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     id?: string;
@@ -102,14 +105,11 @@ export interface IControlInputProps extends IInputProps, IControlCommonProps {
     postfix?: string;
     label?: string;
     isRequired?: boolean;
-    helper?: React.ReactNode;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlCheckboxProps extends ICheckboxProps, IControlCommonProps {
     label: string;
-    helper?: React.ReactNode;
-    hintTopOptions?: TControlHintOptions;
-    labelTop?: string;
-    hintTop?: string;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
@@ -117,6 +117,7 @@ export interface IRadioProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 export interface IControlRadioProps extends IRadioProps, IControlCommonProps {
     label: string;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlRadioGroupOption {
     value: string;
@@ -132,6 +133,7 @@ export interface IControlRadioGroup extends IControlCommonProps {
     id: string;
     name: string;
     label: string;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlColorPickerProps extends IColorPickerProps, IControlCommonProps {
     id: string;
@@ -139,32 +141,37 @@ export interface IControlColorPickerProps extends IColorPickerProps, IControlCom
     label?: string;
     isRequired?: boolean;
     hideChooseCancelButtons?: boolean;
+    labelAdditionalInfo?: string | React.ReactNode;
 }
 export interface IControlTextareaProps extends ITextareaProps, IControlCommonProps {
     label?: string;
     isRequired?: boolean;
-    helper?: React.ReactNode;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlSelectProps extends ISelectProps, IControlCommonProps {
     id?: string;
     label?: string;
     isRequired?: boolean;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlMultiSelectProps extends IMultiSelectProps, IControlCommonProps {
     id?: string;
     label?: string;
     isRequired?: boolean;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlRange extends IRange, IControlCommonProps {
     id?: string;
     label?: string;
     isRequired?: boolean;
     name?: string;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface IControlFilePicker extends IFilePicker, IControlCommonProps {
     label?: string;
     isRequired?: boolean;
     name?: string;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export interface ICellSelector {
     rows?: number;
@@ -179,8 +186,6 @@ export interface IControlCellSelector extends ICellSelector, IControlCommonProps
     label?: string;
     id?: string;
     isRequired?: boolean;
-}
-export interface IControlHelperProps {
-    hasError?: boolean;
+    labelAdditionalInfo?: string | ReactNode;
 }
 export {};

package/build/esm/packages/aurora/src/components/controls/types.js

@@ -4,4 +4,5 @@ import '@auroraComponents/color_picker/types';
 import '@auroraComponents/file_picker/types';
 import '@auroraComponents/range/types';
 import '@auroraTypings/general';
+import 'react';
 //# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/controls/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA4F,OAAO,CAAC;AACpG,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkC,wBAAwB,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA4F,OAAO,CAAC;AACpG,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkC,wBAAwB,CAAC;AAC3D,OAAkB,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/date_picker/types.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { TControlErrors } from "../controls/types";
 export interface IMonthYear {
     month: number;
@@ -70,6 +70,7 @@ export interface IDatepickerProps {
     showButtons?: boolean;
     hint?: string;
     errors?: TControlErrors;
+    labelAdditionalInfo?: string | React.ReactNode;
 }
 export interface IDatepickerLabelProps {
     id: string;

package/build/esm/packages/aurora/src/components/date_picker/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/date_picker/types.ts"],"names":[],"mappings":"AAAA,OAAyC,OAAO,CAAC;AACjD,OAA+B,kCAAkC,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/date_picker/types.ts"],"names":[],"mappings":"AAAA,OAAgD,OAAO,CAAC;AACxD,OAA+B,kCAAkC,CAAC"}

package/build/esm/packages/aurora/src/components/dropdown/components/content.js

@@ -14,6 +14,7 @@ import cssClasses from '../../../css/dropdown/main.module.less.js';
 import { getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
 import { useClickOutside } from '../../../hooks/use_click_outside.js';
 import IconArrow from '../../../assets/icon_arrow.js';
+import { UiDomUtils } from '@dreamcommerce/utilities';
 
 /**
  * Dropdown.Content component. This togglable part of dropdown.
@@ -24,7 +25,7 @@ import IconArrow from '../../../assets/icon_arrow.js';
 const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', horizontalPosition = 'left', verticalPosition = 'bottom', wrapperWidth, cssClass, portalContainer }) => {
     const [t] = useTranslation();
     const contentRef = useRef(null);
-    const { wrapperRef, toggleDropdown, isOpen } = useDropdownContext();
+    const { wrapperRef, toggleDropdown, isOpen, closeDropdown } = useDropdownContext();
     const [styles, setStyles] = useState({
         top: '0px',
         bottom: '0px',
@@ -109,6 +110,18 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
                 : setStyles({ top: topPositionValue, bottom: bottomPositionValue, left: leftPositionValue, zIndex });
         }
     }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideTopViewport, dropdownIsOutsideBottomViewport, wrapperWidth]);
+    useEffect(() => {
+        var _a;
+        if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
+            return;
+        const scrollableParent = (_a = UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
+        const handleWindowScroll = () => {
+            if (typeof closeDropdown === 'function') {
+                closeDropdown();
+            }
+        };
+        scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
+    }, [isOpen]);
     return createPortal(React.createElement(TransitionGroup, { component: null }, isOpen === true ? (React.createElement(CSSTransition, { timeout: 200, classNames: {
             enter: cssClasses['dropdown-enter'],
             enterActive: cssClasses['dropdown-enter-active'],

package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/context/types.d.ts

@@ -3,4 +3,6 @@ export interface IDropdownContext {
     wrapperRef?: React.RefObject<HTMLDivElement>;
     isOpen?: boolean;
     toggleDropdown?: () => void;
+    openDropdown?: () => void;
+    closeDropdown?: () => void;
 }

package/build/esm/packages/aurora/src/components/dropdown/hoc/multiselect/index.js

@@ -79,7 +79,7 @@ onChange, hasCloseIcon }) => {
     /**
      * isOpen provides state if dropdown is open(visible), toggleDropdown is a function which toggles dropdown content
      */
-    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);
+    const [isOpen, toggleDropdown, openDropdown, closeDropdown] = useToggle(defaultIsOpen, onToggle);
     /**
      * hook with option list state, and method to change option list
      */
@@ -91,7 +91,7 @@ onChange, hasCloseIcon }) => {
     /**
      * context values, they may be used with useContext in any component which is part of Dropdown composition
      */
-    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown, openDropdown, closeDropdown }), [isOpen, toggleDropdown, openDropdown, closeDropdown]);
     /**
      * hook which resets options list to default on close if select has search and it was used
      */

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_toggle.d.ts

@@ -4,4 +4,4 @@
  * @param onToggleCb callback onToggle
  * @returns {Array} tuple - open state and and method to change open state
  */
-export declare function useToggle(defaultIsOpen?: boolean, onToggleCb?: (isOpen: boolean) => void): [boolean, () => void];
+export declare function useToggle(defaultIsOpen?: boolean, onToggleCb?: (isOpen: boolean) => void): [boolean, () => void, () => void, () => void];

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_toggle.js

@@ -10,12 +10,14 @@ import { useEffectAfterMount } from '../../../hooks/use_effect_after_mount.js';
 function useToggle(defaultIsOpen = false, onToggleCb) {
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
     const onToggle = useCallback(() => setIsOpen((oldIsOpen) => !oldIsOpen), []);
+    const open = useCallback(() => setIsOpen(true), []);
+    const close = useCallback(() => setIsOpen(false), []);
     useEffectAfterMount(() => {
         if (typeof onToggleCb === 'function') {
             onToggleCb(isOpen);
         }
     }, [isOpen]);
-    return [isOpen, onToggle];
+    return [isOpen, onToggle, open, close];
 }
 
 export { useToggle };

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/index.js

@@ -36,11 +36,11 @@ import { useToggle } from './hooks/use_toggle.js';
  */
 const Dropdown = ({ defaultIsOpen = false, onToggle, children }) => {
     const wrapperRef = useRef(null);
-    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);
+    const [isOpen, toggleDropdown, openDropdown, closeDropdown] = useToggle(defaultIsOpen, onToggle);
     /**
      * context values, they may be used with useContext in any component which is part of Dropdown composition
      */
-    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown, openDropdown, closeDropdown }), [isOpen, toggleDropdown, openDropdown, closeDropdown]);
     return (React.createElement(DropdownContext.Provider, { value: value },
         React.createElement("div", { ref: wrapperRef, className: cssClasses.dropdown }, children)));
 };

package/build/esm/packages/aurora/src/components/file_picker/components/selected_file_preview.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { FileUtils } from '@dreamcommerce/utilities';
 import styles from '../../../css/file_picker/main.module.less.js';
 import CSS_CLASSES from '../css_classes.js';
-import { FileUtils } from '../../../../../utilities/build/esm/packages/utilities/src/file_utils.js';
 import IconDelete from '../../../assets/icon_delete.js';
 
 const SelectedFilePreview = ({ file, isPreview, onPreviewError, onFileDelete }) => {

package/build/esm/packages/aurora/src/components/flash_messenger/components/flash_message.js

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
+import Stack from '../../stack/index.js';
 import { CSSTransition } from 'react-transition-group';
 import IconClose from '../../../assets/icon_close.js';
 import cssClasses from '../../../css/flash_message/main.module.less.js';
 import { useFlashMessenger } from '../context.js';
 import MessageBox from '../../message-box/index.js';
-import Grid from '../../grid/index.js';
 
 const FlashMessage = ({ message }) => {
     const { removeMessage, hideMessage } = useFlashMessenger();
@@ -19,11 +19,9 @@ const FlashMessage = ({ message }) => {
             exitActive: cssClasses['flash-messenger__list_exit-active']
         } },
         React.createElement(MessageBox, { type: message.type, className: `${cssClasses['flash-messenger__message']} ${cssClasses['flash-messenger__list-item']}` },
-            React.createElement(Grid.Row, null,
-                React.createElement(Grid.Col, { auto: "grow" },
-                    React.createElement("div", null, message.content)),
-                React.createElement(Grid.Col, { auto: "auto" },
-                    React.createElement(IconClose, { onClick: () => hideMessage(message.id), className: cssClasses['flash-messenger__icon-close'] }))))));
+            React.createElement(Stack, { spacing: 8, align: "center", justify: "space-between" },
+                React.createElement("div", null, message.content),
+                React.createElement(IconClose, { onClick: () => hideMessage(message.id), className: cssClasses['flash-messenger__icon-close'] })))));
 };
 
 export default FlashMessage;

package/build/esm/packages/aurora/src/components/flash_messenger/components/flash_message.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/heading/index.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import classnames from 'classnames';
 import cssClasses from '../../css/heading/main.module.less.js';
+import { Typography } from '../typography/index.js';
 
 const Heading = ({ as = 'h1', isSubheading, withHeadline, children }) => {
-    const classes = classnames(cssClasses[as], withHeadline && cssClasses.head_line);
+    const classes = classnames(withHeadline && cssClasses.head_line);
     if (!isSubheading) {
-        return React.createElement(`${as}`, {
-            className: classes
-        }, children);
+        return (React.createElement(Typography, { as: as, variant: as, cssClasses: classes }, children));
     }
-    return React.createElement("span", { className: classes }, children);
+    return (React.createElement(Typography, { cssClasses: classes, as: "span", variant: "span" }, children));
 };
 
 export default Heading;

package/build/esm/packages/aurora/src/components/heading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/label/css_classes.d.ts

@@ -1,3 +1,4 @@
 export declare const cssLabel = "label";
 export declare const cssLabelRequired: string;
 export declare const cssLabelError: string;
+export declare const cssLabelAdditionalInfo: string;

package/build/esm/packages/aurora/src/components/label/css_classes.js

@@ -1,6 +1,7 @@
 const cssLabel = 'label';
 const cssLabelRequired = `${cssLabel}_required`;
-const cssLabelError = `${cssLabel}_error`;
+const cssLabelError = `${cssLabel}_error`;
+const cssLabelAdditionalInfo = `${cssLabel}__additional-info`;
 
-export { cssLabel, cssLabelError, cssLabelRequired };
+export { cssLabel, cssLabelAdditionalInfo, cssLabelError, cssLabelRequired };
 //# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/label/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/label/index.js

@@ -2,15 +2,18 @@ import React from 'react';
 import classnames from 'classnames';
 import { useControlContext } from '../controls/context.js';
 import cssClasses from '../../css/label/main.module.less.js';
-import { cssLabel, cssLabelRequired, cssLabelError } from './css_classes.js';
+import { cssLabel, cssLabelRequired, cssLabelError, cssLabelAdditionalInfo } from './css_classes.js';
+import Stack from '../stack/index.js';
 
-const Label = ({ isRequired = false, children, ...props }) => {
+const Label = ({ isRequired = false, children, additionalInfo, ...props }) => {
     const { errors } = useControlContext();
     const labelClasses = classnames(cssClasses[cssLabel], {
         [cssClasses[cssLabelRequired]]: isRequired,
         [cssClasses[cssLabelError]]: errors
     });
-    return (React.createElement("label", { className: labelClasses, ...props }, children));
+    return (React.createElement("label", { className: labelClasses, ...props },
+        React.createElement(Stack, { align: "center" }, children),
+        additionalInfo && React.createElement("span", { className: cssClasses[cssLabelAdditionalInfo] }, additionalInfo)));
 };
 
 export default Label;

package/build/esm/packages/aurora/src/components/label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/label/types.d.ts

@@ -1,4 +1,5 @@
-import { LabelHTMLAttributes } from 'react';
+import { LabelHTMLAttributes, ReactNode } from 'react';
 export interface ILabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     isRequired?: boolean;
+    additionalInfo?: string | ReactNode;
 }

package/build/esm/packages/aurora/src/components/label/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/label/types.ts"],"names":[],"mappings":"AAAA,OAAoC,OAAO,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/label/types.ts"],"names":[],"mappings":"AAAA,OAA+C,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/loader/index.js

@@ -4,9 +4,9 @@ import { cssLoader } from './css_classes.js';
 import { LOADER_SIZE_CSS_CLASS_MAP, LOADER_SIZE } from './constants.js';
 import cssClasses from '../../css/loader/main.module.less.js';
 
-const Loader = ({ size }) => {
+const Loader = ({ size, style }) => {
     const loaderClasses = classnames(cssClasses[cssLoader], size ? cssClasses[LOADER_SIZE_CSS_CLASS_MAP[size]] : '');
-    return React.createElement("span", { className: loaderClasses });
+    return React.createElement("span", { style: style, className: loaderClasses });
 };
 Loader.SIZE = LOADER_SIZE;
 

package/build/esm/packages/aurora/src/components/loader/types.d.ts

@@ -2,6 +2,7 @@ import { LOADER_SIZE } from "./constants";
 import { EnumLiteralsOf } from "../../typings/general";
 export interface ILoaderProps {
     size?: TLoaderSize;
+    style?: Record<any, any>;
 }
 export interface ILoaderConstants {
     SIZE: typeof LOADER_SIZE;

package/build/esm/packages/aurora/src/components/slide/components/slide_header.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ISlideCloseBtn } from '../types';
+export declare const SlideHeader: FC<ISlideCloseBtn>;
+export default SlideHeader;

package/build/esm/packages/aurora/src/components/slide/components/{slide_close_btn_wrapper.js → slide_header.js}

@@ -3,13 +3,13 @@ import classnames from 'classnames';
 import CSS_CLASSES from '../css_classes.js';
 import cssClasses from '../../../css/slide/main.module.less.js';
 
-const SlideCloseBtnWrapper = ({ children, classNames = '' }) => {
-    const classes = classnames(cssClasses[CSS_CLASSES.slideCloseBtnWrapper], {
+const SlideHeader = ({ children, classNames = '' }) => {
+    const classes = classnames(cssClasses[CSS_CLASSES.slideHeader], {
         [classNames]: classNames
     });
     return React.createElement("div", { className: classes }, children);
 };
 
-export default SlideCloseBtnWrapper;
-export { SlideCloseBtnWrapper };
-//# sourceMappingURL=slide_close_btn_wrapper.js.map
+export default SlideHeader;
+export { SlideHeader };
+//# sourceMappingURL=slide_header.js.map

package/build/esm/packages/aurora/src/components/slide/css_classes.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
     slideWrapper: string;
     slideContent: string;
     slideFooter: string;
-    slideCloseBtnWrapper: string;
+    slideHeader: string;
     slideIsOpen: string;
     slideDirectionTop: string;
     slideDirectionRight: string;

package/build/esm/packages/aurora/src/components/slide/css_classes.js

@@ -4,7 +4,7 @@ var CSS_CLASSES = {
     slideWrapper: `${slideBaseCssClass}__wrapper`,
     slideContent: `${slideBaseCssClass}__content`,
     slideFooter: `${slideBaseCssClass}__footer`,
-    slideCloseBtnWrapper: `${slideBaseCssClass}__close-btn-wrapper`,
+    slideHeader: `${slideBaseCssClass}__header`,
     slideIsOpen: `${slideBaseCssClass}_is-open`,
     slideDirectionTop: `${slideBaseCssClass}_direction-top`,
     slideDirectionRight: `${slideBaseCssClass}_direction-right`,

package/build/esm/packages/aurora/src/components/stack/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import classnames from 'classnames';
-import { STACK_DIRECTIONS, STACK_JUSTIFICATIONS, STACK_ALIGNMENTS, STACK_WRAP, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP } from './stack_constants.js';
+import { STACK_DIRECTIONS, STACK_JUSTIFICATIONS, STACK_ALIGNMENTS, STACK_WRAP, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP, STACK_CSS_CLASSES } from './stack_constants.js';
 import cssClasses from '../../css/stack/main.module.less.js';
 import { cssStack } from './css_classes.js';
 
-const Stack = ({ children, spacing = 0, className = '', direction = STACK_DIRECTIONS.row, justify = STACK_JUSTIFICATIONS.flexStart, align = STACK_ALIGNMENTS.normal, wrap = STACK_WRAP.nowrap, as = 'div' }) => {
-    const stackClass = classnames(cssClasses[cssStack], cssClasses[STACK_DIRECTIONS_TO_CSS_CLASSES_MAP[direction]], cssClasses[STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP[align]], cssClasses[STACK_JUSTIFICATIONS[justify]], cssClasses[STACK_WRAP_TO_CSS_CLASSES_MAP[wrap]], className);
+const Stack = ({ children, spacing = 0, className = '', direction = STACK_DIRECTIONS.row, justify = STACK_JUSTIFICATIONS.flexStart, align = STACK_ALIGNMENTS.normal, wrap = STACK_WRAP.nowrap, as = 'div', inline = false, style = {} }) => {
+    const stackClass = classnames(cssClasses[cssStack], cssClasses[STACK_DIRECTIONS_TO_CSS_CLASSES_MAP[direction]], cssClasses[STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP[align]], cssClasses[STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP[justify]], cssClasses[STACK_WRAP_TO_CSS_CLASSES_MAP[wrap]], inline ? cssClasses[STACK_CSS_CLASSES.inline] : '', className);
     return React.createElement(as, {
-        className: `${stackClass} ${stackClass}`,
-        style: { gap: `${spacing}px` }
+        className: `${stackClass}`,
+        style: { gap: `${spacing}px`, ...style }
     }, children);
 };
 

package/build/esm/packages/aurora/src/components/stack/stack_constants.d.ts

@@ -1,3 +1,4 @@
+export declare const stackCssBaseClass = "stack";
 export declare const STACK_DIRECTIONS: {
     readonly row: "row";
     readonly column: "column";
@@ -35,7 +36,10 @@ export declare const STACK_WRAP: {
     initial: string;
     inherit: string;
 };
-export declare const stackCssBaseClass = "stack";
+export declare const STACK_CSS_CLASSES: {
+    readonly stack: "stack";
+    readonly inline: "stack_inline";
+};
 export declare const STACK_DIRECTIONS_TO_CSS_CLASSES_MAP: {
     readonly row: "stack_direction_row";
     readonly column: "stack_direction_column";

package/build/esm/packages/aurora/src/components/stack/stack_constants.js

@@ -1,3 +1,4 @@
+const stackCssBaseClass = 'stack';
 const STACK_DIRECTIONS = {
     row: 'row',
     column: 'column',
@@ -35,7 +36,10 @@ const STACK_WRAP = {
     initial: 'initial',
     inherit: 'inherit'
 };
-const stackCssBaseClass = 'stack';
+const STACK_CSS_CLASSES = {
+    stack: stackCssBaseClass,
+    inline: `${stackCssBaseClass}_inline`
+};
 const STACK_DIRECTIONS_TO_CSS_CLASSES_MAP = {
     [STACK_DIRECTIONS.row]: `${stackCssBaseClass}_direction_row`,
     [STACK_DIRECTIONS.column]: `${stackCssBaseClass}_direction_column`,
@@ -54,11 +58,23 @@ const STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP = {
     [STACK_ALIGNMENTS.flexStart]: `${stackCssBaseClass}_align_flex-start`,
     [STACK_ALIGNMENTS.flexEnd]: `${stackCssBaseClass}_align_flex-end`
 };
+const STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP = {
+    [STACK_JUSTIFICATIONS.start]: `${stackCssBaseClass}_justify_start`,
+    [STACK_JUSTIFICATIONS.end]: `${stackCssBaseClass}_justify_end`,
+    [STACK_JUSTIFICATIONS.center]: `${stackCssBaseClass}_justify_center`,
+    [STACK_JUSTIFICATIONS.spaceBetween]: `${stackCssBaseClass}_justify_space-between`,
+    [STACK_JUSTIFICATIONS.spaceAround]: `${stackCssBaseClass}_justify_space-around`,
+    [STACK_JUSTIFICATIONS.spaceEvenly]: `${stackCssBaseClass}_justify_space-evenly`,
+    [STACK_JUSTIFICATIONS.flexStart]: `${stackCssBaseClass}_justify_flex-start`,
+    [STACK_JUSTIFICATIONS.flexEnd]: `${stackCssBaseClass}_justify_flex-end`,
+    [STACK_JUSTIFICATIONS.initial]: `${stackCssBaseClass}_justify_initial`,
+    [STACK_JUSTIFICATIONS.inherit]: `${stackCssBaseClass}_justify_inherit`
+};
 const STACK_WRAP_TO_CSS_CLASSES_MAP = {
     [STACK_WRAP.wrap]: `${stackCssBaseClass}_wrap_wrap`,
     [STACK_WRAP.nowrap]: `${stackCssBaseClass}_wrap_nowrap`,
     [STACK_WRAP.wrapReverse]: `${stackCssBaseClass}_wrap_wrap-reverse`
 };
 
-export { STACK_ALIGNMENTS, STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_DIRECTIONS, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS, STACK_WRAP, STACK_WRAP_TO_CSS_CLASSES_MAP, stackCssBaseClass };
+export { STACK_ALIGNMENTS, STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_CSS_CLASSES, STACK_DIRECTIONS, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP, STACK_WRAP_TO_CSS_CLASSES_MAP, stackCssBaseClass };
 //# sourceMappingURL=stack_constants.js.map

package/build/esm/packages/aurora/src/components/stack/stack_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/stack/stack_types.d.ts

@@ -1,6 +1,6 @@
 import { Any } from 'ts-toolbelt';
 import React from 'react';
-import { STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_DIRECTIONS, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP } from "./stack_constants";
+import { STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP } from "./stack_constants";
 export declare type TStackProps = {
     direction?: TStackDirection;
     justify?: TStackJustify;
@@ -10,8 +10,10 @@ export declare type TStackProps = {
     className?: string;
     children?: React.ReactNode;
     as?: string;
+    inline?: boolean;
+    style?: Record<any, any>;
 };
 export declare type TStackJustify = Any.Keys<typeof STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP>;
-export declare type TStackDirection = Any.Keys<typeof STACK_DIRECTIONS>;
+export declare type TStackDirection = Any.Keys<typeof STACK_DIRECTIONS_TO_CSS_CLASSES_MAP>;
 export declare type TStackAlign = Any.Keys<typeof STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP>;
 export declare type TStackWrap = Any.Keys<typeof STACK_WRAP_TO_CSS_CLASSES_MAP>;

package/build/esm/packages/aurora/src/components/typography/index.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from 'react';
+import { ITypographyProps } from "./typography_types";
+export declare const Typography: React.FC<PropsWithChildren<ITypographyProps>>;
+export default Typography;