@vertigis/react-ui 9.14.0 → 10.2.0

package/AdapterDateFns/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/AdapterDateFns";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+export default AdapterDateFns;

package/AdapterDateFns/index.js

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/AdapterDateFns";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+export default AdapterDateFns;

package/AdapterLuxon/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/AdapterLuxon";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+export default AdapterLuxon;

package/AdapterLuxon/index.js

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/AdapterLuxon";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+export default AdapterLuxon;

package/AdapterMoment/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/AdapterMoment";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+export default AdapterMoment;

package/AdapterMoment/index.js

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/AdapterMoment";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+export default AdapterMoment;

package/Checkbox/Checkbox.d.ts

@@ -1,5 +1,6 @@
-import { ButtonBaseClasses } from "@mui/material/ButtonBase";
-import Checkbox, { CheckboxProps as MUICheckboxProps, CheckboxClasses as MUICheckboxClasses } from "@mui/material/Checkbox";
+import type { ButtonBaseClasses } from "@mui/material/ButtonBase";
+import type { CheckboxProps as MUICheckboxProps, CheckboxClasses as MUICheckboxClasses } from "@mui/material/Checkbox";
+import Checkbox from "@mui/material/Checkbox";
 export * from "@mui/material/Checkbox";
 export interface CheckboxClasses extends MUICheckboxClasses, ButtonBaseClasses {
 }

package/ColorInput/ColorInput.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import type { BoxProps } from "@mui/material/Box";
+import type { SketchPickerStylesProps } from "react-color/lib/components/sketch/Sketch";
+import type { ButtonProps } from "../Button/index.js";
+export declare const colorInputClasses: {
+    root: string;
+    pickerButton: string;
+    pickerButtonBackground: string;
+    pickerButtonColor: string;
+    popoverPaper: string;
+};
+export interface SketchColorPreset {
+    /**
+     * A valid hex string color.
+     */
+    color: string;
+    /**
+     * A title representing the color preset.
+     */
+    title: string;
+}
+export declare type ColorInputClassKey = keyof typeof colorInputClasses;
+export declare type ColorInputClasses = Record<ColorInputClassKey, string>;
+export interface ColorInputProps extends Omit<BoxProps, "onChange"> {
+    /**
+     * Optional button props
+     */
+    ButtonProps?: ButtonProps;
+    /**
+     * Additional CSS classes to be applied to the component.
+     */
+    classes?: Partial<ColorInputClasses>;
+    /**
+     * If `true`, the input will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Will be called every time the value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Array of hex strings or color preset objects or a combination of both to
+     * be shown in the color swatch area.
+     */
+    presetColors?: (string | SketchColorPreset)[];
+    /**
+     * Style overrides for the react-color SketchPicker.
+     */
+    sketchPickerStyle?: Partial<SketchPickerStylesProps>;
+    /**
+     * The color value. This can be any valid CSS color value such as: `blue`,
+     * `#0000FF`, `rgb(0, 0, 255)`, `rgba(0, 0, 255, 0.5)`
+     */
+    value?: string;
+}
+export declare const ColorInput: import("react").ForwardRefExoticComponent<Pick<ColorInputProps, "id" | "dir" | "p" | "slot" | "style" | "title" | "resource" | "results" | "role" | "key" | "value" | "classes" | "color" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "zIndex" | "typography" | "fontFamily" | "fontSize" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "component" | "ButtonProps" | "presetColors" | "sketchPickerStyle"> & import("react").RefAttributes<HTMLDivElement>>;
+export default ColorInput;

