@hitachivantara/uikit-react-core 5.0.0-next.12 → 5.0.0-next.14

package/dist/types/index.d.ts

@@ -11,16 +11,18 @@ import { CellProps } from 'react-table';
 import { ChangeEvent } from 'react';
 import { CheckboxProps } from '@mui/material';
 import { ChipProps } from '@mui/material/Chip';
+import { Column } from 'react-table';
 import { ColumnInstance } from 'react-table';
 import { ColumnInterface } from 'react-table';
 import { ContainerProps } from '@mui/material/Container';
-import type { Context } from 'react';
 import { CSSProperties } from 'react';
 import { DialogActionsProps } from '@mui/material/DialogActions';
 import { DialogContentProps } from '@mui/material/DialogContent';
 import { DialogProps } from '@mui/material/Dialog';
 import { DialogTitleProps } from '@mui/material/DialogTitle';
 import { DividerProps } from '@mui/material/Divider';
+import { ds3 } from '@hitachivantara/uikit-styles';
+import { ds5 } from '@hitachivantara/uikit-styles';
 import type { ElementType } from 'react';
 import { FooterPropGetter } from 'react-table';
 import type { ForwardRefExoticComponent } from 'react';
@@ -40,9 +42,9 @@ import { HvBreakpoints as HvBreakpoints_2 } from 'types/tokens';
 import { HvButtonProps as HvButtonProps_2 } from 'components';
 import { HvButtonVariant as HvButtonVariant_2 } from 'components';
 import { HvCategoricalColorKeys as HvCategoricalColorKeys_2 } from 'types/tokens';
-import { HvCustomizedTheme as HvCustomizedTheme_2 } from 'types/theme';
 import { HvDropdownProps as HvDropdownProps_2 } from 'components';
-import { HvExtraProps as HvExtraProps_2 } from 'types';
+import type { HvExtraDeepProps } from '@hitachivantara/uikit-react-shared';
+import type { HvExtraProps } from '@hitachivantara/uikit-react-shared';
 import { HvFormStatus as HvFormStatus_2 } from 'components';
 import { HvHeaderNavigationItemProp as HvHeaderNavigationItemProp_2 } from 'components';
 import { HvInputLabels as HvInputLabels_2 } from 'types/forms';
@@ -50,14 +52,18 @@ import { HvInputProps as HvInputProps_2 } from 'components';
 import { HvLabelProps as HvLabelProps_2 } from 'components';
 import { HvListValue as HvListValue_2 } from 'components';
 import { HvParsedThemeStyles } from '@hitachivantara/uikit-styles';
+import { HvRowInstance as HvRowInstance_2 } from 'components';
 import { HvSemanticColorKeys as HvSemanticColorKeys_2 } from 'types/tokens';
+import { HvTableColumnConfig as HvTableColumnConfig_2 } from 'components';
 import { HvTableInstance as HvTableInstance_2 } from 'components/Table/hooks/useTable';
 import { PluginHook as HvTablePluginHook } from 'react-table';
 import { HvTagProps as HvTagProps_2 } from 'components';
+import type { HvTheme } from '@hitachivantara/uikit-react-shared';
 import { HvThemeBreakpoint } from '@hitachivantara/uikit-styles';
 import { HvThemeColorMode } from '@hitachivantara/uikit-styles';
 import { HvThemeColorModeStructure } from '@hitachivantara/uikit-styles';
-import { HvThemeCustomizationProps as HvThemeCustomizationProps_2 } from 'types/theme';
+import { HvThemeContext } from '@hitachivantara/uikit-react-shared';
+import type { HvThemeContextValue } from '@hitachivantara/uikit-react-shared';
 import { HvThemeStructure } from '@hitachivantara/uikit-styles';
 import { HvTooltipProps as HvTooltipProps_2 } from 'components';
 import { HvTypographyVariants as HvTypographyVariants_2 } from 'components';
@@ -67,7 +73,6 @@ import { ImgHTMLAttributes } from 'react';
 import { InputBaseComponentProps } from '@mui/material';
 import { InputProps } from '@mui/material';
 import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
