@progressiveui/react 2.0.3 → 2.0.4

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,151 @@
+import { ComponentType, PropsWithChildren } from 'react';
+import * as React from "react";
+import * as HookForm from "react-hook-form";
+/**
+   * Optionally provide the default value of the input @design
+ 
+  defaultValue?: string | number;  */
+export interface InputProps {
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control @design
+     */
+    labelText?: React.ReactNode;
+    /**
+     * Provide a custom className that is applied directly to the underlying
+     * <textarea> node
+     */
+    formItemClassName?: string;
+    /**
+     * Provide a custom className that is applied directly to the underlying
+     * <input> or <textarea> node
+     */
+    inputWrapperClassName?: string;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify whether the control is currently invalid.
+     * Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
+     */
+    invalid?: boolean | HookForm.FieldError | any;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state @design
+     */
+    invalidText?: string | React.ReactNode | any;
+    /**
+     * Provide the content that will be shown in addition to the label
+     * (e.g. units, currency, etc.)
+     * This content will be placed after the label @design
+     */
+    additional?: React.ReactNode;
+    light?: boolean;
+    /**
+     * Specify the placeholder attribute for the input @design
+     */
+    placeholder?: string;
+    /**
+     * Provide a unique identifier for the control
+     */
+    id?: string;
+    /**
+     * Provide a name for the control
+     */
+    name?: string;
+    /**
+     * Specify if the control is required @design
+     * (sets aria-invalid as well)
+     */
+    required?: boolean;
+    /**
+     * Specify if the control is disabled @design
+     * (sets aria-disabled as well)
+     */
+    disabled?: boolean;
+    /**
+     * If the input is read-only, the user cannot change its value but focus
+     * and tabIndex are still applied @design
+     * (sets aria-readonly as well)
+     */
+    readOnly?: boolean;
+    /**
+     * Renders the input as inline element for horizontal forms
+     */
+    inline?: boolean;
+    /**
+     * Additional helper in front of the input, e.g. a currency symbol @design
+     * (sets aria-describedby as well)
+     */
+    addonBefore?: string | React.ReactNode;
+    /**
+     * Additional helper behind the input, e.g. a currency symbol @design
+     * (sets aria-describedby as well)
+     */
+    addonAfter?: string | React.ReactNode;
+    /**
+     * Supports replacement components
+     */
+    components?: {
+        AddonBefore?: ComponentType<InputPropsForReplacementComponents>;
+        AddonAfter?: ComponentType<InputPropsForReplacementComponents>;
+        Label?: ComponentType<InputPropsForReplacementComponents>;
+        HelperText?: ComponentType<InputPropsForReplacementComponents>;
+        InlineErrorMessage?: ComponentType<InputPropsForReplacementComponents>;
+    };
+}
+export interface InputPropsForReplacementComponents extends InputProps, React.ComponentPropsWithRef<"div"> {
+    /**
+     * The classes for the label
+     */
+    labelClasses?: string;
+    /**
+     * The the ID of the element, uses the `name` prop if no `id` is provided. Make sure it is unique on the page.
+     */
+    calculatedId?: string;
+    /**
+     * The classes for the helper element
+     */
+    helperTextClasses?: string;
+    /**
+     * The classes for the error element
+     */
+    errorClasses?: string;
+    /**
+     * The id of the error. calculatedId + '-error-msg'
+     */
+    errorId?: string;
+    /**
+     * An icon for the error element
+     */
+    errorIcon?: React.ReactNode;
+}
+export interface AddonBeforeProps {
+    addonBefore?: React.ReactNode;
+    prefix?: string;
+}
+export declare function AddonBefore({ addonBefore, prefix, }: InputPropsForReplacementComponents): import("react/jsx-runtime").JSX.Element | null;
+export declare function AddonAfter({ addonAfter, prefix, }: InputPropsForReplacementComponents): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Shows the error message underneath the element */
+export declare function InlineErrorMessage({ errorId, errorClasses, invalid, invalidText, }: InputPropsForReplacementComponents): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Shows a helper text under the label */
+export declare function Label({ labelClasses, calculatedId, labelText, required, hideLabel, }: InputPropsForReplacementComponents): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Shows a helper text under the label */
+export declare function Helper({ helperTextClasses, helperText, }: InputPropsForReplacementComponents): import("react/jsx-runtime").JSX.Element | null;
+interface InputPropsI extends InputProps, React.ComponentPropsWithRef<"div"> {
+    /**
+     * Provide a children to the input
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Input is a wrapper for custom inputs providing the label, helperText and errors. */
+declare const Input: React.FC<PropsWithChildren<InputPropsI>>;
+export default Input;

package/dist/components/Input/index.d.ts

@@ -0,0 +1,3 @@
+export { default, AddonBefore, AddonAfter, Label, Helper, InlineErrorMessage, } from './Input';
+export type { InputProps } from './Input';
+export { useInput } from './useInput';

package/dist/components/Input/useInput.d.ts

@@ -0,0 +1,126 @@
+import { default as React } from 'react';
+export interface UseInputProps {
+    /**
+     * Specify an optional className to be applied to the <input> node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the <input>
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the <input> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify an optional className to be applied to the input node
+     */
+    inputClassName?: string;
+    /**
+     * Specify an optional className to be applied to the input wrapper node
+     */
+    inputWrapperClassName?: string;
+    /**
+     * Specify a custom `id` for the <input>
+     */
+    id?: string;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText?: React.ReactNode;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever <input>
+     * is updated
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * <input> is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /**
+     * Specify the placeholder attribute for the <input>
+     */
+    placeholder?: string;
+    /**
+     * Specify the type of the <input>
+     */
+    type?: string;
+    /**
+     * Specify the value of the <input>
+     */
+    value?: string | number | readonly string[] | undefined;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify whether the control is currently invalid.
+     * Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
+     */
+    invalid?: boolean | object;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: string | React.ReactNode;
+    /**
+     * Provide additional component that is used alongside the input for customization
+     */
+    additional?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: React.ReactNode;
+    /**
+     * `true` to use the light version.
+     */
+    light?: boolean;
+    readOnly?: boolean;
+    name?: string;
+}
+/**
+ * Input is a wrapper for custom inputs providing the label, helperText and errors. */
+export declare const useInput: ({ addonAfter, className, inputClassName, id, placeholder, type, onChange, onClick, hideLabel, name, invalid, invalidText, labelText, helperText, light, value, ...other }: UseInputProps) => {
+    inputProps: {
+        onChange: (evt: any) => void;
+        onClick: (evt: any) => void;
+        placeholder: string | undefined;
+        value: string | number | readonly string[] | undefined;
+        type: string;
+        /**
+         * Optionally provide the default value of the <input>
+         */
+        defaultValue?: string | number;
+        /**
+         * Specify whether the <input> should be disabled
+         */
+        disabled?: boolean;
+        /**
+         * Specify an optional className to be applied to the input wrapper node
+         */
+        inputWrapperClassName?: string;
+        /**
+         * Provide additional component that is used alongside the input for customization
+         */
+        additional?: React.ReactNode;
+        readOnly?: boolean;
+        id: string | undefined;
+        name: string | undefined;
+        className: string;
+    };
+    wrapperProps: {
+        calculatedId: string | undefined;
+        id: string | undefined;
+        name: string | undefined;
+        className: string | undefined;
+        addonAfter: React.ReactNode;
+        labelText: React.ReactNode;
+        helperText: React.ReactNode;
+        hideLabel: boolean | undefined;
+        invalid: boolean | object | undefined;
+        invalidText: React.ReactNode;
+    };
+};
+export default useInput;

package/dist/components/InputGroup/InputGroup-old.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (props?: object) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/InputGroup/InputGroup-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { InputProps } from '../Input/Input';
+/**
+ * InputGroup allows you to organize and arange multiple input elements.
+ */
+interface InputGroupProps extends InputProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Provide a collection of <RadioButton> components to render in the group
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the <RadioButton> to be selected by default
+     */
+    defaultSelected?: string | number;
+    /**
+     * Specify the name of the underlying `input` nodes
+     */
+    name?: string;
+    /**
+     * Provide an optional `onChange` hook that is called whenever the value of
+     * the group changes
+     */
+    /**
+     * Specify the value that is currently selected in the group
+     */
+    valueSelected?: string | number;
+    /**
+     * Specify whether the elements should be displayed vertically.
+     */
+    vertical?: boolean;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText?: React.ReactNode;
+    controlled?: boolean;
+    wrapperClassName?: string;
+}
+declare const InputGroup: React.FC<InputGroupProps>;
+export default InputGroup;