package/ColorInput/ColorInput.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { useFormControl } from "@mui/material/FormControl";
+import clsx from "clsx";
+import { forwardRef, useState } from "react";
+import { SketchPicker } from "react-color";
+import Button from "../Button/index.js";
+import Popover from "../Popover/index.js";
+import { mergeStyles, styled, useTheme } from "../styles/index.js";
+import { parse as parseColor } from "../utils/color.js";
+const PREFIX = "GcxColorInput";
+export const colorInputClasses = {
+    root: `${PREFIX}-root`,
+    pickerButton: `${PREFIX}-pickerButton`,
+    pickerButtonBackground: `${PREFIX}-pickerButtonBackground`,
+    pickerButtonColor: `${PREFIX}-pickerButtonColor`,
+    popoverPaper: `${PREFIX}-popoverPaper`,
+};
+const defaultRgbColor = {
+    r: 255,
+    g: 255,
+    b: 255,
+    alpha: 1,
+};
+const defaultColors = [
+    "#1479CB",
+    "#008A00",
+    "#5B7F39",
+    "#D43900",
+    "#8667AD",
+    "#C9493C",
+    "#0D8387",
+    "#D025B9",
+];
+const Root = styled(Box)(({ theme: { palette, shape, typography } }) => ({
+    [`& .${colorInputClasses.pickerButton}`]: {
+        border: "none",
+        margin: 0,
+        // Reset button's min-width.
+        minWidth: "unset",
+        padding: typography.pxToRem(8),
+    },
+    [`& .${colorInputClasses.pickerButtonBackground}`]: {
+        // Background: https://css-tricks.com/stripes-css/
+        background: `repeating-linear-gradient(
+                            135deg,
+                            ${palette.grey[600]},
+                            ${palette.grey[600]} 10px,
+                            ${palette.common.white} 10px,
+                            ${palette.common.white} 20px
+                        )`,
+    },
+    [`& .${colorInputClasses.pickerButtonColor}`]: {
+        height: typography.pxToRem(20),
+        width: typography.pxToRem(76),
+    },
+    [`& .${colorInputClasses.popoverPaper}`]: {
+        padding: 0,
+        "& .sketch-picker input": {
+            backgroundColor: "transparent",
+            borderRadius: shape.borderRadius,
+            color: palette.text.primary,
+            textAlign: "center",
+        },
+        "& .sketch-picker span": {
+            color: `${palette.text.primary} !important`,
+        },
+    },
+}));
+export const ColorInput = forwardRef(function ColorInput({ ButtonProps, className, classes: classesProp, disabled, presetColors, onChange, value: unsanitizedValue, sketchPickerStyle = {}, ...others }, ref) {
+    const theme = useTheme();
+    const [buttonEl, setButtonEl] = useState();
+    const handleColorPopoverOpen = (event) => setButtonEl(event.currentTarget);
+    const handleColorPopoverClose = () => setButtonEl(undefined);
+    const handleColorPickerChangeComplete = (newColor) => {
+        const validatedColor = parseColor(newColor.rgb);
+        if (validatedColor) {
+            onChange?.(validatedColor.rgb().string());
+        }
+    };
+    // Careful. `useFormControl` can return undefined.
+    // See https://github.com/mui-org/material-ui/pull/20278.
+    const muiFormControl = useFormControl();
+    // `RGB(0,0,0)` will fail, we should instead convert to `rgb(0,0,0)`
+    const value = unsanitizedValue && unsanitizedValue.toLowerCase();
+    // Color allows us to easily convert between different color types
+    const color = parseColor(value);
+    // The rgb object will be used for passing values to the color picker component
+    const rgb = color ? color.rgb().object() : defaultRgbColor;
+    const classes = mergeStyles(colorInputClasses, classesProp);
+    return (_jsxs(Root, Object.assign({ className: clsx(classes.root, className) }, others, { ref: ref }, { children: [_jsx(Button, Object.assign({}, ButtonProps, { disabled: disabled ?? muiFormControl?.disabled, className: classes.pickerButton, "data-test": "ColorInput-picker-button", onClick: handleColorPopoverOpen }, { children: _jsx("div", Object.assign({ className: classes.pickerButtonBackground }, { children: _jsx("div", { className: classes.pickerButtonColor, "data-test": "ColorInput-picker-button-color", style: {
+                            // The rgb CSS string will be used for styling the color picker button
+                            background: color ? color.rgb().string() : "transparent",
+                        } }, void 0) }), void 0) }), void 0), _jsx(Popover, Object.assign({ anchorEl: buttonEl, open: !!buttonEl, anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "left",
+                }, transformOrigin: {
+                    vertical: "top",
+                    horizontal: "left",
+                }, onClose: handleColorPopoverClose, PaperProps: {
+                    classes: { root: classes.popoverPaper },
+                    // Workaround for type error. This is valid and gets passed through.
+                    [`${"data-test"}`]: "ColorInput-color-picker",
+                } }, { children: _jsx(SketchPicker
+                // The color object that the picker expects uses key `a` instead of `alpha`
+                , { 
+                    // The color object that the picker expects uses key `a` instead of `alpha`
+                    color: {
+                        r: rgb.r,
+                        g: rgb.g,
+                        b: rgb.b,
+                        a: rgb.alpha,
+                    }, onChangeComplete: handleColorPickerChangeComplete, presetColors: presetColors || defaultColors, styles: {
+                        default: {
+                            picker: {
+                                background: theme.palette.background.paper,
+                            },
+                            ...sketchPickerStyle,
+                        },
+                    } }, void 0) }), void 0)] }), void 0));
+});
+export default ColorInput;

