@coreui/react 4.9.0-beta.0 → 4.9.0-beta.2

package/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-beta.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-beta.2.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/dropdown/CDropdown.d.ts

@@ -46,8 +46,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
      * Sets a specified  direction and location of the dropdown menu.
      */
     direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart';
+    /**
+     * Offset of the dropdown menu relative to its target.
+     */
+    offset?: [number, number];
     /**
      * Callback fired when the component requests to be hidden.
+     *
+     * @since 4.9.0-beta.2
      */
     onHide?: () => void;
     /**
@@ -80,7 +86,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
     visible?: boolean;
 }
 interface ContextProps extends CDropdownProps {
-    dropdownToggleRef: RefObject<any> | undefined;
+    dropdownToggleRef: RefObject<any | undefined>;
+    dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>;
     setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
     portal: boolean;
 }

package/dist/components/dropdown/CDropdownMenu.d.ts

@@ -1,6 +1,5 @@
-import { ElementType, FC, HTMLAttributes } from 'react';
-import { PopperChildrenProps } from 'react-popper';
-export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement>, Omit<PopperChildrenProps, 'arrowProps' | 'forceUpdate' | 'hasPopperEscaped' | 'isReferenceHidden' | 'placement' | 'ref' | 'style' | 'update'> {
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
     /**
      * A string of all className you want applied to the base component.
      */
@@ -10,4 +9,4 @@ export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTML
      */
     component?: string | ElementType;
 }
-export declare const CDropdownMenu: FC<CDropdownMenuProps>;
+export declare const CDropdownMenu: React.ForwardRefExoticComponent<CDropdownMenuProps & React.RefAttributes<HTMLDivElement | HTMLUListElement>>;

package/dist/components/dropdown copy/CDropdown.d.ts

@@ -0,0 +1,89 @@
+import React, { ElementType, HTMLAttributes, RefObject } from 'react';
+import type { Placements } from '../../types';
+export type Directions = 'start' | 'end';
+export type Breakpoints = {
+    xs: Directions;
+} | {
+    sm: Directions;
+} | {
+    md: Directions;
+} | {
+    lg: Directions;
+} | {
+    xl: Directions;
+} | {
+    xxl: Directions;
+};
+export type Alignments = Directions | Breakpoints;
+export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
+    /**
+     * Set aligment of dropdown menu.
+     *
+     * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
+     */
+    alignment?: Alignments;
+    /**
+     * Configure the auto close behavior of the dropdown:
+     * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+     * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+     * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+     * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+     */
+    autoClose?: 'inside' | 'outside' | boolean;
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ElementType;
+    /**
+     * Sets a darker color scheme to match a dark navbar.
+     */
+    dark?: boolean;
+    /**
+     * Sets a specified  direction and location of the dropdown menu.
+     */
+    direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart';
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    onHide?: () => void;
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    onShow?: () => void;
+    /**
+     * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+     *
+     * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+     */
+    placement?: Placements;
+    /**
+     * If you want to disable dynamic positioning set this property to `true`.
+     */
+    popper?: boolean;
+    /**
+     * Generates dropdown menu using createPortal.
+     *
+     * @since 4.8.0
+     */
+    portal?: boolean;
+    /**
+     * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
+     */
+    variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item';
+    /**
+     * Toggle the visibility of dropdown menu component.
+     */
+    visible?: boolean;
+}
+interface ContextProps extends CDropdownProps {
+    dropdownToggleRef: RefObject<any> | undefined;
+    setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    portal: boolean;
+}
+export declare const CDropdownContext: React.Context<ContextProps>;
+export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
+export {};

package/dist/components/dropdown copy/CDropdownDivider.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface CDropdownDividerProps extends HTMLAttributes<HTMLHRElement> {
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+}
+export declare const CDropdownDivider: React.ForwardRefExoticComponent<CDropdownDividerProps & React.RefAttributes<HTMLHRElement>>;

package/dist/components/dropdown copy/CDropdownHeader.d.ts

@@ -0,0 +1,12 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CDropdownHeaderProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ElementType;
+}
+export declare const CDropdownHeader: React.ForwardRefExoticComponent<CDropdownHeaderProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/dropdown copy/CDropdownItem.d.ts

@@ -0,0 +1,13 @@
+import React, { ElementType } from 'react';
+import { CLinkProps } from '../link/CLink';
+export interface CDropdownItemProps extends CLinkProps {
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ElementType;
+}
+export declare const CDropdownItem: React.ForwardRefExoticComponent<CDropdownItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/dropdown copy/CDropdownItemPlain.d.ts

@@ -0,0 +1,12 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ElementType;
+}
+export declare const CDropdownItemPlain: React.ForwardRefExoticComponent<CDropdownItemPlainProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/dropdown copy/CDropdownMenu.d.ts

@@ -0,0 +1,13 @@
+import { ElementType, FC, HTMLAttributes } from 'react';
+import { PopperChildrenProps } from 'react-popper';
+export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement>, Omit<PopperChildrenProps, 'arrowProps' | 'forceUpdate' | 'hasPopperEscaped' | 'isReferenceHidden' | 'placement' | 'ref' | 'style' | 'update'> {
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ElementType;
+}
+export declare const CDropdownMenu: FC<CDropdownMenuProps>;