package/dist/components/InputGroup/RadioButtonGroupWithoutControls.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Item/Item-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Item/Item.d.ts

@@ -0,0 +1,59 @@
+import { IIcon } from '../../utils';
+import * as React from "react";
+interface ItemProps extends Omit<React.ComponentPropsWithRef<"div">, "title"> {
+    /**
+     * Provide the title for the item contet
+     */
+    title?: React.ReactNode;
+    /**
+     * Provide the description for the item content
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide the icon for the item content
+     */
+    icon?: React.ReactNode | IIcon;
+    /**
+     * Provide a kind to use different appearances.
+     */
+    kind?: "undefined" | "horizontal" | "large";
+    /**
+     * Provide a wrap to use different borders.
+     */
+    wrapper?: "undefined" | "sidebar" | "repeater";
+    /**
+     * Show an additional chevron icon on the right side
+     */
+    showAdditionalIcon?: boolean;
+    /**
+     * Additional content shown underneath the regular content (children)
+     */
+    subContent?: React.ReactNode;
+    /**
+     * Provide a hint to the item shown on the right bottom corner
+     */
+    hint?: React.ReactNode;
+    /**
+     * Enable the active state to the item
+     */
+    active?: boolean;
+    /**
+     * Provide additional info on the top right corner of the item
+     */
+    additional?: React.ReactNode;
+    /**
+     * Provide an image to the item
+     */
+    image?: React.ReactNode;
+    /**
+     * Disable the image to the item
+     */
+    noImage?: boolean;
+    /**
+     * Enable an unread state to the item
+     */
+    unread?: boolean;
+}
+/** The item component to show entries inside a list, like a sidebar or an overview page. */
+declare const Item: React.FC<ItemProps>;
+export default Item;