package/ColorInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ColorInput.js";
+export * from "./ColorInput.js";

package/ColorInput/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ColorInput.js";
+export * from "./ColorInput.js";

package/CopyableText/CopyableText.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import type { InputProps as InputPropsType } from "../Input/index.js";
+import type { StackProps } from "../Stack/index.js";
+export declare const copyableTextClasses: {
+    root: string;
+    input: string;
+    inputRoot: string;
+    iconButton: string;
+};
+export declare type CopyableTextClassKey = keyof typeof copyableTextClasses;
+export declare type CopyableTextClasses = Record<CopyableTextClassKey, string>;
+export interface CopyableTextProps extends StackProps {
+    /**
+     * Additional CSS classes to be applied to the component.
+     */
+    classes?: Partial<CopyableTextClasses>;
+    /**
+     * Props for the input component.
+     */
+    InputProps?: Partial<InputPropsType>;
+    /**
+     * The text displayed when the text is copied.
+     */
+    tooltipCopiedText: string;
+    /**
+     * The text displayed when hovering over the copy button.
+     */
+    tooltipCopyText: string;
+    /**
+     * The text displayed in the input.
+     */
+    value: string | undefined;
+}
+declare const CopyableText: import("react").ForwardRefExoticComponent<Pick<CopyableTextProps, "id" | "dir" | "p" | "slot" | "style" | "title" | "resource" | "results" | "role" | "key" | "value" | "classes" | "color" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "zIndex" | "direction" | "spacing" | "typography" | "fontFamily" | "fontSize" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "divider" | "InputProps" | "tooltipCopiedText" | "tooltipCopyText"> & import("react").RefAttributes<unknown>>;
+export default CopyableText;

