@orfium/ictinus 5.9.0 → 5.11.0

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { InlineAlertProps } from './InlineAlert.types';
+
+export declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { InlineAlert } from './InlineAlert';
+
+declare const meta: Meta<typeof InlineAlert>;
+export default meta;
+type Story = StoryObj<typeof InlineAlert>;
+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 WithoutAction: Story;
+export declare const WithoutDismiss: Story;
+export declare const WithTrigger: Story;
+export declare const Playground: Story;

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

@@ -0,0 +1,11 @@
+import { Theme } from 'theme';
+import { InlineAlertProps } from './InlineAlert.types';
+
+export declare const getIconColor: (status: InlineAlertProps["status"], theme: Theme) => string;
+export declare const styles: {
+    'inline-alert': (props: InlineAlertProps) => (theme: Theme) => import('@emotion/react').SerializedStyles;
+    icon: () => (theme: Theme) => import('@emotion/react').SerializedStyles;
+    content: () => (theme: Theme) => import('@emotion/react').SerializedStyles;
+    actions: () => (theme: Theme) => import('@emotion/react').SerializedStyles;
+    dismiss: () => (theme: Theme) => import('@emotion/react').SerializedStyles;
+};

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

@@ -0,0 +1,46 @@
+import { ReactElement, ReactNode } from 'react';
+import { TestProps } from '../../utils/types';
+
+/**
+ * Represents the possible status values for an inline alert.
+ */
+export type AlertStatus = 'neutral' | 'informational' | 'error' | 'warning' | 'success';
+export interface InlineAlertProps extends TestProps {
+    /**
+     * The status of the inline alert.
+     * @default 'neutral'
+     */
+    status?: AlertStatus;
+    /**
+     * The actions to be rendered within the alert.
+     * Can be a single ReactElement or an array of ReactElements.
+     * @example
+     * actions={[
+     *   <Button type="tertiary" size="compact">Tertiary</Button>,
+     *   <Button size="compact">Primary</Button>
+     * ]}
+     */
+    actions?: ReactElement | ReactElement[];
+    /**
+     * Whether to use alternative styling for the inline alert.
+     * @default false
+     */
+    isAlt?: boolean;
+    /**
+     * Callback function for the dismiss button.
+     * If not provided, the dismiss button will not be rendered.
+     */
+    onDismiss?(): void;
+    /**
+     * The main content of the inline alert.
+     */
+    children: ReactNode;
+    /**
+     * Whether the alert should receive focus automatically when rendered.
+     * Useful for scenarios where the alert is triggered programmatically.
+     * @default false
+     */
+    hasAutoFocus?: boolean;
+    /** Optional css class */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { InlineAlert } from './InlineAlert';
+export type { AlertStatus } from './InlineAlert.types';

package/dist/src/components/InlineAlert/tests/InlineAlert.test.d.ts

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

package/dist/src/components/Notification/InlineNotification/InlineNotification.d.ts

@@ -15,5 +15,10 @@ export type InlineNotificationProps = {
     /** The data test id if needed */
     dataTestId?: TestId;
 } & Pick<NotificationActions, 'primaryCTALabel' | 'primaryCTA'>;
+/**
+ *
+ * @deprecated {@link InlineNotification} has been deprecated; use {@link InlineAlert} instead.
+ *
+ */
 declare const InlineNotification: React.FC<InlineNotificationProps>;
 export default InlineNotification;

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

@@ -0,0 +1,80 @@
+import { ReactNode } from 'react';
+
+export declare function useSlotProps<T>(props: T, defaultSlot?: string): any;
+/**
+ * SlotProvider manages and provides slot props to its descendants.
+ * It allows for the definition and inheritance of props for named slots in a component tree.
+ *
+ * @component
+ * @param {Object} [props.slots={}] - An object containing slot names as keys and their corresponding props as values.
+ * @param {ReactNode} props.children - The child components to be wrapped by the SlotProvider.
+ *
+ *  * @example
+ * // Register component with the useSlotProps() hook
+ * function Button(props) {
+ *   props = useSlotProps(props, 'button');
+ *
+ *   return (
+ *     <button {...props}>{props.children}</button>
+ *   );
+ * }
+ *
+ * function ButtonsWithPadding(props) {
+ *   return (
+ *     <SlotProvider slots={{ button: { style: { padding: '1rem' } } }}>
+ *       {props.children}
+ *     </SlotProvider>
+ *   )
+ * }
+ *
+ * <ButtonsWithPadding>
+ *   <Button>Button 1</Button> // Gets 1rem padding
+ *   <Button>Button 2</Button> // Gets 1rem padding
+ * </ButtonsWithPadding>
+ *
+ * @example
+ * // Nested usage
+ * <SlotProvider slots={{ outer: { className: 'outer-class' } }}>
+ *   <SlotProvider slots={{ inner: { className: 'inner-class' } }}>
+ *     <Component />
+ *   </SlotProvider>
+ * </SlotProvider>
+ *
+ */
+export declare function SlotProvider({ slots, children }: {
+    slots?: object;
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * ClearSlots resets the SlotContext to an empty object for its children.
+ * It's used to remove any inherited slot props from parent SlotProviders.
+ *
+ * @component
+ * @param {React.ReactNode} props.children - The child components to be wrapped by ClearSlots.
+ *
+ * @example
+ * // Basic usage
+ * <SlotProvider slots={{ text: { color: 'blue' } }}>
+ *   <div>
+ *     <p {...useSlotProps({}, 'text')}>This text is blue</p>
+ *     <ClearSlots>
+ *       <p {...useSlotProps({}, 'text')}>This text is black</p>
+ *     </ClearSlots>
+ *   </div>
+ * </SlotProvider>
+ *
+ * @example
+ * // Usage within nested SlotProviders
+ * <SlotProvider slots={{ text: { color: 'blue' } }}>
+ *   <p {...useSlotProps({}, 'text')}>This text is blue</p>
+ *   <ClearSlots>
+ *     <SlotProvider slots={{ text: { color: 'red' } }}>
+ *       <p {...useSlotProps({}, 'text')}>This text is red, not blue</p>
+ *     </SlotProvider>
+ *   </ClearSlots>
+ * </SlotProvider>
+ *
+ */
+export declare function ClearSlots({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/components/utils/tests/Slots.test.d.ts

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

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

@@ -0,0 +1,36 @@
+import { RefObject } from 'react';
+
+export declare function createDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>): T;
+/**
+ * Create and manage a DOM reference, allowing both
+ * the parent and child components to access the same DOM element.
+ *
+ * @template T
+ * @param {React.RefObject<T>} ref - A ref object passed from the parent component.
+ * @returns {React.RefObject<T | null>} A new ref object that can be attached to a DOM element.
+ *
+ * @description
+ * This hook is useful in scenarios where you need to create a ref in a child component
+ * and also expose it to the parent component. It uses `useImperativeHandle` to make
+ * the DOM element accessible through the parent's ref.
+ *
+ * @example
+ * // In a child component:
+ * const ChildComponent = forwardRef((props, ref) => {
+ *   const domRef = useDOMRef(ref);
+ *   return <div ref={domRef}>Child Content</div>;
+ * });
+ *
+ * // In a parent component:
+ * const ParentComponent = () => {
+ *   const parentRef = useRef(null);
+ *   return <ChildComponent ref={parentRef} />;
+ * };
+ *
+ * @notes
+ * - This hook should be used in conjunction with React.forwardRef to properly pass
+ *   the ref from the parent component.
+ * - The generic type T extends HTMLElement, defaulting to HTMLElement if not specified.
+ * - The returned ref's current property may be null if the ref hasn't been attached to an element yet.
+ */
+export declare function useDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject<T>): RefObject<T | null>;

package/dist/src/index.d.ts

@@ -69,6 +69,7 @@ export * from './components/Notification/Banner';
 export { default as Snackbar } from './components/Notification/Snackbar';
 export * from './components/Notification/Snackbar';
 export * from './components/Notification/Notification';
+export { InlineAlert } from './components/InlineAlert';
 export { default as Drawer } from './components/Drawer';
 export * from './components/Drawer';
 export { default as Pagination } from './components/Pagination';

package/dist/src/storybook/Alert/Alert.d.ts

@@ -0,0 +1,13 @@
+import { AlertStatus } from '../../components/InlineAlert';
+
+type Action = {
+    url: string;
+    content: string;
+};
+type AlertProps = {
+    status: AlertStatus;
+    action?: Action;
+    description: string;
+};
+export declare function Alert({ status, action, description }: AlertProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/storybook/Alert/index.d.ts

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

package/dist/src/storybook/index.d.ts

@@ -5,4 +5,5 @@ import { default as SubsectionHeader } from './SubsectionHeader';
 import { default as Tip } from './Tip';
 import { default as UsageGuidelines } from './UsageGuidelines';
 
+export { Alert } from './Alert';
 export { UsageGuidelines, Tip, Note, Preview, SectionHeader, SubsectionHeader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.9.0",
+  "version": "5.11.0",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -91,7 +91,7 @@
     "history": "^4.10.1",
     "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^22.1.0",
+    "jsdom": "^25.0.0",
     "lint-staged": "^11.0.0",
     "prettier": "^2.6.2",
     "react": "^18.2.0",