@muraldevkit/ui-toolkit 2.60.0 → 2.62.0

package/dist/components/form/{text-input/hooks → hooks}/useActiveColor.d.ts

@@ -1,4 +1,4 @@
-import { InputStates } from '../../constants';
+import { InputStates } from '../constants';
 type useActiveColorReturn = {
     hasActiveColor: boolean;
     setHasActiveColor: (hasActiveColor: boolean) => void;

package/dist/components/form/{text-input/MrlEditableTextInput → hooks}/useIsEditable.d.ts

@@ -1,4 +1,4 @@
-import { InputStates } from '../../constants';
+import { InputStates } from '../constants';
 type UseIsEditableReturn = {
     isEditable: boolean;
     isEditing: boolean;

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

@@ -5,6 +5,7 @@ export * from './text-input/MrlTextInput';
 export * from './text-input/MrlEditableTextInput';
 export * from './label/MrlLabel';
 export * from './textarea/MrlTextarea';
+export * from './textarea/MrlEditableTextarea';
 export * from './fieldset/MrlFieldset';
 export * from './checkbox/MrlCheckbox';
 export * from './checkbox/MrlCheckboxStandalone';

package/dist/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.d.ts

@@ -0,0 +1,43 @@
+import React, { TextareaHTMLAttributes } from 'react';
+import './MrlEditableTextarea.global.scss';
+import { InputStates, MrlFormInputError } from '../../..';
+interface MrlEditableTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** The value of the textarea used to make it a controlled input */
+    value: string;
+    /**
+     * 	Value of the label text assigned to the input.
+     *  This is used to describe to the user what field they will be editing when interacting with the edit buton.
+     */
+    inputLabelText: string;
+    /**
+     * The maximum number of characters that the user can enter.
+     * If undefined or set to "0", removes the character counter from the textarea
+     */
+    maxLength?: number;
+    /**
+     * Id of the text input.
+     */
+    inputId: string;
+    /**
+     * Text placeholder for the text input.
+     */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    /** Additional class to add to the textarea */
+    className?: string;
+    'data-qa': string;
+    error?: MrlFormInputError;
+    isEditable?: boolean;
+    setIsEditable?: (isEditableUpdate: boolean) => void;
+}
+/**
+ * Allows the user to input plain text in a multi-line format
+ *
+ * @param {MrlEditableTextareaProps} props - the component props
+ * @returns a textarea element
+ */
+export declare const MrlEditableTextarea: React.ForwardRefExoticComponent<MrlEditableTextareaProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DSIconType } from '../../..';
+export interface MrlEditableTextareaRightButtonProps {
+    /** the action that should be executed when interacting with the icon */
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** the icon that will be rendered */
+    icon: DSIconType;
+    /** data-qa attribute for the icon */
+    dataQa?: string;
+    /** describes the purpouse of the icon button */
+    label: string;
+    /** determines if the icon has active color or not */
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+    /** the text input value used to calculate the active style */
+    value?: string;
+    ref?: HTMLButtonElement;
+}
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlEditableTextareaRightButtonProps} props - the component props
+ * @returns a button element with an icon
+ */
+export declare const MrlEditableTextareaRightButton: React.ForwardRefExoticComponent<Pick<MrlEditableTextareaRightButtonProps, "label" | "value" | "dataQa" | "icon" | "hasActiveColor" | "setHasActiveColor" | "action"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/form/textarea/MrlEditableTextarea/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlEditableTextarea';

package/dist/components/index.d.ts

@@ -25,3 +25,4 @@ export * from './skeleton';
 export * from './empty';
 export * from './live-region';
 export * from './callout';
+export * from './panel';

package/dist/components/panel/MrlPanel/MrlPanel.d.ts

@@ -0,0 +1,39 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * Props for the MrlPanel component.
+ */
+interface MrlPanelProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * A string value used for data-qa attribute.
+     */
+    ['data-qa']?: string;
+    /**
+     * Callback function that is called when the panel is closed.
+     */
+    onClose?: () => void;
+    /**
+     * The custom header element to be rendered in the panel.
+     * When a custom header is used developers need to provide th aria-label and aria-describedby.
+     */
+    header?: ReactNode;
+    /**
+     * The title of the panel.
+     */
+    title?: string;
+    /**
+     * The description of the panel.
+     */
+    description?: string;
+    /**
+     * Specifies whether to disable autofocus on the panel.
+     */
+    disableAutofocus?: boolean;
+}
+/**
+ * MrlPanel component.
+ *
+ * @param props The MrlPanel component properties.
+ * @returns The MrlPanel component.
+ */
+export declare const MrlPanel: (props: MrlPanelProps) => JSX.Element;
+export {};

package/dist/components/panel/MrlPanel/index.d.ts

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

package/dist/components/panel/MrlPanelFooter/MrlPanelFooter.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * Props for the MrlPanelFooter component.
+ */
+interface MrlPanelFooterProps extends ComponentPropsWithRef<'footer'> {
+    /**
+     * The children of the MrlPanelFooter component.
+     */
+    children?: ReactNode;
+    /**
+     * Specifies whether to show the divider.
+     */
+    hasDivider?: boolean;
+}
+/**
+ * MrlPanelFooter component.
+ *
+ * @param props The MrlPanelFooter component properties.
+ * @returns The MrlPanelFooter component.
+ */
+export declare const MrlPanelFooter: ({ children, hasDivider, className, ...rest }: MrlPanelFooterProps) => JSX.Element;
+export {};

package/dist/components/panel/MrlPanelFooter/index.d.ts

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

package/dist/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * Props for the MrlPanelStickyHeader component.
+ */
+interface MrlPanelStickyHeaderProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * The children of the MrlPanelStickyHeader component.
+     */
+    children?: ReactNode;
+}
+/**
+ * MrlPanelStickyHeader component.
+ *
+ * @param props The MrlPanelStickyHeader component properties.
+ * @returns The MrlPanel component.
+ */
+export declare const MrlPanelStickyHeader: ({ children, className, ...rest }: MrlPanelStickyHeaderProps) => JSX.Element;
+export {};

package/dist/components/panel/MrlPanelStickyHeader/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './MrlPanel';
+export * from './MrlPanelFooter';
+export * from './MrlPanelStickyHeader';