package/CopyableText/CopyableText.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useRef, useState } from "react";
+import Button from "../Button/index.js";
+import Input from "../Input/index.js";
+import Stack from "../Stack/index.js";
+import Tooltip from "../Tooltip/index.js";
+import CopyIcon from "../icons/Copy.js";
+import { mergeStyles, styled } from "../styles/index.js";
+import { mergeRefs } from "../utils/react.js";
+const PREFIX = "GcxCopyableText";
+export const copyableTextClasses = {
+    root: `${PREFIX}-root`,
+    input: `${PREFIX}-input`,
+    inputRoot: `${PREFIX}-inputRoot`,
+    iconButton: `${PREFIX}-iconButton`,
+};
+const StyledStack = styled(Stack)(({ theme: { typography } }) => ({
+    [`& .${copyableTextClasses.input}`]: {
+        width: "100%",
+    },
+    [`& .${copyableTextClasses.inputRoot}`]: {
+        flex: 1,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+    },
+    [`& .${copyableTextClasses.iconButton}`]: {
+        minWidth: "unset",
+        width: typography.pxToRem(16),
+        borderLeft: "none",
+        margin: 0,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+    },
+}));
+const CopyableText = forwardRef((props, ref) => {
+    const localRef = useRef();
+    const [open, setOpen] = useState(false);
+    const [showClickedMessage, setShowClickedMessage] = useState(false);
+    const handleTooltipClose = () => setOpen(false);
+    const handleTooltipOpen = () => {
+        // Because this is hooked up internally to a mouseEnter event in
+        // Tooltip, this can get fired multiple times when the user is moving
+        // their mouse within the button. showClickedMessage should get set to
+        // false when the user is re-entering the button, otherwise it should
+        // keep its value.
+        setOpen(true);
+        setShowClickedMessage(open && showClickedMessage);
+    };
+    const handleMouseDown = (e) => {
+        // We need to call preventDefault() because otherwise the mousedown will
+        // fire a Blur event which triggers Tooltip's onClose which will close
+        // the tooltip (as per the logic in handleTooltipClose()). As we dont
+        // want the tooltip to close when the button is clicked, we need to stop
+        // the propagation of this event.
+        e.preventDefault();
+    };
+    const handleCopyUrl = async (e) => {
+        if (!localRef.current) {
+            return;
+        }
+        await navigator.clipboard.writeText(value ?? "");
+        setShowClickedMessage(true);
+    };
+    const { classes: classesProp, className, InputProps = {}, tooltipCopiedText, tooltipCopyText, value, ...other } = props;
+    const { classes: inputPropsClasses = {}, inputProps, ...otherInputProps } = InputProps;
+    const { root, input, ...otherClasses } = inputPropsClasses;
+    const classes = mergeStyles(copyableTextClasses, classesProp);
+    return (_jsxs(StyledStack, Object.assign({ direction: "row", className: clsx(classes.root, className) }, other, { children: [_jsx(Input, Object.assign({ classes: {
+                    root: clsx(classes.inputRoot, root),
+                    input: clsx(classes.input, input),
+                    ...otherClasses,
+                }, inputProps: {
+                    readOnly: true,
+                    "data-test": "CopyableText-Input",
+                    ...inputProps,
+                }, inputRef: mergeRefs(ref, localRef), value: value || "", "data-test": "CopyableText-Input-Wrapper" }, otherInputProps), void 0), _jsx(Tooltip, Object.assign({ "data-test": "CopyableText-Tooltip", open: open, onOpen: handleTooltipOpen, onClose: handleTooltipClose, title: showClickedMessage ? tooltipCopiedText : tooltipCopyText, placement: "bottom" }, { children: _jsx(Button, Object.assign({ className: classes.iconButton, "data-test": "CopyableText-IconButton", disabled: !value, onClick: handleCopyUrl, onMouseDown: handleMouseDown }, { children: _jsx(CopyIcon, {}, void 0) }), void 0) }), void 0)] }), void 0));
+});
+CopyableText.displayName = "CopyableText";
+export default CopyableText;

package/CopyableText/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CopyableText.js";
+export * from "./CopyableText.js";

package/CopyableText/index.js

@@ -0,0 +1,2 @@
+export { default } from "./CopyableText.js";
+export * from "./CopyableText.js";

package/DataGrid/index.d.ts

@@ -0,0 +1 @@
+export * from "@mui/x-data-grid-pro";

package/DataGrid/index.js

@@ -0,0 +1 @@
+export * from "@mui/x-data-grid-pro";

package/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/DatePicker";
+import { DatePicker } from "@mui/x-date-pickers-pro";
+export default DatePicker;

package/DatePicker/index.js

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/DatePicker";
+import { DatePicker } from "@mui/x-date-pickers-pro";
+export default DatePicker;

package/DateRangePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers-pro/DateRangePicker";
+import { DateRangePicker } from "@mui/x-date-pickers-pro";
+export default DateRangePicker;

package/DateRangePicker/index.js

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers-pro/DateRangePicker";
+import { DateRangePicker } from "@mui/x-date-pickers-pro";
+export default DateRangePicker;

package/DateTimePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/DateTimePicker";
+import { DateTimePicker } from "@mui/x-date-pickers-pro";
+export default DateTimePicker;

package/DateTimePicker/index.js

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/DateTimePicker";
+import { DateTimePicker } from "@mui/x-date-pickers-pro";
+export default DateTimePicker;

package/FormControl/FormControl.d.ts

