@dreamcommerce/aurora 0.3.4-183 → 0.3.4-187

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IDropdownOptionProps } from '../types';
+/**
+ * Dropdown.Option component. Should be only used within Dropdown.List
+ * @component
+ * @example
+ * const option = {
+ *  text: 'Option 1',
+ *  value: '1'
+ * }
+ *
+ * <Dropdown.Option
+ *  key="id1"
+ *  option={option}
+ *  isSelected={false}
+ *  isDisabled={false}
+ *  isReadonly={false}
+ *  onClick={(option) => console.log(option)}
+ * />
+ */
+declare const Option: React.FC<IDropdownOptionProps>;
+export default Option;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IDropdownOptionMultipleProps } from '../types';
+/**
+ * Dropdown.OptionMultiple component. Should be only used within Dropdown.List
+ * @component
+ * @example
+ * const option = {
+ *  text: 'Option 1',
+ *  value: '1'
+ * }
+ *
+ * <Dropdown.OptionMultiple
+ *  key="id1"
+ *  option={option}
+ *  isSelected={false}
+ *  isDisabled={false}
+ *  isReadonly={false}
+ *  onClick={(option) => console.log(option)}
+ * />
+ */
+declare const OptionMultiple: React.FC<IDropdownOptionMultipleProps>;
+export default OptionMultiple;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDropdownSearchProps } from '../types';
+/**
+ * Dropdown.Search component. Displays search control.
+ * @component
+ * @example
+ * <Dropdown.Search onKeyUp={(ev) => console.log(`${ev} is a keyboard event`)} />
+ */
+declare const Search: React.FC<IDropdownSearchProps>;
+export default Search;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDropdownSelectProps } from '../types';
+/**
+ * Dropdown.Select component. Displays select like control. Use it only if you have selectable values.
+ * @component
+ * @example
+ * <Dropdown.Select name="select_name" selectedOptions={['value1', 'value2']} />
+ */
+declare const Select: React.FC<IDropdownSelectProps>;
+export default Select;

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

@@ -0,0 +1,6 @@
+export declare const DROPDOWN_TEST_ID: {
+    dropdown: string;
+    label: string;
+};
+export declare const DROPDOWN_Z_INDEX = 1200;
+export declare const DROPDOWN_ON_MODAL_Z_INDEX = 2200;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IDropdownContext } from './types';
+export declare const DropdownContext: import("react").Context<{}>;
+/**
+ * drodown context
+ */
+export declare const useDropdownContext: () => IDropdownContext;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface IDropdownContext {
+    wrapperRef?: React.RefObject<HTMLDivElement>;
+    isOpen?: boolean;
+    toggleDropdown?: () => void;
+}

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

@@ -0,0 +1,19 @@
+export declare const cssDropdown = "dropdown";
+export declare const cssDropdownContent: string;
+export declare const cssDropdownContentRight: string;
+export declare const cssDropdownHeader: string;
+export declare const cssDropdownHeaderIcon: string;
+export declare const cssDropdownHeaderTitle: string;
+export declare const cssDropdownHeaderContent: string;
+export declare const cssDropdownInput: string;
+export declare const cssDropdownList: string;
+export declare const cssDropdownSearch: string;
+export declare const cssDropdownWithScroll: string;
+export declare const cssDropdownListWithGroup: string;
+export declare const cssDropdownListHead: string;
+export declare const cssDropdownListItem: string;
+export declare const cssDropdownListItemSelected: string;
+export declare const cssDropdownListItemDisabled: string;
+export declare const cssDropdownListItemReadonly: string;
+export declare const cssIcon = "icon";
+export declare const cssIconBack: string;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IMultiSelectProps } from '../../types';
+/**
+ * MultiSelect component. Build with Dropdown composed components.
+ *
+ * @component
+ * @example
+ * const options = [{
+ *  text: 'Option 1',
+ *  value: 'value1'
+ * }, {
+ *  text: 'Option 2,,
+ *  value: 'value2'
+ * }];
+ * return (
+ *  <MultiSelect name="my_select_name" options={options} onChange={(option) => console.log(option)} />
+ * )
+ */
+declare const Multiple: React.FC<IMultiSelectProps>;
+export default Multiple;

