@mezzanine-ui/react 0.16.0 → 1.0.0-alpha.0

package/Form/FormHintText.d.ts

@@ -0,0 +1,18 @@
+import { formHintIcons } from '@mezzanine-ui/core/form';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export type FormHintTextProps = NativeElementPropsWithoutKeyAndRef<'span'> & {
+    /**
+     * The severity of form message.
+     */
+    severity?: keyof typeof formHintIcons | undefined;
+};
+/**
+ * The react component for `mezzanine` form message.
+ */
+declare const FormHintText: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"span"> & {
+    /**
+     * The severity of form message.
+     */
+    severity?: keyof typeof formHintIcons | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export default FormHintText;

package/Form/FormHintText.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { formHintIcons, formFieldClasses } from '@mezzanine-ui/core/form';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` form message.
+ */
+const FormHintText = forwardRef(function FormHintText(props, ref) {
+    const { children, className, severity, ...rest } = props;
+    const icon = severity ? formHintIcons[severity] : null;
+    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [icon && jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: icon }), children] }));
+});
+
+export { FormHintText as default };

package/Form/FormLabel.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { formFieldClasses } from '@mezzanine-ui/core/form';

package/Form/index.d.ts

@@ -1,5 +1,9 @@
-export * from './typings';
-export * from './FormControlContext';
-export { FormFieldProps, default as FormField } from './FormField';
-export { FormLabelProps, default as FormLabel } from './FormLabel';
-export { FormMessageProps, default as FormMessage } from './FormMessage';
+export type { FormElementFocusHandlers } from './typings';
+export { FormControlContext } from './FormControlContext';
+export type { FormControl } from './FormControlContext';
+export type { FormFieldProps } from './FormField';
+export { default as FormField } from './FormField';
+export type { FormLabelProps } from './FormLabel';
+export { default as FormLabel } from './FormLabel';
+export type { FormHintTextProps } from './FormHintText';
+export { default as FormHintText } from './FormHintText';

package/Form/index.js

@@ -1,4 +1,4 @@
 export { FormControlContext } from './FormControlContext.js';
 export { default as FormField } from './FormField.js';
 export { default as FormLabel } from './FormLabel.js';
-export { default as FormMessage } from './FormMessage.js';
+export { default as FormHintText } from './FormHintText.js';

package/Form/useAutoCompleteValueControl.js

@@ -94,8 +94,10 @@ function useAutoCompleteBaseValueControl(props) {
 }
 const useAutoCompleteValueControl = (props) => {
     if (props.mode === 'multiple') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         return useAutoCompleteBaseValueControl(props);
     }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return useAutoCompleteBaseValueControl(props);
 };
 

package/Form/useCheckboxControlValue.js

@@ -7,7 +7,6 @@ function useCheckboxControlValue(props) {
         /**
          * To ensure checkbox inside checkbox group, not use destructure here
          */
-        // eslint-disable-next-line no-nested-ternary
         checked: checkboxGroup
             ? checkboxGroup.value && value != null
                 ? checkboxGroup.value.includes(value)

package/Form/useSelectValueControl.js

@@ -66,8 +66,10 @@ function useSelectBaseValueControl(props) {
 }
 const useSelectValueControl = (props) => {
     if (props.mode === 'multiple') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         return useSelectBaseValueControl(props);
     }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return useSelectBaseValueControl(props);
 };
 

package/InlineMessage/InlineMessage.d.ts

@@ -0,0 +1,33 @@
+import { InlineMessageSeverity } from '@mezzanine-ui/core/inline-message';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface InlineMessageProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The content of the inline message value(only string is supported).
+     */
+    content: string;
+    /**
+     * The class name of the inline message element.
+     */
+    className?: string;
+    /**
+     * The icon of the inline message.
+     */
+    icon?: IconDefinition;
+    /**
+     * Called when user clicks the close button.
+     */
+    onClose?: () => void;
+    /**
+     * The inline message severity (`'info' | 'warning' | 'error'`).
+     */
+    severity: InlineMessageSeverity;
+}
+/**
+ * The react component for `mezzanine` inline message.
+ *
+ * Use `InlineMessage` directly in your layout to display contextual feedback,
+ * and provide `onClose` callback when you need to react to dismiss events.
+ */
+declare const InlineMessage: import("react").ForwardRefExoticComponent<InlineMessageProps & import("react").RefAttributes<HTMLDivElement>>;
+export default InlineMessage;

package/InlineMessage/InlineMessage.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, useMemo } from 'react';
+import { inlineMessageClasses, inlineMessageIcons } from '@mezzanine-ui/core/inline-message';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import ClearActions from '../ClearActions/ClearActions.js';
+import Fade from '../Transition/Fade.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` inline message.
+ *
+ * Use `InlineMessage` directly in your layout to display contextual feedback,
+ * and provide `onClose` callback when you need to react to dismiss events.
+ */
+const InlineMessage = forwardRef(function InlineMessage(props, ref) {
+    const { content, className, icon, onClose, severity } = props;
+    const [visible, setVisible] = useState(true);
+    const handleClose = useCallback(() => {
+        setVisible(false);
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    const iconNode = useMemo(() => {
+        if (icon) {
+            return jsx(Icon, { className: inlineMessageClasses.icon, icon: icon });
+        }
+        const severityIcon = inlineMessageIcons[severity];
+        return jsx(Icon, { className: inlineMessageClasses.icon, icon: severityIcon });
+    }, [icon, severity]);
+    return (jsx(Fade, { ref: ref, duration: {
+            enter: MOTION_DURATION.fast,
+            exit: MOTION_DURATION.fast,
+        }, easing: {
+            enter: MOTION_EASING.standard,
+            exit: MOTION_EASING.standard,
+        }, in: visible, children: jsxs("div", { "aria-live": "polite", className: cx(inlineMessageClasses.host, inlineMessageClasses.severity(severity), className), role: "status", children: [jsxs("div", { className: inlineMessageClasses.contentContainer, children: [iconNode, jsx("span", { className: inlineMessageClasses.content, children: content })] }), severity === 'info' ? (jsx(ClearActions, { onClick: handleClose, type: "standard", variant: "base" })) : null] }) }));
+});
+
+export { InlineMessage as default };

package/InlineMessage/InlineMessageGroup.d.ts

@@ -0,0 +1,24 @@
+import { Key, ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { InlineMessageProps } from './InlineMessage';
+export interface InlineMessageGroupItem extends Omit<InlineMessageProps, 'content'> {
+    key: Key;
+    content: string;
+}
+export interface InlineMessageGroupProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * The inline messages within the group.
+     * Ignored when `children` provided.
+     */
+    items?: InlineMessageGroupItem[];
+    /**
+     * Custom inline message nodes.
+     */
+    children?: ReactNode;
+    /**
+     * Callback invoked when any item triggers `onClose`.
+     */
+    onItemClose?: (key: Key) => void;
+}
+declare const InlineMessageGroup: import("react").ForwardRefExoticComponent<InlineMessageGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default InlineMessageGroup;

package/InlineMessage/InlineMessageGroup.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { inlineMessageGroupClasses } from '@mezzanine-ui/core/inline-message';
+import { forwardRef, useMemo } from 'react';
+import InlineMessage from './InlineMessage.js';
+import cx from 'clsx';
+
+const mapItemsToMessages = (items, onItemClose) => items === null || items === void 0 ? void 0 : items.map(({ key, content, onClose, ...restItemProps }) => (jsx(InlineMessage, { ...restItemProps, content: content, onClose: () => {
+        if (onClose) {
+            onClose();
+        }
+        if (onItemClose) {
+            onItemClose(key);
+        }
+    } }, key)));
+const InlineMessageGroup = forwardRef(function InlineMessageGroup(props, ref) {
+    const { children: childrenProp, className, items, onItemClose, ...rest } = props;
+    const children = useMemo(() => childrenProp !== null && childrenProp !== void 0 ? childrenProp : mapItemsToMessages(items, onItemClose), [childrenProp, items, onItemClose]);
+    return (jsx("div", { ...rest, ref: ref, className: cx(inlineMessageGroupClasses.host, className), "aria-live": "polite", role: "region", children: children }));
+});
+
+export { InlineMessageGroup as default };

package/InlineMessage/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './InlineMessage';
+export type { InlineMessageProps } from './InlineMessage';
+export { default as InlineMessageGroup } from './InlineMessageGroup';
+export type { InlineMessageGroupItem, InlineMessageGroupProps, } from './InlineMessageGroup';

package/InlineMessage/index.js

@@ -0,0 +1,2 @@
+export { default } from './InlineMessage.js';
+export { default as InlineMessageGroup } from './InlineMessageGroup.js';

package/Input/ActionButton/ActionButton.d.ts

@@ -0,0 +1,26 @@
+import { InputSize } from '@mezzanine-ui/core/input';
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
+export interface ActionButtonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'type' | 'disabled'> {
+    /**
+     * Whether the action button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The icon of action button.
+     * @default CopyIcon
+     */
+    icon?: IconDefinition;
+    /**
+     * The label of action button.
+     * @default 'Copy'
+     */
+    label?: string;
+    /**
+     * The size of action button.
+     * @default 'main'
+     */
+    size?: InputSize;
+}
+declare const ActionButton: import("react").ForwardRefExoticComponent<ActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default ActionButton;

package/Input/ActionButton/ActionButton.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { inputActionButtonClasses } from '@mezzanine-ui/core/input';
+import { forwardRef } from 'react';
+import { CopyIcon } from '@mezzanine-ui/icons';
+import Icon from '../../Icon/Icon.js';
+import cx from 'clsx';
+
+const ActionButton = forwardRef(function ActionButton(props, ref) {
+    const { className, disabled, icon = CopyIcon, label = 'Copy', size = 'main', ...rest } = props;
+    return (jsxs("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputActionButtonClasses.host, disabled && inputActionButtonClasses.disabled, size === 'main' ? inputActionButtonClasses.main : inputActionButtonClasses.sub, className), title: label, ...rest, children: [jsx(Icon, { className: inputActionButtonClasses.icon, icon: icon, size: 16 }), jsx("span", { className: inputActionButtonClasses.text, children: label })] }));
+});
+
+export { ActionButton as default };

package/Input/ActionButton/index.d.ts

@@ -0,0 +1,2 @@
+export type { ActionButtonProps } from './ActionButton';
+export { default } from './ActionButton';

package/Input/ActionButton/index.js

@@ -0,0 +1 @@
+export { default } from './ActionButton.js';

package/Input/Input.d.ts

@@ -1,13 +1,28 @@
 import { Ref, ChangeEventHandler } from 'react';
-import { InputSize } from '@mezzanine-ui/core/input';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import type { TagsType } from '../Form/useInputWithTagsModeValue';
-import { TextFieldProps } from '../TextField';
-export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'onKeyDown' | 'suffixActionIcon'> {
+import { TextFieldAffixProps, TextFieldProps } from '../TextField';
+import { ActionButtonProps } from './ActionButton';
+import { SelectButtonProps } from './SelectButton';
+import { PasswordStrengthIndicatorProps } from './PasswordStrengthIndicator';
+/**
+ * Base props shared by all Input variants
+ */
+export interface InputBaseProps extends Omit<TextFieldProps, 'children' | 'clearable' | 'onClear' | 'prefix' | 'suffix'> {
     /**
      * The default value of input.
      */
     defaultValue?: string;
+    /**
+     * Formatter function to transform the value for display.
+     * Common use cases: currency formatting (1000 → "1,000"), phone numbers, etc.
+     * @example
+     * formatter={(value) => value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+     */
+    formatter?: (value: string) => string;
+    /**
+     * The id of input element.
+     */
+    id?: string;
     /**
      * The react ref passed to input element.
      */
@@ -15,62 +30,152 @@ export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' |
     /**
      * The other native props for input element.
      */
-    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'value' | 'type' | 'id' | 'name' | `aria-${'disabled' | 'multiline' | 'readonly'}`>;
+    /**
+     * The input type of input element.
+     * @default 'text'
+     */
+    inputType?: NativeElementPropsWithoutKeyAndRef<'input'>['type'];
     /**
-     * The input value mode
-     * @default 'default'
+     * The name of input element.
      */
-    mode?: 'default' | 'tags';
+    name?: string;
     /**
      * The change event handler of input element.
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Parser function to extract the raw value from formatted display value.
+     * Should reverse the formatter transformation.
+     * @example
+     * parser={(value) => value.replace(/,/g, '')}
+     */
+    parser?: (value: string) => string;
     /**
      * The placeholder of input.
      */
     placeholder?: string;
     /**
-     * Whether the input is readonly.
-     * @default false
+     * The value of input.
      */
-    readOnly?: boolean;
+    value?: string;
+}
+/**
+ * Clearable props
+ */
+export type ClearableInput = Pick<TextFieldProps, 'clearable' | 'onClear'>;
+/**
+ * Number input
+ */
+export type NumberInput = {
+    /**
+     * The minimum value.
+     */
+    min?: number;
+    /**
+     * The maximum value.
+     */
+    max?: number;
+    /**
+     * The step value.
+     * @default 1
+     */
+    step?: number;
+};
+/**
+ * 1. Base Input - Basic input field
+ */
+export type BaseInputProps = InputBaseProps & ClearableInput & {
+    /**
+     * The type of input.
+     * @default 'base'
+     */
+    variant?: 'base';
+};
+/**
+ * 2. With Affix Input - Input with prefix/suffix decorations
+ */
+export type WithAffixInputProps = InputBaseProps & TextFieldAffixProps & ClearableInput & {
+    variant: 'affix';
+};
+/**
+ * 3. Search Input - Input with search icon prefix
+ */
+export type SearchInputProps = InputBaseProps & ClearableInput & {
+    variant: 'search';
+};
+/**
+ * 4. Number Input - Small numeric input (36x36)
+ */
+export type NumberInputProps = InputBaseProps & NumberInput & {
+    variant: 'number';
+};
+/**
+ * 5. Unit Input - Input with unit text and spinner buttons
+ */
+export type UnitInputProps = InputBaseProps & NumberInput & TextFieldAffixProps & {
+    variant: 'unit';
     /**
-     * Whether the input is required.
+     * Whether to show spinner buttons.
      * @default false
      */
-    required?: boolean;
-    /**
-     * The size of input.
-     * @default 'medium'
-     */
-    size?: InputSize;
-    /**
-     * The props for input element with tags mode.
-     */
-    tagsProps?: {
-        /**
-         * The initial value of tags
-         */
-        initialTagsValue?: string[];
-        /**
-         * The position of input field on tags mode
-         * @default 'bottom''
-         */
-        inputPosition?: 'top' | 'bottom';
-        /**
-         * Maximum permitted length of the tags
-         */
-        maxTagsLength?: number;
-        /**
-         * The change event handler of input tags value.
-         */
-        onTagsChange?: (tags: TagsType) => void;
+    showSpinner?: boolean;
+    /**
+     * Callback when spinner up button is clicked.
+     */
+    onSpinUp?: VoidFunction;
+    /**
+     * Callback when spinner down button is clicked.
+     */
+    onSpinDown?: VoidFunction;
+};
+/**
+ * 6. Action Input - Input with action button (button is adjacent to TextField, not inside)
+ */
+export type ActionInputProps = InputBaseProps & {
+    variant: 'action';
+    /**
+     * The action button props.
+     */
+    actionButton: ActionButtonProps & {
+        position: 'prefix' | 'suffix';
     };
+};
+/**
+ * 7. Select Input - Input with select button (button is adjacent to TextField, not inside)
+ */
+export type SelectInputProps = InputBaseProps & {
+    variant: 'select';
     /**
-     * The value of input.
+     * The select button props.
      */
-    value?: string;
-}
+    selectButton: SelectButtonProps & {
+        position: 'prefix' | 'suffix' | 'both';
+    };
+};
+/**
+ * 8. Password Input - Password input with visibility toggle
+ */
+export type WithPasswordStrengthIndicator = {
+    /**
+     * Whether to show password strength indicator.
+     */
+    showPasswordStrengthIndicator?: false;
+    passwordStrengthIndicator?: never;
+} | {
+    /**
+     * Whether to show password strength indicator.
+     */
+    showPasswordStrengthIndicator: true;
+    /**
+     * The props for password strength indicator.
+     */
+    passwordStrengthIndicator: PasswordStrengthIndicatorProps;
+};
+export type PasswordInputProps = InputBaseProps & ClearableInput & WithPasswordStrengthIndicator & {
+    variant: 'password';
+};
+export type InputProps = BaseInputProps | WithAffixInputProps | SearchInputProps | NumberInputProps | UnitInputProps | ActionInputProps | SelectInputProps | PasswordInputProps;
 /**
  * The react component for `mezzanine` input.
  */