-import { makeTheme } from '@hitachivantara/uikit-styles';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { PopperProps } from '@mui/material';
@@ -208,6 +213,8 @@ export declare const bulkActionsClasses: HvBulkActionsClasses;
 
 export declare const buttonClasses: HvButtonClasses;
 
+export declare const calendarClasses: HvCalendarClasses;
+
 export declare const cardClasses: HvCardClasses;
 
 export declare const cardContentClasses: HvCardContentClasses;
@@ -239,9 +246,20 @@ export declare const containerClasses: HvContainerClasses;
 
 export declare const controlsClasses: HvControlsClasses;
 
+/**
+ * Creates a customized theme based on the base theme and customizations given.
+ * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.
+ */
+export declare const createTheme: (theme: HvCreateThemeProps) => HvTheme | HvThemeStructure;
+
+export declare type DateRangeProp = {
+    startDate: Date;
+    endDate?: Date;
+};
+
 export declare const decreaseSize: (size: string) => "XS" | "S" | "M" | "L";
 
-export declare type DeepPartial<T> = Partial<{
+declare type DeepPartial<T> = Partial<{
     [P in keyof T]: DeepPartial<T[P]>;
 }>;
 
@@ -285,6 +303,10 @@ export declare const dropdownClasses: HvDropdownClasses;
 
 export declare const dropDownMenuClasses: HvDropDownMenuClasses;
 
+export { ds3 }
+
+export { ds5 }
+
 export declare const emptyStateClasses: HvEmptyStateClasses;
 
 declare type Event_2 = MouseEvent | KeyboardEvent | TouchEvent;
@@ -1485,12 +1507,90 @@ export declare interface HvButtonProps extends React_2.ButtonHTMLAttributes<HTML
     classes?: HvButtonClasses;
 }
 
-export declare type HvButtonRadius = "xs" | "sm" | "md" | "lg" | "xl" | "none" | "base";
+export declare type HvButtonRadius = "none" | "base" | "round" | "circle" | "full";
 
 export declare type HvButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 
 export declare type HvButtonVariant = "primary" | "primarySubtle" | "primaryGhost" | "secondarySubtle" | "secondaryGhost" | "semantic" | "secondary" | "ghost";
 