package/build/esm/packages/aurora/src/src/components/dropdown/hoc/select/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ISelectProps } from '../../types';
+/**
+ * Select component. Build with Dropdown composed components.
+ *
+ * @component
+ * @example
+ * const options = [{
+ *  text: 'Option 1',
+ *  value: 'value1'
+ * }, {
+ *  text: 'Option 2,,
+ *  value: 'value2'
+ * }];
+ * return (
+ *  <Select name="my_select_name" options={options} onChange={(option) => console.log(option)} />
+ * )
+ */
+declare const Select: React.FC<ISelectProps>;
+export default Select;

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

@@ -0,0 +1,5 @@
+import { useValue } from './use_value';
+import { useValues } from './use_values';
+import { useToggle } from './use_toggle';
+import { useSetOptionsOnClose } from './use_set_options_on_close';
+export { useValue, useValues, useToggle, useSetOptionsOnClose };

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

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useKeyboardOpenClose: (toggleDropdown?: (() => void) | undefined, isOpen?: boolean | undefined, ref?: RefObject<HTMLElement> | undefined) => void;

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

@@ -0,0 +1,10 @@
+import { ISelectOption } from '../types';
+/**
+ * hook used to reset filtered options list to default on dropdown hide
+ * @param isWithSearch indicates if dropdown use search (searchable items)
+ * @param isOpen indicates if dropdown is open
+ * @param setOptionsList state setter for options list
+ * @param options default options list
+ * @returns {void} nothing
+ */
+export declare const useSetOptionsOnClose: (isWithSearch: boolean, isOpen: boolean, setOptionsList: (value: React.SetStateAction<Array<ISelectOption>>) => void, options: Array<ISelectOption>) => void;

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

@@ -0,0 +1,7 @@
+/**
+ * Hook used for toggling dropdown
+ * @param defaultIsOpen should dropdown be opened at render
+ * @param onToggleCb callback onToggle
+ * @returns {Array} tuple - open state and and method to change open state
+ */
+export declare const useToggle: (defaultIsOpen?: boolean, onToggleCb?: ((isOpen: boolean) => void) | undefined) => [boolean, () => void];

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

@@ -0,0 +1,21 @@
+import { ISelectOption } from '../types';
+/**
+ * Hook used to allow use single selectable value, returns array of selected values and method to set value as selected
+ * You can use is for select or any other form of control which needs single selectable value
+ * @param {React.RefObject<HTMLElement>} wrapperRef
+ * @param {Array<ISelectOption>} options
+ * @param {Array<string>} defaultValues
+ * @param {Function} onChangeCb
+ *
+ * @fires dropdown:change
+ *
+ * @returns {Array} Tuple - selected values and state setter for them
+ */
+export declare const useValue: (wrapperRef: React.RefObject<HTMLElement>, options: Array<ISelectOption>, defaultValues: Array<string>, onChangeCb?: ((selectedOption: ISelectOption) => void) | undefined) => [ISelectOption[], (selectedOption: ISelectOption) => void];
+/**
+ * dropdown:change event
+ *
+ * @event dropdown:change
+ * @type {object}
+ * @property {ISelectOption} selectedOption selected option
+ */

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