package/dist/components/dropdown copy/CDropdownToggle.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { CButtonProps } from '../button/CButton';
+import type { Triggers } from '../../types';
+export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
+    /**
+     * Enables pseudo element caret on toggler.
+     */
+    caret?: boolean;
+    /**
+     * Create a custom toggler which accepts any content.
+     */
+    custom?: boolean;
+    /**
+     * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
+     */
+    split?: boolean;
+    /**
+     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+     *
+     * @type 'hover' | 'focus' | 'click'
+     */
+    trigger?: Triggers | Triggers[];
+}
+export declare const CDropdownToggle: FC<CDropdownToggleProps>;

package/dist/components/dropdown copy/index.d.ts

@@ -0,0 +1,8 @@
+import { CDropdown } from './CDropdown';
+import { CDropdownDivider } from './CDropdownDivider';
+import { CDropdownHeader } from './CDropdownHeader';
+import { CDropdownItem } from './CDropdownItem';
+import { CDropdownItemPlain } from './CDropdownItemPlain';
+import { CDropdownMenu } from './CDropdownMenu';
+import { CDropdownToggle } from './CDropdownToggle';
+export { CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, };

package/dist/components/popover/CPopover.d.ts

@@ -1,6 +1,12 @@
 import { FC, HTMLAttributes, ReactNode } from 'react';
-import type { Triggers } from '../../types';
+import type { Placements, Triggers } from '../../types';
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
+    /**
+     * Apply a CSS fade transition to the popover.
+     *
+     * @since 4.9.0-beta.2
+     */
+    animation?: boolean;
     /**
      * A string of all className you want applied to the component.
      */
@@ -13,6 +19,21 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
      * Offset of the popover relative to its target.
      */
     offset?: [number, number];
+    /**
+     * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+     *
+     * @since 4.9.0-beta.2
+     */
+    delay?: number | {
+        show: number;
+        hide: number;
+    };
+    /**
+     * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+     *
+     * @since 4.9.0-beta.2
+     */
+    fallbackPlacements?: Placements | Placements[];
     /**
      * Callback fired when the component requests to be hidden.
      */

package/dist/components/progress/CProgress.d.ts

@@ -9,6 +9,12 @@ export interface CProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'co
      * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
      */
     height?: number;
+    /**
+     * A string of all className you want applied to the <CProgressBar/> component.
+     *
+     * @since 4.9.0
+     */
+    progressBarClassName?: string;
     /**
      * Makes progress bar thinner.
      */

package/dist/components/progress/CProgressStacked.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+}
+export interface CProgressStackedContextProps {
+    stacked?: boolean;
+}
+export declare const CProgressStackedContext: React.Context<CProgressStackedContextProps>;
+export declare const CProgressStacked: React.ForwardRefExoticComponent<CProgressStackedProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,4 @@
 import { CProgress } from './CProgress';
 import { CProgressBar } from './CProgressBar';
-export { CProgress, CProgressBar };
+import { CProgressStacked } from './CProgressStacked';
+export { CProgress, CProgressBar, CProgressStacked };

package/dist/components/tooltip/CTooltip.d.ts

@@ -1,6 +1,12 @@
 import { FC, HTMLAttributes, ReactNode } from 'react';
-import type { Triggers } from '../../types';
+import type { Placements, Triggers } from '../../types';
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    /**
+     * Apply a CSS fade transition to the tooltip.
+     *
+     * @since 4.9.0-beta.2
+     */
+    animation?: boolean;
     /**
      * A string of all className you want applied to the component.
      */
@@ -9,6 +15,21 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
      * Content node for your component.
      */
     content: ReactNode | string;
+    /**
+     * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+     *
+     * @since 4.9.0-beta.2
+     */
+    delay?: number | {
+        show: number;
+        hide: number;
+    };
+    /**
+     * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+     *
+     * @since 4.9.0-beta.2
+     */
+    fallbackPlacements?: Placements | Placements[];
     /**
      * Offset of the tooltip relative to its target.
      */

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
 import { useColorModes } from './useColorModes';
 import { useForkedRef } from './useForkedRef';
-export { useColorModes, useForkedRef };
+import { usePopper } from './usePopper';
+export { useColorModes, useForkedRef, usePopper };

package/dist/hooks/useColorModes.d.ts

@@ -1,6 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
 interface UseColorModesOutput {
-    getColorMode: () => string;
-    setColorMode: (mode: string) => void;
+    colorMode: string | undefined;
+    isColorModeSet: () => boolean;
+    setColorMode: Dispatch<SetStateAction<string>>;
 }
 export declare const useColorModes: (localStorageItemName?: string) => UseColorModesOutput;
 export {};

package/dist/hooks/usePopper.d.ts

@@ -0,0 +1,8 @@
+import type { Instance, Options } from '@popperjs/core';
+interface UsePopperOutput {
+    popper: Instance | undefined;
+    initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => void;
+    destroyPopper: () => void;
+}
+export declare const usePopper: () => UsePopperOutput;
+export {};