package/dist/components/Link/Link-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Link/Link-test.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/List/List-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/List/List.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/** List component show a number of connected items written consecutively, typically one below the other. */
+export interface ListBaseProps {
+    /**
+     * If true, colons will be displayed in the List items.
+     */
+    colon?: boolean;
+    /**
+     * Specifies the visual presentation style of the List.
+     */
+    kind?: "unstyled" | "simple-inline" | "simple" | "details" | "unordered" | "ordered" | "tooltip" | "bullets";
+    /**
+     * If true, renders the List with a smaller font size and padding.
+     */
+    small?: boolean;
+}
+interface ListOlProps extends ListBaseProps, React.ComponentPropsWithRef<"button"> {
+}
+interface ListUlProps extends ListBaseProps, React.ComponentPropsWithRef<"a"> {
+}
+type ConditionalProps<T> = T extends {
+    kind: "ordered";
+} ? ListOlProps : ListUlProps;
+type ListProps<T extends {
+    kind?: string;
+}> = ConditionalProps<T> & React.ComponentPropsWithRef<T extends {
+    kind: "ordered";
+} ? "ol" : "ul">;
+export declare const List: React.ForwardRefExoticComponent<Omit<ListProps<{
+    kind?: string;
+}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default List;

package/dist/components/Loading/Loading-oldClass.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (props?: object) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/Loading/Loading-oldFC.d.ts