@@ -0,0 +1,24 @@
+import { ISelectOption } from '../types';
+/**
+ * Hook used to allow use multiple selectable values, returns array of selected values and method to set value as
+ * selected/unselected You can use is for multiselect or any other form of control which needs multiple selectable
+ * values
+ * @param {React.RefObject<HTMLElement>} wrapperRef
+ * @param {Array<ISelectOption>} options
+ * @param {Array<string>} defaultValues
+ * @param {Function} onChangeCb
+ *
+ * @fires dropdown:change
+ *
+ * @returns {Array} Tuple - selected values and state setter for them
+ */
+export declare const useValues: (wrapperRef: React.RefObject<HTMLElement>, options: Array<ISelectOption>, defaultValues: Array<string>, onChangeCb?: ((selectedOption: ISelectOption, isChecked: boolean, selectedOptions: Array<ISelectOption>) => void) | undefined) => [ISelectOption[], (selectedOption: ISelectOption) => void];
+/**
+ * dropdown:change event
+ *
+ * @event dropdown:change
+ * @type {object}
+ * @property {ISelectOption} selectedOption selected option
+ * @property {boolean} isChecked indicates whether the current option is selected
+ * @property {Array<ISelectOption>} allSelectedOptions array of all selected options
+ */

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IDropdownProps, IDropdownComposition } from './types';
+/**
+ * Dropdown composition component. Provides several Dropdown dependant components which can be composed to create
+ * selects, multiselects or dropdowns.
+ *
+ * @component
+ * @example
+ * return (
+ *  <Dropdown>
+ *      <Dropdown.Label label="Wybierz link" />
+ *      <Dropdown.Content>
+ *          <Dropdown.List>
+ *              <Dropdown.Link text="shoper.pl" href="https://shoper.pl" />
+ *              <Dropdown.Link text="forum.shoper.pl" href="https://forum.shoper.pl" />
+ *              <Dropdown.Link text="shoper.pl/help" href="https://shoper.pl/help" />
+ *          </Dropdown.List>
+ *      </Dropdown.Content>
+ *  <Dropdown>
+ * )
+ */
+declare const Dropdown: React.FC<IDropdownProps> & IDropdownComposition;
+export default Dropdown;

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

@@ -0,0 +1,100 @@
+import { ReactNode, RefObject } from 'react';
+export interface IDropdownProps {
+    isWithGroups?: boolean;
+    defaultIsOpen?: boolean;
+    defaultCloseOnClick?: boolean;
+    portalContainer?: RefObject<HTMLElement>;
+    children?: ReactNode;
+    onToggle?: (isOpen: boolean) => void;
+}
+export interface IDropdownComposition {
+    Select: React.FC<IDropdownSelectProps>;
+    Label: React.FC<IDropdownLabelProps>;
+    CustomLabel: React.FC<IDropdownCustomLabelProps>;
+    Content: React.FC<IDropdownContentProps>;
+    Search: React.FC<IDropdownSearchProps>;
+    Header: React.FC<IDropdownHeaderProps>;
+    List: React.FC<IDropdownListProps>;
+    Item: React.FC<IDropdownItemProps>;
+    Option: React.FC<IDropdownOptionProps>;
+    OptionMultiple: React.FC<IDropdownOptionMultipleProps>;
+    Link: React.FC<IDropdownLinkProps>;
+}
+export interface IDropdownSelectProps {
+    name: string | undefined;
+    selectedOptions: Array<ISelectOption>;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+}
+export interface IDropdownLabelProps {
+    label: string;
+    cssClass?: string;
+}
+export interface IDropdownCustomLabelProps {
+}
+export interface IDropdownContentProps {
+    search?: ReactNode;
+    children?: ReactNode;
+    headerComponent?: string | ReactNode;
+    headerGoBackText?: string;
+    headerGoBackIcon?: JSX.Element;
+    portalContainer?: RefObject<HTMLElement>;
+    arrowSide?: 'left' | 'right';
+}
+export interface IDropdownSearchProps {
+    onKeyUp: (ev: React.KeyboardEvent<Element>) => void;
+}
+export interface IDropdownListProps {
+    isWithGroups?: boolean;
+    children?: ReactNode;
+}
+export interface IDropdownOptionProps {
+    option: ISelectOption;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+    onClick: (option: ISelectOption) => void;
+}
+export interface IDropdownOptionMultipleProps extends IDropdownOptionProps {
+}
+export interface IDropdownHeaderProps {
+    text: string;
+}
+export interface IDropdownItemProps {
+    children: ReactNode;
+    isSelected?: boolean;
+    onClick?: (obj: {
+        ev: React.MouseEvent;
+        toggleDropdown: undefined | (() => void);
+    }) => void;
+}
+export interface IDropdownLinkProps {
+    text: string;
+    href: string;
+    target?: string;
+    rel?: string;
+}
+export interface ISelectProps extends IDropdownProps {
+    name?: string;
+    options: Array<ISelectOption>;
+    defaultValues?: Array<string>;
+    isReadonly?: boolean;
+    isDisabled?: boolean;
+    isWithSearch?: boolean;
+    onChange?: (selectedOption: ISelectOption) => void;
+}
+export interface ISelectOption {
+    text: string;
+    value: string;
+    isHeader?: boolean;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+}
+export interface IMultiSelectProps extends Omit<ISelectProps, 'onChange'> {
+    onChange?: (selectedOption: ISelectOption, isChecked: boolean, allSelectedOptions: Array<ISelectOption>) => void;
+}
+export interface ISelectOptionAttributes {
+    isSelected: boolean;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+}

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

