@orfium/ictinus 5.24.0 → 5.26.0

package/dist/src/components/Toast/Toast.d.ts

@@ -1,23 +1,12 @@
-import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
-import { TestId } from '../../utils/types';
-import { NotificationStyleType, NotificationTypes } from '../Notification/Notification';
-import * as React from 'react';
-export type ToastProps = {
-    /** The informative message of the Toast */
-    message: string;
-    /** The type of the Toast, will determine the color and the icon */
-    type?: AcceptedColorComponentTypes;
-    /** The style type of the Notification. Defaults to elevated */
-    styleType?: NotificationStyleType;
-    /** The closing call-to-action of the Toast */
-    closeCTA: (() => void) | undefined;
-    /** Initialize toast as expanded */
-    isExpanded?: boolean;
-    /** If true, the Toast has a minimum-height */
-    hasMinimumHeight?: boolean;
-    /** The data test id if needed */
-    dataTestId?: TestId;
+import { ReactElement, default as React } from 'react';
+import { ToastContainerProps, ToastOptions, ToastValue } from './Toast.types';
+
+export declare const toast: {
+    (children: string | ReactElement, { isDismissible, timeout, ...options }?: ToastOptions): string;
+    dismiss(key: string): void;
 };
-export declare const isNotificationTypes: (type: string) => type is NotificationTypes;
-declare const Toast: React.FCC<ToastProps>;
-export default Toast;
+export declare const Toast: React.ForwardRefExoticComponent<import('react-aria').AriaToastProps<ToastValue> & {
+    toast: import('react-stately').QueuedToast<ToastValue>;
+    state: import('react-stately').ToastState<ToastValue>;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const ToastContainer: React.ForwardRefExoticComponent<ToastContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ReactElement } from 'react';
+import { ToastPlacement, ToastStatus } from './Toast.types';
+
+export interface ToastStoryArgs {
+    content: string | ReactElement;
+    status: ToastStatus;
+    isDismissible: boolean;
+    shouldCloseOnAction: boolean;
+    actions?: ReactElement | ReactElement[];
+    timeout: number;
+    placement: ToastPlacement;
+    hasIcon?: boolean;
+    onClose?: () => void;
+}
+declare const meta: Meta<ToastStoryArgs>;
+export default meta;
+type Story = StoryObj<ToastStoryArgs>;
+export declare const Neutral: Story;
+export declare const Informational: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Success: Story;
+export declare const WithButtons: Story;
+export declare const WithCustomIcon: Story;
+export declare const ShouldCloseOnAction: Story;
+export declare const Controlled: Story;
+export declare const Playground: Story;

package/dist/src/components/Toast/Toast.style.d.ts

@@ -1,12 +1,14 @@
-import { SerializedStyles } from '@emotion/react';
-import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
 import { Theme } from '../../theme';
-import { NotificationStyleType } from '../Notification/Notification';
+import { ToastOptions } from './Toast.types';
 
-export declare const toastContainer: (type: AcceptedColorComponentTypes, styleType: NotificationStyleType) => (theme: Theme) => SerializedStyles;
-export declare const topContainer: (type: AcceptedColorComponentTypes) => (theme: Theme) => SerializedStyles;
-export declare const infoContainer: () => (theme: Theme) => SerializedStyles;
-export declare const infoIconContainer: () => (theme: Theme) => SerializedStyles;
-export declare const actionIconsContainer: () => (theme: Theme) => SerializedStyles;
-export declare const chevronIconContainer: (isExpanded: boolean) => () => SerializedStyles;
-export declare const expandedContainer: (type: AcceptedColorComponentTypes, isExpanded: boolean, hasMinimumHeight: boolean) => (theme: Theme) => SerializedStyles;
+export declare const styles: {
+    toastRegion: (theme: Theme) => import('@emotion/utils').SerializedStyles;
+    'bottom left': import('@emotion/utils').SerializedStyles;
+    'bottom right': import('@emotion/utils').SerializedStyles;
+    toast: (props: ToastOptions) => (theme: Theme) => import('@emotion/utils').SerializedStyles;
+    icon: (theme: Theme) => import('@emotion/utils').SerializedStyles;
+    dismiss: (theme: Theme) => import('@emotion/utils').SerializedStyles;
+    toastContent: import('@emotion/utils').SerializedStyles;
+    toastActions: (theme: Theme) => import('@emotion/utils').SerializedStyles;
+};
+export declare const getIconColor: (status: ToastOptions["status"], theme: Theme) => string;

package/dist/src/components/Toast/Toast.types.d.ts

@@ -0,0 +1,44 @@
+import { ReactElement, ReactNode } from 'react';
+import { AriaToastProps, AriaToastRegionProps } from 'react-aria';
+import { QueuedToast, ToastState } from 'react-stately';
+
+/** Placement of the toast @default 'bottom right' */
+export type ToastPlacement = 'bottom left' | 'bottom right';
+/** Represents the possible status values for a toast. */
+export type ToastStatus = 'neutral' | 'informational' | 'error' | 'warning' | 'success';
+export type ToastValue = {
+    /** The status of the toast. @default 'neutral' */
+    status?: ToastStatus;
+    /** Action buttons/links to display in the toast */
+    actions?: ReactElement | ReactElement[];
+    /** The main content of the toast */
+    children?: ReactNode;
+    /** Whether the toast is automatically dismissed */
+    isDismissible?: boolean;
+    /** Whether the toast should close when an action is clicked */
+    shouldCloseOnAction?: boolean;
+    /** Show the specified icon per status */
+    hasIcon?: boolean;
+};
+export type ToastOptions = Partial<ToastValue> & {
+    /** Container placement for this specific toast */
+    placement?: ToastPlacement;
+    /** Maximum visible toasts for this specific toast */
+    maxVisibleToasts?: number;
+    /** Handler that is called when the toast is closed, either by the user or after a timeout. */
+    onClose?: () => void;
+    /** A timeout to automatically close the toast after, in milliseconds. */
+    timeout?: number;
+};
+export type ToastProps = AriaToastProps<ToastValue> & {
+    toast: QueuedToast<ToastValue>;
+    state: ToastState<ToastValue>;
+};
+export type ToastContainerProps = {
+    placement?: ToastPlacement;
+    maxVisibleToasts?: number;
+};
+export type ToastRegionProps = AriaToastRegionProps & {
+    placement?: ToastPlacement;
+    state: ToastState<ToastValue>;
+};

package/dist/src/components/Toast/index.d.ts

@@ -1,2 +1 @@
-export { default } from './Toast';
-export * from './Toast';
+export { ToastContainer, toast } from './Toast';

package/dist/src/components/ToastV4/ToastV4.d.ts

@@ -0,0 +1,28 @@
+import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
+import { TestId } from '../../utils/types';
+import { NotificationStyleType, NotificationTypes } from '../Notification/Notification';
+import * as React from 'react';
+export type ToastV4Props = {
+    /** The informative message of the Toast */
+    message: string;
+    /** The type of the Toast, will determine the color and the icon */
+    type?: AcceptedColorComponentTypes;
+    /** The style type of the Notification. Defaults to elevated */
+    styleType?: NotificationStyleType;
+    /** The closing call-to-action of the Toast */
+    closeCTA: (() => void) | undefined;
+    /** Initialize toast as expanded */
+    isExpanded?: boolean;
+    /** If true, the Toast has a minimum-height */
+    hasMinimumHeight?: boolean;
+    /** The data test id if needed */
+    dataTestId?: TestId;
+};
+export declare const isNotificationTypes: (type: string) => type is NotificationTypes;
+/**
+ *
+ * @deprecated {@link ToastV4} has been deprecated; use {@link Toast} instead.
+ *
+ */
+declare const ToastV4: React.FCC<ToastV4Props>;
+export default ToastV4;

package/dist/src/components/ToastV4/ToastV4.style.d.ts

@@ -0,0 +1,12 @@
+import { SerializedStyles } from '@emotion/react';
+import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
+import { Theme } from '../../theme';
+import { NotificationStyleType } from '../Notification/Notification';
+
+export declare const toastContainer: (type: AcceptedColorComponentTypes, styleType: NotificationStyleType) => (theme: Theme) => SerializedStyles;
+export declare const topContainer: (type: AcceptedColorComponentTypes) => (theme: Theme) => SerializedStyles;
+export declare const infoContainer: () => (theme: Theme) => SerializedStyles;
+export declare const infoIconContainer: () => (theme: Theme) => SerializedStyles;
+export declare const actionIconsContainer: () => (theme: Theme) => SerializedStyles;
+export declare const chevronIconContainer: (isExpanded: boolean) => () => SerializedStyles;
+export declare const expandedContainer: (type: AcceptedColorComponentTypes, isExpanded: boolean, hasMinimumHeight: boolean) => (theme: Theme) => SerializedStyles;

package/dist/src/components/ToastV4/ToastV4.test.d.ts

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

package/dist/src/components/ToastV4/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToastV4';
+export { default } from './ToastV4';

package/dist/src/components/utils/Overlay/Overlay.d.ts

@@ -0,0 +1,20 @@
+import { CSSObject } from '@emotion/serialize';
+import { default as React } from 'react';
+
+type OverlayProps = {
+    id?: string;
+    triggerRef: React.RefObject<HTMLDivElement>;
+    children: React.ReactNode;
+    setIsVisible: (visible: boolean) => void;
+    sx?: {
+        container?: CSSObject;
+        itemContainer?: CSSObject;
+    };
+    offsetX?: number;
+    offsetY?: number;
+    isVisible: boolean;
+    isNonModal?: boolean;
+    hasWrapperWidth?: boolean;
+};
+export declare function Overlay({ id, triggerRef, offsetX, offsetY, setIsVisible, hasWrapperWidth, isVisible, isNonModal, sx, children, }: OverlayProps): React.ReactPortal;
+export {};

package/dist/src/components/utils/Overlay/index.d.ts

@@ -0,0 +1 @@
+export { Overlay } from './Overlay';

package/dist/src/components/utils/PositionInScreen/PositionInScreen.d.ts

@@ -5,8 +5,12 @@ export type PositionInScreenProps = {
     id?: string;
     /** Whether the item to be positioned is visible */
     isVisible: boolean;
+    /** Function to set the visibility of the item */
+    setIsVisible: (visible: boolean) => void;
     /** Configures the container's overflow */
     isOverflowAllowed?: boolean;
+    /** Whether the overlay is able to interact outside */
+    isNonModal?: boolean;
     /** Whether the item to be positioned uses the parent's wrapper width */
     hasWrapperWidth?: boolean;
     /** Additional offset-x */
@@ -22,5 +26,4 @@ export type PositionInScreenProps = {
         itemContainer?: CSSObject;
     };
 };
-declare const PositionInScreen: React.FCC<PositionInScreenProps>;
-export default PositionInScreen;
+export declare const PositionInScreen: React.FCC<PositionInScreenProps>;

package/dist/src/components/utils/PositionInScreen/hooks.d.ts

@@ -1,18 +1,22 @@
 export declare const usePositionInScreen: (
 /** Ref of the parent element */
-parentRef: React.MutableRefObject<any>, 
+parentRef: HTMLDivElement | null, 
 /** Ref of the item to be positioned */
-itemRef: React.MutableRefObject<any>, 
+itemRef: HTMLDivElement | null, 
 /** Additional offset-x */
 offsetX: number, 
 /** Additional offset-y */
 offsetY: number, 
 /** Whether the item to be positioned is visible */
-isVisible?: boolean, 
-/** Placement override: 'top' or 'bottom' */
-placement?: "top" | "bottom") => {
+isVisible?: boolean) => {
     x: number;
     y: number;
+    maxHeight: number;
+    maxWidth: number;
+    isPositioned: boolean;
+    calculatePosition: () => void;
+    placement: "top" | "bottom";
+    triggerWidth: number;
 };
 export declare const useWrapperWidth: (
 /** Whether the item to be positioned uses the parent's wrapper width */

package/dist/src/components/utils/PositionInScreen/index.d.ts

@@ -1 +1 @@
-export { default } from './PositionInScreen';
+export { PositionInScreen } from './PositionInScreen';

package/dist/src/hooks/useOverlayStack.d.ts

@@ -0,0 +1,13 @@
+import { DOMAttributes, RefObject } from 'react';
+
+type OverlayStackProps = {
+    isVisible: boolean;
+    isNonModal?: boolean;
+    triggerRef?: RefObject<Element | null>;
+    overlayRef: RefObject<Element | null>;
+    onClose?: () => void;
+};
+export declare function useOverlayStack({ isVisible, isNonModal, triggerRef, overlayRef, onClose, }: OverlayStackProps): {
+    overlayProps: DOMAttributes<Element>;
+};
+export {};

package/dist/src/index.d.ts

@@ -9,123 +9,122 @@ import * as typography from './theme/globals/typography';
 import * as overrides from './theme/overrides';
 import * as palette from './theme/palette';
 export * from './theme/functions';
-export { generateUniqueID, generateTestDataId, generateUniqueKey } from './utils/helpers';
+export { generateTestDataId, generateUniqueID, generateUniqueKey } from './utils/helpers';
+export type { Theme } from './theme';
 export type { Elevation } from './theme/globals/elevation';
-export type { Overrides } from './theme/overrides';
-export type { Palette } from './theme/palette';
 export type { Spacing } from './theme/globals/spacing';
 export type { Typography as GlobalsTypography } from './theme/globals/typography';
+export type { Overrides } from './theme/overrides';
+export type { Palette } from './theme/palette';
 export type { AcceptedColorComponentTypes } from './utils/themeFunctions';
-export type { Theme } from './theme';
 export type { TestProps } from './utils/types';
-export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
-export { default as AvatarStack } from './components/Avatar/AvatarStack';
+export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar/AvatarStack';
-export { default as Breadcrumb } from './components/Breadcrumb';
-export * from './components/Breadcrumb';
-export { default as Box } from './components/Box';
+export { default as AvatarStack } from './components/Avatar/AvatarStack';
 export * from './components/Box';
-export { default as Button } from './components/Button';
+export { default as Box } from './components/Box';
+export * from './components/Breadcrumb';
+export { default as Breadcrumb } from './components/Breadcrumb';
 export * from './components/Button';
-export { default as DropdownButton } from './components/DropdownButton';
-export * from './components/DropdownButton';
-export { default as Card } from './components/Card';
+export { default as Button } from './components/Button';
 export * from './components/Card';
-export { default as LineChart } from './components/Chart/LineChart';
-export * from './components/Chart/LineChart';
-export { default as BarChart } from './components/Chart/BarChart';
+export { default as Card } from './components/Card';
+export * from './components/DropdownButton';
+export { default as DropdownButton } from './components/DropdownButton';
 export * from './components/Chart/BarChart';
-export { default as DonutChart } from './components/Chart/DonutChart';
+export { default as BarChart } from './components/Chart/BarChart';
 export * from './components/Chart/DonutChart';
+export { default as DonutChart } from './components/Chart/DonutChart';
+export * from './components/Chart/LineChart';
+export { default as LineChart } from './components/Chart/LineChart';
 export { CheckBox } from './components/Controls';
 export * from './components/Controls/CheckBox';
-export { default as DatePicker } from './components/DatePicker';
 export * from './components/DatePicker';
-export { default as Navigation } from './components/Navigation';
-export * from './components/Navigation';
-export { default as ExpandCollapse } from './components/ExpandCollapse';
+export { default as DatePicker } from './components/DatePicker';
 export * from './components/ExpandCollapse';
-export { default as Icon } from './components/Icon';
+export { default as ExpandCollapse } from './components/ExpandCollapse';
 export * from './components/Icon';
-export { default as Link } from './components/Link';
-export * from './components/Link';
-export { default as IconButton } from './components/IconButton';
+export { default as Icon } from './components/Icon';
 export * from './components/IconButton';
-export { default as Label } from './components/Label';
+export { default as IconButton } from './components/IconButton';
 export * from './components/Label';
-export { default as List } from './components/List';
+export { default as Label } from './components/Label';
+export * from './components/Link';
+export { default as Link } from './components/Link';
 export * from './components/List';
-export { default as Menu } from './components/Menu';
+export { default as List } from './components/List';
 export * from './components/Menu';
-export { default as Modal } from './components/Modal';
+export { default as Menu } from './components/Menu';
 export * from './components/Modal';
-export { default as InlineNotification } from './components/Notification/InlineNotification';
+export { default as Modal } from './components/Modal';
+export * from './components/Navigation';
+export { default as Navigation } from './components/Navigation';
+export * from './components/Notification/Banner';
+export { default as Banner } from './components/Notification/Banner';
 export * from './components/Notification/InlineNotification';
-export { default as NotificationsContainer } from './components/Notification/NotificationsContainer';
+export { default as InlineNotification } from './components/Notification/InlineNotification';
+export * from './components/Notification/Notification';
 export * from './components/Notification/NotificationsContainer';
-export { default as NotificationVisual } from './components/Notification/NotificationVisual';
+export { default as NotificationsContainer } from './components/Notification/NotificationsContainer';
 export * from './components/Notification/NotificationVisual';
-export { default as Banner } from './components/Notification/Banner';
-export * from './components/Notification/Banner';
-export { default as Snackbar } from './components/Notification/Snackbar';
+export { default as NotificationVisual } from './components/Notification/NotificationVisual';
 export * from './components/Notification/Snackbar';
-export * from './components/Notification/Notification';
-export { InlineAlert } from './components/InlineAlert';
+export { default as Snackbar } from './components/Notification/Snackbar';
 export { Broadcast } from './components/Broadcast';
-export { default as Drawer } from './components/Drawer';
+export { InlineAlert } from './components/InlineAlert';
+export { toast, ToastContainer } from './components/Toast';
+export { Radio, RadioGroup, Switch } from './components/Controls';
+export * from './components/Controls/Radio';
+export * from './components/Controls/Radio/components/RadioGroup';
+export * from './components/Controls/Switch';
 export * from './components/Drawer';
-export { default as Pagination } from './components/Pagination';
+export { default as Drawer } from './components/Drawer';
+export * from './components/Filter';
+export { default as Filter } from './components/Filter';
+export * from './components/NumberField';
+export { default as NumberField } from './components/NumberField';
 export * from './components/Pagination';
-export { Radio } from './components/Controls';
-export * from './components/Controls/Radio';
-export { default as ProgressIndicator } from './components/ProgressIndicator';
+export { default as Pagination } from './components/Pagination';
 export * from './components/ProgressIndicator';
-export { RadioGroup } from './components/Controls';
-export * from './components/Controls/Radio/components/RadioGroup';
-export { default as Select, StatefulSelect } from './components/Select';
+export { default as ProgressIndicator } from './components/ProgressIndicator';
+export * from './components/Search';
+export { default as Search } from './components/Search';
 export * from './components/Select';
-export { default as Slider } from './components/Slider';
+export { default as Select, StatefulSelect } from './components/Select';
 export * from './components/Slider';
-export { Switch } from './components/Controls';
-export * from './components/Controls/Switch';
-export { default as Table } from './components/Table';
+export { default as Slider } from './components/Slider';
 export * from './components/Table';
-export { default as TableV4 } from './components/TableV4';
+export { default as Table } from './components/Table';
 export * from './components/TableV4';
-export { default as Tag } from './components/Tag';
-export * from './components/Tag';
-export { default as Tabs } from './components/Tabs';
+export { default as TableV4 } from './components/TableV4';
 export * from './components/Tabs';
-export { default as TabStepper } from './components/TabStepper';
+export { default as Tabs } from './components/Tabs';
 export * from './components/TabStepper';
-export { default as TextField } from './components/TextField';
-export * from './components/TextField';
-export { default as Search } from './components/Search';
-export * from './components/Search';
-export { default as TextArea } from './components/TextArea';
+export { default as TabStepper } from './components/TabStepper';
+export * from './components/Tag';
+export { default as Tag } from './components/Tag';
 export * from './components/TextArea';
-export { default as NumberField } from './components/NumberField';
-export * from './components/NumberField';
-export { default as ThemeProvider } from './components/ThemeProvider';
+export { default as TextArea } from './components/TextArea';
+export * from './components/TextField';
+export { default as TextField } from './components/TextField';
 export * from './components/ThemeProvider';
-export { default as Toast } from './components/Toast';
-export * from './components/Toast';
-export { default as Tooltip } from './components/Tooltip';
+export { default as ThemeProvider } from './components/ThemeProvider';
+export * from './components/ToastV4';
+export { default as ToastV4 } from './components/ToastV4';
 export * from './components/Tooltip';
-export { default as TopNavBar } from './components/TopAppBar';
+export { default as Tooltip } from './components/Tooltip';
 export * from './components/TopAppBar';
-export { default as Filter } from './components/Filter';
-export * from './components/Filter';
-export { default as TruncatedContent } from './components/TruncatedContent';
+export { default as TopNavBar } from './components/TopAppBar';
 export * from './components/TruncatedContent';
-export { default as Typography } from './components/Typography';
+export { default as TruncatedContent } from './components/TruncatedContent';
 export * from './components/Typography';
-export { default as useTheme } from './hooks/useTheme';
-export * from './hooks/useTheme';
-export { default as useBreakpoints } from './hooks/useBreakpoints';
+export { default as Typography } from './components/Typography';
 export * from './hooks/useBreakpoints';
-export { default as useEscape } from './hooks/useEscape';
+export { default as useBreakpoints } from './hooks/useBreakpoints';
 export * from './hooks/useEscape';
+export { default as useEscape } from './hooks/useEscape';
+export * from './hooks/useTheme';
+export { default as useTheme } from './hooks/useTheme';
 export { default as themeConfig } from './theme';
-export { ClickAwayListener, themeFunctions, palette, spacing, typography, elevation, overrides, queriesSizes, rem, };
+export { ClickAwayListener, elevation, overrides, palette, queriesSizes, rem, spacing, themeFunctions, typography, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.24.0",
+  "version": "5.26.0",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",

package/dist/src/components/utils/PositionInScreen/utils.d.ts

@@ -1 +0,0 @@
-export declare const resizeObserverHandler: (callback: (args: any) => void) => ResizeObserver;