@@ -0,0 +1,20 @@
+import { default as PropTypes } from 'prop-types';
+export default Loading;
+/** Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. */
+declare function Loading(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace Loading {
+    namespace propTypes {
+        let active: PropTypes.Requireable<boolean>;
+        let className: PropTypes.Requireable<string>;
+        let withOverlay: PropTypes.Requireable<boolean>;
+        let small: PropTypes.Requireable<boolean>;
+    }
+    namespace defaultProps {
+        let active_1: boolean;
+        export { active_1 as active };
+        let withOverlay_1: boolean;
+        export { withOverlay_1 as withOverlay };
+        let small_1: boolean;
+        export { small_1 as small };
+    }
+}

package/dist/components/Loading/Loading-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Loading/loading-vanilla.d.ts

@@ -0,0 +1,52 @@
+export default Loading;
+declare class Loading {
+    /**
+     * The map associating DOM element and spinner instance.
+     * @member Loading.components
+     * @type {WeakMap}
+     */
+    static components: WeakMap<any, any>;
+    /**
+     * The component options.
+     * If `options` is specified in the constructor, {@linkcode Loading.create .create()}, or {@linkcode Loading.init .init()},
+     * properties in this object are overriden for the instance being create and how {@linkcode Loading.init .init()} works.
+     * @member Loading.options
+     * @type {object}
+     * @property {string} selectorInit The CSS selector to find spinners.
+     */
+    static get options(): object;
+    /**
+     * Spinner indicating loading state.
+     * @extends CreateComponent
+     * @extends InitComponentBySearch
+     * @extends Handles
+     * @param {HTMLElement} element The element working as a spinner.
+     * @param {object} [options] The component options.
+     * @param {boolean} [options.active] `true` if this spinner should roll.
+     */
+    constructor(element: HTMLElement, options?: {
+        active?: boolean | undefined;
+    });
+    active: any;
+    /**
+     * Sets active/inactive state.
+     * @param {boolean} active `true` if this spinner should roll.
+     */
+    set(active: boolean): this;
+    /**
+     * Toggles active/inactive state.
+     */
+    toggle(): this;
+    /**
+     * @returns {boolean} `true` if this spinner is rolling.
+     */
+    isActive(): boolean;
+    /**
+     * Sets state to inactive and deletes the loading element.
+     */
+    end(): void;
+    /**
+     * Delete component from the DOM.
+     */
+    _deleteElement(): void;
+}

package/dist/components/Loading/loading.config.d.ts

@@ -0,0 +1,28 @@
+export namespace context {
+    export { prefix };
+}
+export let variants: ({
+    name: string;
+    label: string;
+    notes: string;
+    context: {
+        overlay: boolean;
+        small?: undefined;
+    };
+} | {
+    name: string;
+    label: string;
+    context: {
+        overlay: boolean;
+        small?: undefined;
+    };
+    notes?: undefined;
+} | {
+    name: string;
+    label: string;
+    context: {
+        overlay: boolean;
+        small: boolean;
+    };
+    notes?: undefined;
+})[];

package/dist/components/MainNavigation/MainNavigation-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/MainNavigation/MainNavigation.d.ts

@@ -0,0 +1,51 @@
+import { default as React, ComponentType } from 'react';
+import { ScreenSize } from '../../utils';
+import { MobileButtonProps } from './MobileButton';
+import { WrapperProps } from '../Wrapper/Wrapper';
+/** The Main Navigation is a Horizontal Menu which consists of multiple clickable items placed at the top of the page. The navigation stays unchanged when browswing through the site and is present on every page. The currently selected item is usually highlighted. */
+interface MainNavigationProps extends React.ComponentPropsWithRef<"div"> {
+    /**
+     * The Logo can be either a string or a component
+     */
+    logo?: string | React.ReactNode;
+    /**
+     * Specify the max-width on desktop devices (same as \`Wrapper\` component)
+     */
+    pageWidth?: ScreenSize;
+    /**
+     * The replaceable components to be used for the main navigation. MobileButton(prefix, toggleMenu): accepts a React.ReactNode which will be used as the mobile button. Wrapper: accepts a React.ReactNode which will be used as the wrapper.
+     */
+    components?: {
+        Wrapper?: ComponentType<WrapperProps>;
+        MobileButton?: ComponentType<MobileButtonProps>;
+    };
+    /**
+     * Specify the max-width on mobile devices (same as \`Wrapper\` component)
+     */
+    mobilePageWidth?: ScreenSize;
+    /**
+     * A line will be placed above the navigation
+     */
+    line?: boolean;
+    /**
+     * Show a logo ribbon on the left side of the logo
+     */
+    logoRibbon?: "default" | "offShelf" | null;
+    /**
+     * Additional className for the `Wrapper`
+     */
+    wrapperClassName?: string;
+    /**
+     * The CSS class name to be placed on the wrapping element.
+     */
+    className?: string;
+    /**
+     * Defines an `id` for the component.
+     */
+    id?: string;
+}
+declare const MainNavigation: {
+    ({ children, components: componentsOverride, className, id, logo, line, logoRibbon, mobilePageWidth, pageWidth, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MainNavigation;

package/dist/components/MainNavigation/MainNavigationContext.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface MainNavigationContextType {
+    /**
+     * Callback when the user clicks on a sub menu item
+     */
+    onChangeSub: (action: string, i?: string, e?: any) => void;
+    /**
+     * The active menu item
+     */
+    activeMenuItem?: string | null;
+    /**
+     * Whether the mobile menu is open
+     */
+    openMobileMenu: boolean;
+    /**
+     * Toggle the mobile menu
+     */
+    toggleMenu: () => void;
+    /**
+     * Set the mobile menu to open or closed
+     */
+    setOpenMobileMenu: (open: boolean) => void;
+}
+declare const MainNavigationContext: React.Context<MainNavigationContextType>;
+export default MainNavigationContext;

package/dist/components/MainNavigation/MainNavigationRtl-story.legacy.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/MainNavigation/MobileButton.d.ts

@@ -0,0 +1,17 @@
+import { default as React, PropsWithChildren } from 'react';
+export type MobileButtonProps = PropsWithChildren<{
+    /**
+     * Status of the mobile menu
+     */
+    openMobileMenu?: boolean;
+    /**
+     * Prefix for the component CSS class
+     */
+    prefix?: string;
+    /**
+     * Toggle the Menu
+     */
+    toggleMenu?: () => void;
+}>;
+declare const MobileButton: React.FC<MobileButtonProps>;
+export default MobileButton;

package/dist/components/MainNavigation/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MainNavigation } from './MainNavigation';
+export { default as MainNavigationContext } from './MainNavigationContext';
+export { default as useMainNavigation } from './useMainNavigation';

package/dist/components/MainNavigation/useMainNavigation.d.ts

@@ -0,0 +1,7 @@
+import { MainNavigationContextType } from './MainNavigationContext';
+/** The useMainNavigation() is a hook to access the current state of the MainNavigation and manipulate it. */
+declare function useMainNavigation(): MainNavigationContextType;
+declare namespace useMainNavigation {
+    var displayName: string;
+}
+export default useMainNavigation;