@@ -0,0 +1,32 @@
+import { RefObject } from 'react';
+import { ISelectOption } from './types';
+/**
+ * checks if the given option is selected within array of selectedValues array
+ * @param {ISelectOption} option select/multiselect option
+ * @param {Array<ISelectOption>} selectedValues array of selected values
+ * @returns {Boolean}
+ */
+export declare const isSelected: (option: ISelectOption, selectedValues: Array<ISelectOption>) => boolean;
+/**
+ * Called on Dropdown.Option(Dropdown.MultiOption) click. Marks given option as selected, option value is added do
+ * selectedValues array, closes dropdown if defaultCloseOnClick is true
+ * @param {ISelectOption} option - option that was clicked
+ * @param {boolean} defaultCloseOnClick - determines if dropdown should hide after choosing option
+ * @param {Function} setSelectedValues - selected values state setter
+ * @param {Function} toggleDropdown - method which toggles dropdown
+ */
+export declare const handleItemClick: (option: ISelectOption, defaultCloseOnClick: boolean, setSelectedValues: (selectedOption: any) => void, toggleDropdown: () => void) => void;
+/**
+ * function called on keypress on Dropdown.Search control_input, filters dropdown options and sets new list with
+ * filtered results
+ * @param {React.KeyboardEvent} ev react keyboard event
+ * @param {Array<ISelectOption>} options list of dropdown options to filter
+ * @param {Function} setOptionsList method to set new state of options list
+ * @returns {void} nothing
+ */
+export declare const handleSearchKeyUp: (ev: React.KeyboardEvent, options: Array<ISelectOption>, setOptionsList: (value: React.SetStateAction<ISelectOption[]>) => void) => void;
+export declare const getXYModifiersForNestedDropdowns: (portalContainer: HTMLElement | null | undefined) => {
+    xModifier: number;
+    yModifier: number;
+};
+export declare const isChildOfModal: (ref: RefObject<HTMLElement>) => boolean;

package/build/esm/packages/aurora/src/src/components/file_picker/components/file_input.d.ts

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

package/build/esm/packages/aurora/src/src/components/file_picker/components/selected_file_preview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISelectedFilePreview } from '@auroraComponents/file_picker/types';
+declare const SelectedFilePreview: React.FC<ISelectedFilePreview>;
+export default SelectedFilePreview;

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    filePicker: string;
+    filePickerDescription: string;
+    filePickerImagePreview: string;
+    filePickerUploadIcon: string;
+    filePickerDeleteIcon: string;
+    filePickerInput: string;
+    filePickerSelectedFile: string;
+    filePickerSelectedFileDescription: string;
+};
+export default _default;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IFilePicker } from '@auroraComponents/file_picker/types';
+declare const FilePicker: React.FC<IFilePicker>;
+export default FilePicker;

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

@@ -0,0 +1,42 @@
+import React, { ChangeEvent } from 'react';
+export declare type TFilePickerFile = {
+    fileUrl: string;
+    fileName: string;
+};
+export interface IFilePicker {
+    id: string;
+    name?: string;
+    className?: string;
+    onChange?: (fileList: FileList | null) => void;
+    allowedExtensions?: string[];
+    initialFile?: TFilePickerFile;
+}
+export interface ISelectedFilePreview {
+    file: TFilePickerFile | null;
+    isPreview: boolean;
+    onPreviewError: () => void;
+    onFileDelete: () => void;
+}
+export interface IFileInput {
+    id: string;
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    allowedExtensions: string[];
+    isDragOver: boolean;
+}
+export interface IUseFilePicker {
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFileDelete: () => void;
+    onPreviewError: () => void;
+    file: TFilePickerFile | undefined;
+    isPreview: boolean;
+    isDragOver: boolean;
+}
+export interface IUseFilePickerProps {
+    onChange?: (fileList: FileList | null) => void;
+    initialFile?: TFilePickerFile;
+}