@@ -0,0 +1,42 @@
+import type { FormControlClasses as MUIFormControlClasses, FormControlProps as MUIFormControlProps } from "@mui/material/FormControl";
+import type { ReactNode } from "react";
+export * from "@mui/material/FormControl";
+declare const gcxFormControlClasses: {
+    inlineHelp: string;
+};
+export declare const formControlClasses: {
+    inlineHelp: string;
+    root: string;
+    marginNormal: string;
+    marginDense: string;
+    fullWidth: string;
+};
+export declare type FormControlClasses = MUIFormControlClasses & Record<keyof typeof gcxFormControlClasses, string>;
+export declare type FormControlClassKey = keyof FormControlClasses;
+export interface FormControlProps extends Omit<MUIFormControlProps, "classes"> {
+    /**
+     * Additional CSS classes to be applied to the component.
+     */
+    classes?: Partial<FormControlClasses>;
+    /**
+     * The content of the inline help to display for the field. If the content
+     * is not provided, an inline help component will not be shown.
+     */
+    inlineHelpContent?: ReactNode;
+    /**
+     * The title to display on hover of the InlineHelp
+     */
+    inlineHelpTitle?: string;
+    /**
+     * The link displayed in the inline help.
+     */
+    inlineHelpUrl?: {
+        label: string;
+        href: string;
+    };
+}
+/**
+ * A simple extension for a Form Control that includes inline help.
+ */
+declare const FormControl: import("react").ForwardRefExoticComponent<Pick<FormControlProps, "error" | "id" | "dir" | "slot" | "style" | "title" | "resource" | "results" | "role" | "key" | "classes" | "color" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "required" | "size" | "margin" | "fullWidth" | "variant" | "hiddenLabel" | "focused" | "inlineHelpContent" | "inlineHelpTitle" | "inlineHelpUrl"> & import("react").RefAttributes<HTMLDivElement>>;
+export default FormControl;

package/FormControl/FormControl.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MUIFormControl, { formControlClasses as muiFormControlClasses, } from "@mui/material/FormControl";
+import InlineHelp from "@vertigis/react-ui/InlineHelp/index.js";
+import { styled, mergeStyles } from "@vertigis/react-ui/styles";
+import { forwardRef } from "react";
+// MUST be the first export, since some of the exports are overridden below.
+export * from "@mui/material/FormControl";
+const PREFIX = "GcxFormControl";
+const gcxFormControlClasses = {
+    inlineHelp: `${PREFIX}-inlineHelp`,
+};
+export const formControlClasses = {
+    ...muiFormControlClasses,
+    ...gcxFormControlClasses,
+};
+const StyledMUIFormControl = styled(MUIFormControl)({
+    [`& .${gcxFormControlClasses.inlineHelp}`]: {
+        position: "absolute",
+        right: 0,
+    },
+});
+/**
+ * A simple extension for a Form Control that includes inline help.
+ */
+const FormControl = forwardRef(function FormControl(props, ref) {
+    const { children, classes, inlineHelpContent, inlineHelpUrl, inlineHelpTitle, ...other } = props;
+    const { inlineHelp: inlineHelpClass, ...otherClasses } = mergeStyles(gcxFormControlClasses, classes);
+    return (_jsxs(StyledMUIFormControl, Object.assign({}, other, { classes: otherClasses, ref: ref }, { children: [children, inlineHelpContent && (_jsx(InlineHelp, Object.assign({ title: inlineHelpTitle, className: inlineHelpClass, url: inlineHelpUrl }, { children: inlineHelpContent }), void 0))] }), void 0));
+});
+export default FormControl;

package/FormControl/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "@mui/material/FormControl";
-export * from "@mui/material/FormControl";
+export { default } from "./FormControl.js";
+export * from "./FormControl.js";

package/FormControl/index.js

@@ -1,2 +1,2 @@
-export { default } from "@mui/material/FormControl";
-export * from "@mui/material/FormControl";
+export { default } from "./FormControl.js";
+export * from "./FormControl.js";

