@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.styled.js

@@ -0,0 +1,87 @@
+import Close from "@mui/icons-material/Close";
+import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
+import { Box, CircularProgress, FilledInput, FormHelperText, IconButton, Input, InputLabel, ListSubheader, OutlinedInput, Paper, Popper, TextField, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import React from "react";
+import { VIREO_FORM_AUTOCOMPLETE_FIELD_NAME } from "./VireoFormAutocompleteField.identity.js";
+const options = (slot) => ({
+    name: VIREO_FORM_AUTOCOMPLETE_FIELD_NAME,
+    slot,
+    overridesResolver: (_props, styles) => styles[slot.charAt(0).toLowerCase() + slot.slice(1)],
+});
+export const VireoFormAutocompleteFieldRoot = styled(Box, {
+    name: VIREO_FORM_AUTOCOMPLETE_FIELD_NAME,
+    slot: "Root",
+    overridesResolver: ({ ownerState }, styles) => [
+        styles.root,
+        ownerState.disabled && styles.disabled,
+        ownerState.readOnly && styles.readOnly,
+        ownerState.required && styles.required,
+        ownerState.error && styles.error,
+        ownerState.focused && styles.focused,
+        ownerState.dirty && styles.dirty,
+        ownerState.touched && styles.touched,
+        ownerState.submitting && styles.submitting,
+        ownerState.validating && styles.validating,
+        ownerState.open && styles.open,
+        ownerState.loading && styles.loading,
+        ownerState.hasValue && styles.hasValue,
+        ownerState.hasInputValue && styles.hasInputValue,
+        ownerState.hasUnresolvedValue && styles.hasUnresolvedValue,
+    ],
+})({ minWidth: 0 });
+export const VireoFormAutocompleteFieldTextField = styled(TextField, options("TextField"))({});
+export const VireoFormAutocompleteFieldInputLabel = styled(InputLabel, options("InputLabel"))({});
+export const VireoFormAutocompleteFieldOutlinedInput = styled(OutlinedInput, options("Input"))({});
+export const VireoFormAutocompleteFieldFilledInput = styled(FilledInput, options("Input"))({});
+export const VireoFormAutocompleteFieldStandardInput = styled(Input, options("Input"))({});
+export const VireoFormAutocompleteFieldLoadingIndicator = styled(CircularProgress, options("LoadingIndicator"))({});
+export const VireoFormAutocompleteFieldClearButton = styled(IconButton, options("ClearButton"))({});
+export const VireoFormAutocompleteFieldClearIcon = styled(Close, options("ClearIcon"))({});
+export const VireoFormAutocompleteFieldPopupButton = styled(IconButton, options("PopupButton"))({});
+export const VireoFormAutocompleteFieldPopupIcon = styled(ArrowDropDown, options("PopupIcon"))({});
+export const VireoFormAutocompleteFieldFormHelperText = styled(FormHelperText, options("FormHelperText"))({});
+const VireoFormAutocompleteFieldStyledPopper = styled(Popper, options("Popper"))(({ theme }) => ({ zIndex: theme.zIndex.modal }));
+const VireoFormAutocompleteFieldStyledPaper = styled(Paper, options("Paper"))(({ theme }) => ({ ...theme.typography.body1, overflow: "auto" }));
+export const VireoFormAutocompleteFieldPopper = React.forwardRef(function VireoFormAutocompleteFieldPopper(props, ref) {
+    return React.createElement(VireoFormAutocompleteFieldStyledPopper, { ...props, ref });
+});
+export const VireoFormAutocompleteFieldPaper = React.forwardRef(function VireoFormAutocompleteFieldPaper(props, ref) {
+    return React.createElement(VireoFormAutocompleteFieldStyledPaper, { ...props, ref });
+});
+export const VireoFormAutocompleteFieldLoadingText = styled("div", options("LoadingText"))({});
+export const VireoFormAutocompleteFieldNoOptionsText = styled("div", options("NoOptionsText"))({});
+const VireoFormAutocompleteFieldStyledListbox = styled("ul", options("Listbox"))({
+    listStyle: "none",
+    margin: 0,
+    maxHeight: "40vh",
+    overflow: "auto",
+    padding: "8px 0",
+    position: "relative",
+});
+export const VireoFormAutocompleteFieldListbox = React.forwardRef(function VireoFormAutocompleteFieldListbox(props, ref) {
+    return React.createElement(VireoFormAutocompleteFieldStyledListbox, { ...props, ref });
+});
+export const VireoFormAutocompleteFieldOption = styled("li", options("Option"))(({ theme }) => ({
+    alignItems: "center",
+    boxSizing: "border-box",
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "flex-start",
+    minHeight: 48,
+    outline: 0,
+    overflow: "hidden",
+    padding: "6px 16px",
+    WebkitTapHighlightColor: "transparent",
+    [theme.breakpoints.up("sm")]: { minHeight: "auto" },
+    "&.Mui-focused": { backgroundColor: theme.palette.action.hover },
+    "&.Mui-focusVisible": { backgroundColor: theme.palette.action.focus },
+    '&[aria-disabled="true"]': {
+        opacity: theme.palette.action.disabledOpacity,
+        pointerEvents: "none",
+    },
+    '&[aria-selected="true"]': { backgroundColor: theme.palette.action.selected },
+}));
+export const VireoFormAutocompleteFieldGroup = styled("li", options("Group"))({ listStyle: "none" });
+export const VireoFormAutocompleteFieldGroupLabel = styled(ListSubheader, options("GroupLabel"))(({ theme }) => ({ backgroundColor: theme.palette.background.paper, top: -8 }));
+export const VireoFormAutocompleteFieldGroupList = styled("ul", options("GroupList"))({ margin: 0, padding: 0, "& .MuiAutocomplete-option": { paddingLeft: 24 } });

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.types.d.ts

@@ -0,0 +1,159 @@
+import type { VireoFormErrorDisplay, VireoFormErrorFormatter } from "../../../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { AutocompleteProps, Box, CircularProgress, FormHelperText, IconButton, InputLabel, ListSubheader, Paper, Popper, TextField, TextFieldProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import type { VireoFormAutocompleteFieldClasses, VireoFormAutocompleteFieldClassKey } from "./VireoFormAutocompleteField.classes.js";
+import type { VIREO_FORM_AUTOCOMPLETE_FIELD_NAME } from "./VireoFormAutocompleteField.identity.js";
+export type VireoFormAutocompleteFieldValue = string | number;
+export type VireoFormAutocompleteFieldInputChangeReason = "input" | "reset" | "clear" | "blur" | "selectOption" | "removeOption";
+export type VireoFormAutocompleteFieldSelection<TOption, TValue extends VireoFormAutocompleteFieldValue> = {
+    value: TValue;
+    label: string;
+    resolved: boolean;
+    option: TOption | null;
+};
+export type VireoFormAutocompleteFieldValueChangeDetails<TOption, TValue extends VireoFormAutocompleteFieldValue> = {
+    reason: "selectOption";
+    option: TOption;
+    value: TValue;
+} | {
+    reason: "clear";
+    previousValue: TValue | null;
+};
+export type VireoFormAutocompleteFieldRenderOptionState = {
+    inputValue: string;
+    selected: boolean;
+    disabled: boolean;
+    index: number;
+};
+export type VireoFormAutocompleteFieldFilterState = {
+    inputValue: string;
+};
+export type VireoFormAutocompleteFieldOwnerState = {
+    dirty: boolean;
+    disabled: boolean;
+    error: boolean;
+    focused: boolean;
+    hasInputValue: boolean;
+    hasUnresolvedValue: boolean;
+    hasValue: boolean;
+    loading: boolean;
+    open: boolean;
+    readOnly: boolean;
+    required: boolean;
+    submitting: boolean;
+    touched: boolean;
+    validating: boolean;
+};
+export interface VireoFormAutocompleteFieldSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoFormAutocompleteFieldSlots = {
+    root: React.ElementType;
+    textField: React.ElementType;
+    inputLabel: React.ElementType;
+    input: React.ElementType;
+    htmlInput: React.ElementType;
+    loadingIndicator: React.ElementType;
+    clearButton: React.ElementType;
+    clearIcon: React.ElementType;
+    popupButton: React.ElementType;
+    popupIcon: React.ElementType;
+    formHelperText: React.ElementType;
+    popper: React.ElementType;
+    paper: React.ElementType;
+    loadingText: React.ElementType;
+    noOptionsText: React.ElementType;
+    listbox: React.ElementType;
+    option: React.ElementType;
+    group: React.ElementType;
+    groupLabel: React.ElementType;
+    groupList: React.ElementType;
+};
+type CommonSlotProps<T extends React.ElementType> = SlotProps<T, VireoFormAutocompleteFieldSlotPropsOverrides, VireoFormAutocompleteFieldOwnerState>;
+export type VireoFormAutocompleteFieldSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoFormAutocompleteFieldSlots, {
+    root: CommonSlotProps<typeof Box>;
+    textField: CommonSlotProps<typeof TextField>;
+    inputLabel: CommonSlotProps<typeof InputLabel>;
+    input: CommonSlotProps<"div">;
+    htmlInput: CommonSlotProps<"input">;
+    loadingIndicator: CommonSlotProps<typeof CircularProgress>;
+    clearButton: CommonSlotProps<typeof IconButton>;
+    clearIcon: CommonSlotProps<"svg">;
+    popupButton: CommonSlotProps<typeof IconButton>;
+    popupIcon: CommonSlotProps<"svg">;
+    formHelperText: CommonSlotProps<typeof FormHelperText>;
+    popper: CommonSlotProps<typeof Popper>;
+    paper: CommonSlotProps<typeof Paper>;
+    loadingText: CommonSlotProps<"div">;
+    noOptionsText: CommonSlotProps<"div">;
+    listbox: CommonSlotProps<"ul">;
+    option: CommonSlotProps<"li">;
+    group: CommonSlotProps<"li">;
+    groupLabel: CommonSlotProps<typeof ListSubheader>;
+    groupList: CommonSlotProps<"ul">;
+}>;
+type OwnedAutocompleteProp = "clearIcon" | "defaultValue" | "disabled" | "disableClearable" | "filterOptions" | "freeSolo" | "getOptionDisabled" | "getOptionKey" | "getOptionLabel" | "groupBy" | "inputValue" | "isOptionEqualToValue" | "onHighlightChange" | "loading" | "loadingText" | "multiple" | "noOptionsText" | "onBlur" | "onChange" | "onInputChange" | "options" | "onClose" | "onOpen" | "open" | "readOnly" | "renderGroup" | "renderInput" | "renderOption" | "renderTags" | "renderValue" | "slotProps" | "slots" | "value";
+export type VireoFormAutocompleteFieldInheritedProps<TOption> = Omit<AutocompleteProps<TOption, false, false, false>, OwnedAutocompleteProp>;
+type FilterContract<TOption> = {
+    filterMode?: "client";
+    filterOptions?: (options: readonly TOption[], state: VireoFormAutocompleteFieldFilterState) => readonly TOption[];
+} | {
+    filterMode: "server";
+    filterOptions?: never;
+};
+export type VireoFormAutocompleteFieldOwnProps<TOption, TValue extends VireoFormAutocompleteFieldValue> = VireoFormAutocompleteFieldSlotsAndSlotProps & FilterContract<TOption> & {
+    label: React.ReactNode;
+    options: readonly TOption[];
+    getOptionValue: (option: TOption) => TValue;
+    getOptionLabel: (option: TOption) => string;
+    getOptionDisabled?: (option: TOption) => boolean;
+    renderOption?: (option: TOption, state: VireoFormAutocompleteFieldRenderOptionState) => React.ReactNode;
+    selectedOption?: TOption;
+    getUnresolvedValueLabel?: (value: TValue) => string;
+    groupBy?: (option: TOption) => string;
+    renderGroupLabel?: (group: string) => React.ReactNode;
+    classes?: Partial<VireoFormAutocompleteFieldClasses>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    error?: boolean;
+    errorDisplay?: VireoFormErrorDisplay;
+    formatError?: VireoFormErrorFormatter;
+    /** Defaults to a reserved line; pass `null` to remove it. @default ' ' */
+    helperText?: React.ReactNode;
+    fullWidth?: boolean;
+    placeholder?: string;
+    variant?: TextFieldProps["variant"];
+    size?: TextFieldProps["size"];
+    color?: TextFieldProps["color"];
+    margin?: TextFieldProps["margin"];
+    inputRef?: React.Ref<HTMLInputElement>;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onInputValueChange?: (value: string, reason: VireoFormAutocompleteFieldInputChangeReason) => void;
+    onValueChange?: (value: TValue | null, details: VireoFormAutocompleteFieldValueChangeDetails<TOption, TValue>) => void;
+    loading?: boolean;
+    loadingText?: React.ReactNode;
+    noOptionsText?: React.ReactNode;
+    disableClearable?: boolean;
+    clearOnEscape?: boolean;
+    clearLabel?: string;
+    openLabel?: string;
+    closeLabel?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: NonNullable<AutocompleteProps<TOption, false, false, false>["onClose"]>;
+    clearIcon?: React.ReactNode;
+    popupIcon?: React.ReactNode;
+};
+export type VireoFormAutocompleteFieldProps<TOption = unknown, TValue extends VireoFormAutocompleteFieldValue = VireoFormAutocompleteFieldValue> = VireoFormAutocompleteFieldOwnProps<TOption, TValue> & VireoFormAutocompleteFieldInheritedProps<TOption>;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_FORM_AUTOCOMPLETE_FIELD_NAME]?: VireoThemeComponent<VireoFormAutocompleteFieldProps, VireoFormAutocompleteFieldClassKey, VireoFormAutocompleteFieldOwnerState, Theme>;
+    }
+}
+export {};

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.types.js

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

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteField/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoFormAutocompleteField.js";
+export * from "./VireoFormAutocompleteField.classes.js";
+export * from "./VireoFormAutocompleteField.types.js";

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteField/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoFormAutocompleteField.js";
+export * from "./VireoFormAutocompleteField.classes.js";
+export * from "./VireoFormAutocompleteField.types.js";

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoFormAutocompleteMultipleFieldSlotName, type VireoFormAutocompleteMultipleFieldStateName } from "./VireoFormAutocompleteMultipleField.identity.js";
+/** Utility classes available to VireoFormAutocompleteMultipleField. */
+export type VireoFormAutocompleteMultipleFieldClasses = Record<VireoFormAutocompleteMultipleFieldSlotName | VireoFormAutocompleteMultipleFieldStateName, string>;
+/** Valid keys for VireoFormAutocompleteMultipleField utility classes and theme style overrides. */
+export type VireoFormAutocompleteMultipleFieldClassKey = keyof VireoFormAutocompleteMultipleFieldClasses;
+/** Returns the generated utility class name for a VireoFormAutocompleteMultipleField slot or state. */
+export declare function getVireoFormAutocompleteMultipleFieldUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoFormAutocompleteMultipleField class key. */
+export declare const vireoFormAutocompleteMultipleFieldClasses: VireoFormAutocompleteMultipleFieldClasses;

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME, VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS, VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_STATES, } from "./VireoFormAutocompleteMultipleField.identity.js";
+/** Returns the generated utility class name for a VireoFormAutocompleteMultipleField slot or state. */
+export function getVireoFormAutocompleteMultipleFieldUtilityClass(slot) {
+    return generateUtilityClass(VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoFormAutocompleteMultipleField class key. */
+export const vireoFormAutocompleteMultipleFieldClasses = generateUtilityClasses(VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME, [
+    ...VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS,
+    ...VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_STATES,
+]);

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { VireoFormAutocompleteMultipleFieldProps, VireoFormAutocompleteMultipleFieldValue } from "./VireoFormAutocompleteMultipleField.types.js";
+type Component = <TOption, TValue extends VireoFormAutocompleteMultipleFieldValue>(props: VireoFormAutocompleteMultipleFieldProps<TOption, TValue> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const VireoFormAutocompleteMultipleField: Component;
+export {};

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.identity.d.ts

@@ -0,0 +1,5 @@
+export declare const VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME = "VireoFormAutocompleteMultipleField";
+export declare const VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS: readonly ["root", "textField", "inputLabel", "input", "htmlInput", "loadingIndicator", "clearButton", "clearIcon", "popupButton", "popupIcon", "formHelperText", "popper", "paper", "loadingText", "noOptionsText", "listbox", "option", "group", "groupLabel", "groupList", "selectedOptions", "selectedOption", "selectedOptionDeleteIcon", "hiddenOptionsButton", "optionCheckbox"];
+export declare const VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_STATES: readonly ["disabled", "readOnly", "required", "error", "focused", "dirty", "touched", "submitting", "validating", "open", "loading", "hasValue", "hasInputValue", "hasUnresolvedValue", "atSelectionLimit", "hasHiddenOptions"];
+export type VireoFormAutocompleteMultipleFieldSlotName = (typeof VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS)[number];
+export type VireoFormAutocompleteMultipleFieldStateName = (typeof VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_STATES)[number];

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.identity.js

@@ -0,0 +1,46 @@
+export const VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME = "VireoFormAutocompleteMultipleField";
+export const VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS = [
+    "root",
+    "textField",
+    "inputLabel",
+    "input",
+    "htmlInput",
+    "loadingIndicator",
+    "clearButton",
+    "clearIcon",
+    "popupButton",
+    "popupIcon",
+    "formHelperText",
+    "popper",
+    "paper",
+    "loadingText",
+    "noOptionsText",
+    "listbox",
+    "option",
+    "group",
+    "groupLabel",
+    "groupList",
+    "selectedOptions",
+    "selectedOption",
+    "selectedOptionDeleteIcon",
+    "hiddenOptionsButton",
+    "optionCheckbox",
+];
+export const VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_STATES = [
+    "disabled",
+    "readOnly",
+    "required",
+    "error",
+    "focused",
+    "dirty",
+    "touched",
+    "submitting",
+    "validating",
+    "open",
+    "loading",
+    "hasValue",
+    "hasInputValue",
+    "hasUnresolvedValue",
+    "atSelectionLimit",
+    "hasHiddenOptions",
+];