package/build/esm/packages/aurora/src/src/components/file_picker/use_file_picker.d.ts

@@ -0,0 +1,2 @@
+import { IUseFilePicker, IUseFilePickerProps } from '@auroraComponents/file_picker/types';
+export declare const useFilePicker: ({ onChange, initialFile }: IUseFilePickerProps) => IUseFilePicker;

package/build/esm/packages/aurora/src/src/components/flash_messenger/components/flash_message.d.ts

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

package/build/esm/packages/aurora/src/src/components/flash_messenger/components/flash_messages_list.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IFlashMessagesList } from '@auroraComponents/flash_messenger/types';
+declare const FlashMessagesList: React.FC<IFlashMessagesList>;
+export default FlashMessagesList;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IFlashMessengerContext } from './types';
+export declare const FlashMessengerContext: import("react").Context<IFlashMessengerContext | null>;
+export declare const useFlashMessenger: () => IFlashMessengerContext;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FlashMessenger: React.FC;
+export default FlashMessenger;

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

@@ -0,0 +1,22 @@
+import { TMessageBoxType } from '@auroraComponents/message-box/types';
+export interface IFlashMessengerContext {
+    removeMessage: (id: string) => void;
+    hideMessage: (id: string) => void;
+    addMessage: (message: TFlashMessage) => void;
+}
+export interface IFlashMessage {
+    message: TFlashMessageExtended;
+}
+export interface IFlashMessagesList {
+    messages: TFlashMessageExtended[];
+}
+export declare type TFlashMessageExtended = TFlashMessage & {
+    id: string;
+    timeout?: number;
+    isVisible?: boolean;
+};
+export declare type TFlashMessage = {
+    content: string;
+    type: TMessageBoxType;
+    timeout?: number;
+};

package/build/esm/packages/aurora/src/src/components/gallery/constants.d.ts

@@ -0,0 +1,4 @@
+import { TMode, TJsSelectors, TDimensionsType } from './types';
+export declare const GALLERY_MODE: Record<TMode, TMode>;
+export declare const JS_CLASSES: Record<TJsSelectors, string>;
+export declare const DIMENSIONS_TYPE: Record<TDimensionsType, TDimensionsType>;

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

@@ -0,0 +1,33 @@
+export declare const cssGallery = "gallery";
+export declare const cssGalleryMobile: string;
+export declare const cssGalleryBar: string;
+export declare const cssGalleryBarImageNumbers: string;
+export declare const cssGalleryBarImageDescription: string;
+export declare const cssGalleryBarCopyLink: string;
+export declare const cssGalleryBarCopyLinkConfirmation: string;
+export declare const cssGalleryBarCopyLinkConfirmationText: string;
+export declare const cssGalleryBarImageClose: string;
+export declare const cssGalleryImages: string;
+export declare const cssGalleryImagesWithTransition: string;
+export declare const cssGalleryImagesContainer: string;
+export declare const cssGalleryImage: string;
+export declare const cssGalleryImageContainer: string;
+export declare const cssGalleryImageAdjusted: string;
+export declare const cssGalleryImageMaxWidth: string;
+export declare const cssGalleryImageMaxHeight: string;
+export declare const cssIcon = "icon";
+export declare const cssIconArrow: string;
+export declare const cssIconArrowContainer: string;
+export declare const cssIconArrowContainerPrevious: string;
+export declare const cssIconArrowContainerNext: string;
+export declare const cssIconArrowRotate180: string;
+export declare const cssIconClose: string;
+export declare const cssIconLink: string;
+export declare const cssIconSuccess: string;
+export declare const cssLoaderMask = "loader__mask";
+export declare const cssHide = "hide";
+export declare const cssHideMobile = "hide_mobile";
+export declare const cssHideDesktop = "hide_desktop";
+export declare const cssZoomIn = "zoom-in";
+export declare const cssZoomOut = "zoom-out";
+export declare const cssGrabbing = "grabbing";