@muraldevkit/ui-toolkit 2.51.1 → 2.52.1

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

@@ -1,5 +1,11 @@
 import React from 'react';
 import { DSIconType } from '../svg';
+/**
+ * This should be used to communciate error information for a specific input
+ */
+export interface MrlFormInputError {
+    message: string;
+}
 export type InputStates = 'disabled' | 'error' | 'read-only';
 export type InputKinds = 'default' | 'inline' | 'inline-label';
 export type InputSizes = 'default' | 'large';

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

@@ -2,6 +2,7 @@ export * from './select';
 export * from './select/MrlSelectItem';
 export * from './select/MrlSelectMenu';
 export * from './text-input/MrlTextInput';
+export * from './text-input/MrlEditableTextInput';
 export * from './label/MrlLabel';
 export * from './textarea/MrlTextarea';
 export * from './fieldset/MrlFieldset';

package/dist/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.d.ts

@@ -0,0 +1,30 @@
+import React, { InputHTMLAttributes } from 'react';
+import { InputStates, MrlFormInputError } from '../../constants';
+interface MrlEditableTextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Id of the text input */
+    inputId: 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 value of the text input used to make it a controlled input */
+    value?: 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;
+    /** Text placeholder for the text input */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    error?: MrlFormInputError;
+    'data-qa': string;
+    isEditable?: boolean;
+    setIsEditable?: (isEditableUpdate: boolean) => void;
+}
+export declare const MrlEditableTextInput: React.ForwardRefExoticComponent<MrlEditableTextInputProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/form/text-input/MrlEditableTextInput/MrlEditableTextInputRightIcon.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DSIconType } from '../../..';
+export interface MrlEditableInputRightButtonProps {
+    /** 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 {MrlEditableInputRightButtonProps} props - the component props
+ * @returns a button element with an icon
+ */
+export declare const MrlEditableTextInputRightButton: React.ForwardRefExoticComponent<Pick<MrlEditableInputRightButtonProps, "label" | "value" | "icon" | "dataQa" | "hasActiveColor" | "setHasActiveColor" | "action"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/form/text-input/MrlEditableTextInput/index.d.ts

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

package/dist/components/form/text-input/MrlEditableTextInput/useIsEditable.d.ts

@@ -0,0 +1,30 @@
+import { InputStates } from '../../constants';
+type UseIsEditableReturn = {
+    isEditable: boolean;
+    isEditing: boolean;
+    setIsEditable: (isEditable: boolean) => void;
+    setIsEditing: (isEditingUpdate: boolean) => void;
+};
+/**
+ * Custom hook used to track the edit state of a text input.
+ *
+ * isEditing represents if someone has actively decided to start editing a field.
+ * isEditable controls if the input field can be interacted with directly.
+ *
+ * This leaves open the possibility for a field to be editable even if someone has not explicitly decided to edit it.
+ *
+ *
+ *
+ * @param {Function | undefined} param.changeHandler - optional set handler
+ * @param {boolean | undefined} param.initialValue - the text input initial value
+ * @param {InputStates | undefined} param.state - the text input state
+ * @param {boolean | undefined} param.value - optional control value
+ * @returns the isEditable, isEditing state and handler
+ */
+export declare function useIsEditable({ changeHandler, initialValue, state, value }: {
+    changeHandler?: (isEditableUpdate: boolean) => void;
+    initialValue: boolean;
+    state?: InputStates;
+    value?: boolean;
+}): UseIsEditableReturn;
+export {};