+export declare const HvCalendar: ({ classes, id, locale, value, visibleMonth, visibleYear, rightVisibleMonth, rightVisibleYear, minimumDate, maximumDate, startAdornment, onChange, onInputChange, onVisibleDateChange, ...others }: HvCalendarProps) => JSX_2.Element;
+
+export declare type HvCalendarClasses = {
+    root?: string;
+    rangeCalendarContainer?: string;
+    singleCalendar?: string;
+    focusSelection?: string;
+    calendarMonthlyCell?: string;
+    calendarMonthlyCellSelected?: string;
+};
+
+export declare type HvCalendarProps = {
+    /**
+     * Styles applied from the theme.
+     */
+    classes?: HvCalendarClasses;
+    /**
+     * Identifier.
+     */
+    id?: string;
+    /**
+     * The calendar locale. If undefined, it defaults to en-US
+     *
+     */
+    locale?: string;
+    /**
+     * Date that the calendar would show.
+     * if using the object format the calendar enter in range mode showing two calendars
+     */
+    value?: DateRangeProp | Date;
+    /**
+     * Controls the visible month of the Calendar
+     */
+    visibleMonth?: number;
+    /**
+     * Controls the visible year of the Calendar
+     */
+    visibleYear?: number;
+    /**
+     * Controls the visible month of the Calendar on the right side of the datepicker
+     */
+    rightVisibleMonth?: number;
+    /**
+     * Controls the visible year of the Calendar on the right side of the datepicker
+     */
+    rightVisibleYear?: number;
+    /**
+     * Callback function to be triggered when the selected date has changed.
+     */
+    onChange?: (event: React_2.ChangeEvent<HTMLTextAreaElement | HTMLInputElement> | undefined, value: Date | DateRangeProp) => void;
+    /**
+     * Callback function to be triggered when the selected date input has changed.
+     */
+    onInputChange?: (event: React_2.ChangeEvent<HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement> | undefined, value: Date | DateRangeProp, position: "left" | "right") => void;
+    /**
+     * Callback function to be triggered when the user clicks on the month or year selector.
+     * it receives the action that was pressed:
+     * previous_month, next_month, previous_year, next_year,month
+     */
+    onVisibleDateChange?: (event: React_2.ChangeEvent<HTMLTextAreaElement | HTMLInputElement> | undefined, action: VisibilitySelectorActions, value?: Date | DateRangeProp | number, position?: "left" | "right") => void;
+    /**
+     * The maximum selectable date after this all values are disabled.
+     */
+    maximumDate?: Date;
+    /**
+     * The minimum selectable date before this all values are disabled.
+     */
+    minimumDate?: Date;
+    /**
+     * An element placed before the Calendar
+     */
+    startAdornment?: React_2.ReactNode;
+    /**
+     * Indicates if header should display the day of week.
+     */
+    showDayOfWeek?: boolean;
+};
+
 /**
  * A card is a container for a few short and related pieces of content.
  * It roughly resembles a playing card in size and shape and is intended as a
@@ -1796,6 +1896,8 @@ export declare type HvCheckBoxProps = Omit<HvBaseCheckBoxProps, "classes"> & {
     classes?: HvCheckBoxClasses;
 };
 
+export declare type HvColumn<D extends object = Record<string, unknown>> = Column<D>;
+
 declare type HvColumnGroup<D extends object = Record<string, unknown>> = HvTableColumnOptions<D> & HvColumnGroupInterface<D> & ({
     Header: string;
 } | ({
@@ -1924,17 +2026,32 @@ export declare type HvControlsViewConfiguration = {
     icon?: React.ReactNode;
 } & HvExtraProps;
 
-export declare type HvCustomizedTheme = HvExtraDeepProps<Omit<HvThemeStructure, "colors">> & {
-    colors: {
-        modes: {
-            [key: string]: HvThemeColorModeStructure & {
-                [key: string]: string;
-            };
-        };
-    };
-};
+/**
+ * Create theme props
+ */
+export declare type HvCreateThemeProps = {
+    /**
+     * The name used for the theme.
+     *
+     * This is a required property to create a theme.
+     */
+    name: string;
+    /**
+     * The theme to be used as base.
+     *
+     * `"ds5"` will be used as default if no value is provided.
+     */
+    base?: HvBaseTheme;
+    /**
+     * If `true` the default color modes (dawn and wicked) of the base theme will be inherited while creating the theme.
+     * If `false`, the new theme doesn't inherit the default color modes.
+     *
+     * By default the color modes are inherited.
+     */
+    inheritColorModes?: boolean;
+} & HvThemeCustomizationProps;
 
-export declare function hvDateColumn(col: any, dateFormat: any): any;
+export declare function hvDateColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>>(col: C, dateFormat?: string): HvTableColumnConfig_2<D>;
 
 export declare const HvDateColumnCell: ({ date, dateFormat, }: HvDateColumnCellProp) => JSX.Element | null;
 
@@ -2093,7 +2210,7 @@ export declare type HvDropdownClasses = {
     rootList?: string;
 };
 
-export declare function hvDropdownColumn(col: any, id: any, placeholder: any, disabledPlaceholder: any, onChange: any): any;
+export declare function hvDropdownColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>>(col: C, id: string, placeholder: string, disabledPlaceholder: string, onChange?: (identifier: string, value: HvListValue_2) => void): HvTableColumnConfig_2<D>;
 
 export declare const HvDropdownColumnCell: ({ values, disabled, onChange, placeholder, dropdownProps, }: HvDropdownColumnCellProp) => JSX.Element | null;
 
@@ -2209,9 +2326,7 @@ declare type HvDropdownListProps = {
 };
 
 export declare const HvDropDownMenu: {
-    ({ id, ...others }: {
-        id?: string | undefined;
-    } & HvExtraProps): JSX_2.Element;
+    ({ id, ...others }: WithIdProps): JSX_2.Element;
     Naked: any;
 };
 
@@ -2523,19 +2638,15 @@ export declare type HvEmptyStateProps = HvBaseProps<HTMLDivElement, {
     classes?: HvEmptyStateClasses;
 };
 