package/FormLabel/FormLabel.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FormLabelClasses as MUIFormLabelClasses, FormLabelProps as MUIFormLabelProps } from "@mui/material/FormLabel";
+import type { FormLabelClasses as MUIFormLabelClasses, FormLabelProps as MUIFormLabelProps } from "@mui/material/FormLabel";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 declare const gcxFormLabelClasses: {
     errorIcon: string;

package/FormLabel/FormLabel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import MUIFormLabel, { formLabelClasses as muiFormLabelClasses, } from "@mui/material/FormLabel";
+import MUIFormLabel, { formLabelClasses as muiFormLabelClasses } from "@mui/material/FormLabel";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { useFormControl } from "../FormControl/index.js";
@@ -27,7 +27,7 @@ export const FormLabel = forwardRef(function FormLabel(props, ref) {
     // Careful. `useFormControl` can return undefined.
     // See https://github.com/mui-org/material-ui/pull/20278.
     const muiFormControl = useFormControl();
-    const error = errorProp !== null && errorProp !== void 0 ? errorProp : muiFormControl === null || muiFormControl === void 0 ? void 0 : muiFormControl.error;
+    const error = errorProp ?? muiFormControl?.error;
     const { errorIcon: errorIconClass, ...otherClasses } = mergeStyles(gcxFormLabelClasses, classes);
     return (_jsxs(StyledMUIFormLabel, Object.assign({ error: error, className: clsx("GcxFormLabel", className) }, other, { classes: otherClasses, ref: ref }, { children: [error && _jsx(ErrorIcon, { className: errorIconClass, "data-test": "FormLabel-ErrorIcon" }, void 0), children] }), void 0));
 });

package/FormLabelTextField/FormLabelTextField.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { TextFieldProps } from "@mui/material/TextField";
+import type { FormControlProps } from "../FormControl/index.js";
+export declare type FormLabelTextFieldProps = Omit<TextFieldProps, "variant"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & {
+    /**
+     * Shortcut for setting both `select` and `native` within SelectProps.
+     */
+    nativeSelect?: boolean;
+};
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
+ * for inline help.
+ */
+declare const FormLabelTextField: import("react").ForwardRefExoticComponent<Pick<FormLabelTextFieldProps, "error" | "select" | "id" | "dir" | "label" | "slot" | "style" | "title" | "type" | "resource" | "results" | "role" | "key" | "value" | "classes" | "color" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "autoFocus" | "name" | "inputProps" | "inputRef" | "required" | "size" | "margin" | "fullWidth" | "autoComplete" | "multiline" | "rows" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "SelectProps" | "inlineHelpContent" | "inlineHelpUrl" | "nativeSelect"> & import("react").RefAttributes<HTMLDivElement>>;
+export default FormLabelTextField;

package/FormLabelTextField/FormLabelTextField.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import FormControl from "../FormControl/index.js";
+import FormHelperText from "../FormHelperText/index.js";
+import FormLabel from "../FormLabel/index.js";
+import Input from "../Input/index.js";
+import Select from "../Select/index.js";
+import { useId } from "../utils/react.js";
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
+ * for inline help.
+ */
+const FormLabelTextField = forwardRef(function FormLabelTextField(props, ref) {
+    const { autoComplete, autoFocus = false, children, defaultValue, FormHelperTextProps, fullWidth = false, helperText, id: idProp, InputLabelProps, inputProps, InputProps, inputRef, label, maxRows, minRows, multiline = false, name, nativeSelect = false, onBlur, onChange, onFocus, placeholder, rows, select = false, SelectProps, type, value, ...other } = props;
+    const id = useId(idProp);
+    const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+    const inputLabelId = label && id ? `${id}-label` : undefined;
+    const inputMoreProps = {};
+    if (select || nativeSelect) {
+        // Unset defaults from textbox inputs.
+        if (!SelectProps || (!SelectProps.native && !nativeSelect)) {
+            inputMoreProps.id = undefined;
+        }
+        inputMoreProps["aria-describedby"] = undefined;
+    }
+    const InputElement = (_jsx(Input, Object.assign({ "aria-describedby": helperTextId, autoComplete: autoComplete, 
+        // Disabling this linting rule since the intent is to forward it
+        // if it exists rather than set it.
+        //
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus: autoFocus, defaultValue: defaultValue, fullWidth: fullWidth, id: id, inputProps: inputProps, inputRef: inputRef, maxRows: maxRows, minRows: minRows, multiline: multiline, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, placeholder: placeholder, rows: rows, type: type, value: value }, inputMoreProps, InputProps), void 0));
+    return (_jsxs(FormControl, Object.assign({ fullWidth: fullWidth, ref: ref }, other, { children: [label && (_jsx(FormLabel, Object.assign({ htmlFor: id, id: inputLabelId }, { children: label }), void 0)), helperText && (_jsx(FormHelperText, Object.assign({ id: helperTextId }, FormHelperTextProps, { children: helperText }), void 0)), select || nativeSelect ? (_jsx(Select, Object.assign({ "aria-describedby": helperTextId, id: id, labelId: inputLabelId, value: value, input: InputElement }, { ...SelectProps, ...(nativeSelect && { native: true }) }, { children: children }), void 0)) : (InputElement)] }), void 0));
+});
+export default FormLabelTextField;