-export declare function hvExpandColumn(col: any, expandRowButtonAriaLabel: any, collapseRowButtonAriaLabel: any, getCanRowExpand: any): any;
+export declare function hvExpandColumn<D extends Record<string, unknown>>(col: HvTableColumnConfig_2<D>, expandRowButtonAriaLabel: string, collapseRowButtonAriaLabel: string, getCanRowExpand?: (row: HvRowInstance_2<D>) => boolean): HvTableColumnConfig_2<D>;
 
 export declare type HvExtraDeepPartialProps<T> = Partial<{
     [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;
 }> & HvExtraProps;
 
-export declare type HvExtraDeepProps<T> = {
-    [P in keyof T]: T[P] & HvExtraProps;
-} & HvExtraProps;
+export { HvExtraDeepProps }
 
-export declare type HvExtraProps = {
-    [key: string]: any;
-};
+export { HvExtraProps }
 
 export declare const HvFile: ({ id, classes, data, onFileRemoved, removeFileButtonLabel, }: HvFileProps) => JSX_2.Element;
 
@@ -2801,14 +2912,17 @@ export declare const HvFormElementContextProvider: React_2.Provider<{
 
 export declare const HvFormElementDescriptorsContext: React_2.Context<{
     input?: any;
+    label?: any;
 }>;
 
 export declare const HvFormElementDescriptorsContextConsumer: React_2.Consumer<{
     input?: any;
+    label?: any;
 }>;
 
 export declare const HvFormElementDescriptorsContextProvider: React_2.Provider<{
     input?: any;
+    label?: any;
 }>;
 
 export declare type HvFormElementProps = HvBaseProps & {
@@ -2966,7 +3080,7 @@ export declare type HvGridClasses = {
 
 export declare type HvGridDirection = "row" | "row-reverse" | "column" | "column-reverse";
 
-export declare type HvGridProps = GridProps & HvBaseProps & {
+export declare type HvGridProps = Omit<GridProps, "classes"> & HvBaseProps & {
     /**
      * If `true`, the component will have the flex *container* behavior.
      * You should be wrapping *items* with a *container*.
@@ -3720,7 +3834,7 @@ export declare type HvMultiButtonProps = HvBaseProps & {
 
 export declare const hvNodeFallback: (value: any) => any;
 
-export declare function hvNumberColumn(col: any): any;
+export declare function hvNumberColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>>(col: C): HvTableColumnConfig_2<D>;
 
 export declare const hvNumberFallback: (value: any) => number | "—";
 
@@ -3935,7 +4049,7 @@ export declare type HvProgressBarProps = HvBaseProps & {
 
 export declare type HvProgressBarStatus = "inProgress" | "completed" | "error";
 
-export declare function hvProgressColumn(col: any, getPartial: any, getTotal: any, color: any): any;
+export declare function hvProgressColumn<D extends Record<string, number>, C extends HvTableColumnConfig_2<D>>(col: C, getPartial?: (row: HvRowInstance_2<D>) => number, getTotal?: (row: HvRowInstance_2<D>) => number, color?: "primary" | "secondary"): HvTableColumnConfig_2<D>;
 
 export declare const HvProgressColumnCell: ({ partial, total, color, }: HvProgressColumnCellProp) => JSX.Element | null;
 
@@ -3949,28 +4063,9 @@ declare interface HvProgressColumnCellProp {
 }
 
 /**
- * This component makes cross-component theme properties available down the React tree thanks to React context.
- *
- * The `HvProvider` should preferably be used at **the root of your component tree** and
- * be unique in the App in most cases.
- *
- * ```jsx
- * <HvProvider>
- *   <MyApp />
- * <HvProvider/>
- * ```
- *
- * If several `HvProvider`'s are used in parallel, you'll need to create different root elements and
- * set the `rootElementId` property for each one of the providers. Otherwise, the styling will not work properly.
- *
- * **UI Kit components will not work at all if the `HvProvider` is not configured correctly**,
- * as they will not be able to access the properties of the active theme.
- *
+ * Enables theming capabilities and makes cross-component theme properties available down the tree.
  */
-export declare const HvProvider: {
-    ({ children, rootElementId, enableCssBaseline, theme, }: HvProviderProps): JSX_2.Element;
-    displayName: string;
-};
+export declare const HvProvider: ({ children, rootElementId, enableCssBaseline, themes, theme, colorMode, }: HvProviderProps) => JSX_2.Element;
 
 export declare type HvProviderProps = {
     /**
@@ -3984,14 +4079,30 @@ export declare type HvProviderProps = {
     enableCssBaseline?: boolean;
     /**
      * Id of your root element. The theme's attributes and CSS variables will be set in this element.
+     *
      * If no value is provided, the document's body will be used.
      */
     rootElementId?: string;
     /**
-     * The UI Kit theme object used to set the theme and inject the customizations needed to meet specific design needs.
-     * If no value is provided, the default theme and mode will be `"ds5"` and `"dawn"`, respectively.
+     * List of themes to be used by UI Kit.
+     * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.
+     *
+     * If no value is provided, the `ds5` theme will be used.
+     */
+    themes?: (HvTheme | HvThemeStructure)[];
+    /**
+     * The active theme. It must be one of the themes passed to `themes`.
+     *
+     * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.
      */
-    theme?: HvTheme;
+    theme?: string;
+    /**
+     * The active color mode. It must be one of the color modes of the active theme.
+     *
+     * If no value is provided, the first color mode defined in the active theme is used.
+     * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.
+     */
+    colorMode?: string;
 };
 
 /**
@@ -4569,7 +4680,7 @@ export declare type HvSwitchClasses = {
     invalidSwitch?: string;
 };
 
-export declare function hvSwitchColumn(col: any, switchLabel: any, falseLabel: any, trueLabel: any, switchProps: any): any;
+export declare function hvSwitchColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>>(col: C, switchLabel: string, falseLabel?: string, trueLabel?: string, switchProps?: HvBaseSwitchProps_2): HvTableColumnConfig_2<D>;
 
 export declare const HvSwitchColumnCell: ({ checked, value, switchLabel, falseLabel, trueLabel, switchProps, }: HvSwitchColumnCellProp) => JSX.Element | null;
 
@@ -5364,7 +5475,7 @@ export declare type HvTagClasses = {
     disabledDeleteIcon?: string;
 };
 
-export declare function hvTagColumn(col: any, valueDataKey: any, colorDataKey: any, textColorDataKey: any, fromRowData: boolean | undefined, tagProps: any): any;
+export declare function hvTagColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>>(col: C, valueDataKey: keyof D, colorDataKey: keyof D, textColorDataKey: keyof D, fromRowData?: boolean, tagProps?: HvTagProps_2): HvTableColumnConfig_2<D>;
 
 export declare type HvTagProps = Omit<ChipProps, "color" | "classes"> & HvBaseProps<HTMLDivElement, {
     children: any;
@@ -5642,54 +5753,19 @@ export declare type HvTextAreaProps = Omit<HvBaseInputProps, "onChange" | "onBlu
     classes?: HvTextAreaClasses;
 };
 
-export declare function hvTextColumn(col: any): any;
+export declare function hvTextColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>>(col: C): HvTableColumnConfig_2<D>;
 
-/**
- * Theme structure is be used on the `HvProvider` to set the theme and inject the customizations needed to meet the specific design needs.
- */
-export declare type HvTheme = {
-    /**
-     * The theme to be used as base for the customization.
-     *
-     * `"ds5"` will be used as default if no value is provided.
-     */
-    baseTheme?: HvBaseTheme;
-    /**
-     * The name used for the theme.
-     *
-     * By providing a name, a new theme is created based on the base theme and the customizations provided.
-     * If no name is provided, the base theme is customized.
-     */
-    name?: string;
-    /**
-     * The color mode to initialize the UI Kit. It can be an existing one or a custom one.
-     *
-     * `"dawn"` will be used as default if no value is provided.
-     */
-    baseColorMode?: HvThemeColorMode | string;
-    /**
-     *
-     */
-    inheritColorModes?: boolean;
-} & HvThemeCustomizationProps;
+export { HvTheme }
 
 export { HvThemeBreakpoint }
 
 export { HvThemeColorMode }
 
-export declare const HvThemeContext: Context<HvThemeContextValue>;
+export { HvThemeContext }
 
-declare interface HvThemeContextValue {
-    themes: (HvBaseTheme | string)[];
-    activeTheme?: HvCustomizedTheme;
-    colorModes: (HvThemeColorMode | string)[];
-    selectedTheme: HvBaseTheme | string;
-    selectedMode: HvThemeColorMode | string;
-    changeTheme: (theme?: HvBaseTheme | string, mode?: HvThemeColorMode | string) => void;
-    rootId?: string;
-}
+export { HvThemeContextValue }
 
-export declare type HvThemeCustomizationProps = HvExtraDeepPartialProps<Omit<HvThemeStructure, "colors">> & {
+export declare type HvThemeCustomizationProps = HvExtraDeepPartialProps<Omit<HvThemeStructure, "colors" | "name">> & {
     colors?: {
         modes?: {
             [key: string]: Partial<HvThemeColorModeStructure> & {
@@ -5711,11 +5787,9 @@ export declare const HvThemeProvider: ({ children, themes: themesList, theme, co
 
 declare interface HvThemeProviderProps {
     children: React.ReactNode;
-    themes: {
-        [themeName: string]: HvCustomizedTheme;
-    };
-    theme: HvBaseTheme | string;
-    colorMode: HvThemeColorMode | string;
+    themes: (HvTheme | HvThemeStructure)[];
+    theme: string;
+    colorMode: string;
     rootElementId?: string;
 }
 
@@ -6136,8 +6210,6 @@ export declare const loadingClasses: HvLoadingClasses;
 
 export declare const loginClasses: HvLoginClasses;
 
-export { makeTheme }
-
 declare type MenuItemProps = HvBaseProps<HTMLDivElement, {
     onClick: any;
 }> & {
@@ -6168,15 +6240,6 @@ export declare const paginationClasses: HvPaginationClasses;
 
 export declare const panelClasses: HvPanelClasses;
 
-/**
- * Creates a list of customized themes based on the base theme and customizations given.
- *
- * If a newThemeName is given, a new theme is created based on the base theme and customizations.
- */
-export declare const parseThemes: (baseTheme: HvBaseTheme, newThemeName?: string, inheritColorModes?: boolean, customizations?: HvThemeCustomizationProps_2) => {
-    [themeName: string]: HvCustomizedTheme_2;
-};
-
 export declare const pathElementClasses: HvPathElementClasses;
 
 declare type PolymorphicComponent<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
@@ -6191,6 +6254,13 @@ export declare function prepareRow(row: any, { instance }: {
     instance: any;
 }): void;
 
+/**
+ * Process the themes provided to the HvProvider:
+ *  - Cleans themes with the same name
+ *  - Returns the default if the list is empty (ds5)
+ */
+export declare const processThemes: (themesList?: (HvTheme | HvThemeStructure)[]) => (HvTheme | HvThemeStructure)[];
+
 export declare const progressBarClasses: HvProgressBarClasses;
 
 declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
@@ -6274,6 +6344,8 @@ export declare type UseBulkActionsProps = (<D extends object = Record<string, un
 
 export declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event_2) => void) => void;
 
+export declare function useComputation(valueFn: any, valueFallback?: any): any[];
+
 export declare const useControlled: (controlledProp: any, initialState: any) => any[];
 
 export declare type UseFiltersProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
@@ -6567,21 +6639,27 @@ export declare type UseTableStylesProps = (<D extends object = Record<string, un
     pluginName: string;
 };
 
+export declare const useTheme: () => HvThemeContextValue;
+
 export declare const useUniqueId: (id: any, idPrefix: any) => any;
 
 export declare const useWidth: () => string;
 
 declare type ValueOf<T> = T[keyof T];
 
+export declare type VisibilitySelectorActions = "previous_month" | "next_month" | "previous_year" | "next_year" | "month" | "month_year";
+
 export declare const warningTextClasses: HvWarningTextClasses;
 
 export declare const withId: (Component: any) => {
-    ({ id, ...others }: {
-        id?: string | undefined;
-    } & HvExtraProps_2): JSX_2.Element;
+    ({ id, ...others }: WithIdProps): JSX_2.Element;
     Naked: any;
 };
 
+declare interface WithIdProps extends HvExtraProps {
+    id?: string;
+}
+
 export declare const withTooltip: (Component: any, label: string | undefined, placement: any, hideTooltip: any, tooltipProps: any, tooltipContainerProps: any) => (props: any) => JSX_2.Element;
 
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.0.0-next.12",
+  "version": "5.0.0-next.14",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit core React components for the Next Design System.",
@@ -31,8 +31,9 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-icons": "5.0.0-next.12",
-    "@hitachivantara/uikit-styles": "5.0.0-next.12",
+    "@hitachivantara/uikit-react-icons": "*",
+    "@hitachivantara/uikit-react-shared": "*",
+    "@hitachivantara/uikit-styles": "*",
     "@popperjs/core": "^2.11.6",
     "attr-accept": "^2.2.2",
     "clsx": "^1.2.1",
@@ -53,12 +54,12 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "7e631429f565bb8c2225ee55cf16da946958d11a",
+  "gitHead": "b87bc2a871ee56a90916247b2c6559195c6b0779",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {
-      "require": "dist/cjs/index.cjs",
-      "import": "dist/esm/index.js"
+      "require": "./dist/cjs/index.cjs",
+      "import": "./dist/esm/index.js"
     }
   },
   "types": "dist/types/index.d.ts",

package/dist/cjs/emotion/cache.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"cache.cjs","sources":["../../../src/emotion/cache.tsx"],"sourcesContent":["import createCache from \"@emotion/cache\";\nimport createEmotion from \"@emotion/css/create-instance\";\n\n/**\n * Moves UI Kit styles to the top of the <head> so they're loaded first.\n * This enables users to override the UI Kit styles if necessary.\n */\n\nconst key: string = \"hv-uikit\";\n\nexport const emotionCache = createCache({\n  key: `${key}-style`,\n  prepend: true,\n});\n\nexport const {\n  flush,\n  hydrate,\n  cx,\n  merge,\n  getRegisteredStyles,\n  injectGlobal,\n  keyframes,\n  css,\n  sheet,\n  cache,\n} = createEmotion({\n  key: `${key}-css`,\n  prepend: true,\n});\n"],"names":["key","emotionCache","createCache","prepend","flush","hydrate","cx","merge","getRegisteredStyles","injectGlobal","keyframes","css","sheet","cache","createEmotion"],"mappings":";;;;;;;AAQA,MAAMA,MAAc;AAEb,MAAMC,eAAeC,qBAAAA,QAAY;AAAA,EACtCF,KAAM,GAAEA;AAAAA,EACRG,SAAS;AACX,CAAC;AAEY,MAAA;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF,IAAIC,+BAAc;AAAA,EAChBd,KAAM,GAAEA;AAAAA,EACRG,SAAS;AACX,CAAC;;;;;;;;;;;;"}

package/dist/esm/emotion/cache.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cache.js","sources":["../../../src/emotion/cache.tsx"],"sourcesContent":["import createCache from \"@emotion/cache\";\nimport createEmotion from \"@emotion/css/create-instance\";\n\n/**\n * Moves UI Kit styles to the top of the <head> so they're loaded first.\n * This enables users to override the UI Kit styles if necessary.\n */\n\nconst key: string = \"hv-uikit\";\n\nexport const emotionCache = createCache({\n  key: `${key}-style`,\n  prepend: true,\n});\n\nexport const {\n  flush,\n  hydrate,\n  cx,\n  merge,\n  getRegisteredStyles,\n  injectGlobal,\n  keyframes,\n  css,\n  sheet,\n  cache,\n} = createEmotion({\n  key: `${key}-css`,\n  prepend: true,\n});\n"],"names":["key","emotionCache","createCache","prepend","flush","hydrate","cx","merge","getRegisteredStyles","injectGlobal","keyframes","css","sheet","cache","createEmotion"],"mappings":";;AAQA,MAAMA,MAAc;AAEb,MAAMC,eAAeC,YAAY;AAAA,EACtCF,KAAM,GAAEA;AAAAA,EACRG,SAAS;AACX,CAAC;AAEY,MAAA;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF,IAAIC,cAAc;AAAA,EAChBd,KAAM,GAAEA;AAAAA,EACRG,SAAS;AACX,CAAC;"}