@up42/up-components 9.0.0 → 9.1.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { Fade, Slide, Grow, createTheme, SvgIcon, Alert as Alert$1, AlertTitle, capitalize as capitalize$1, Box, Snackbar, CssBaseline, CircularProgress, Avatar as Avatar$1, Grid, Container, Checkbox as Checkbox$1, FormLabel as FormLabel$1, FormControl, FormGroup, FormControlLabel, FormHelperText, InputAdornment, IconButton, Button as Button$1, Radio as Radio$1, RadioGroup, Switch as Switch$1, Select as Select$1, MenuItem, TextField, Slider as Slider$1, Link as Link$1, Tab as Tab$1, Tabs as Tabs$1, Divider as Divider$1, Card, CardContent, Modal, Tooltip, Popover as Popover$1, Typography as Typography$1, Stack, Badge as Badge$1, Chip, Menu, styled, Autocomplete, Dialog, alpha } from '@mui/material';
+import { Fade, Slide, Grow, createTheme, SvgIcon, Alert as Alert$1, AlertTitle, capitalize as capitalize$1, Box, Snackbar, CssBaseline, CircularProgress, Avatar as Avatar$1, Grid, Container, Checkbox as Checkbox$1, FormLabel as FormLabel$1, FormControl, FormGroup, FormControlLabel, FormHelperText, InputAdornment, IconButton, Button as Button$1, Radio as Radio$1, RadioGroup, Switch as Switch$1, Select as Select$1, MenuItem, TextField, Slider as Slider$1, Link as Link$1, Tab as Tab$1, Tabs as Tabs$1, Divider as Divider$1, Card, CardContent, Modal, Tooltip, Popover as Popover$1, Chip, Autocomplete, Typography as Typography$1, Stack, Badge as Badge$1, Menu, styled, Dialog, alpha } from '@mui/material';
 export * from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
@@ -804,6 +804,20 @@ const MuiSwitch = {
 
 const MuiSlider = {
     styleOverrides: {
+        root: {
+            '& .MuiSlider-markLabel': {
+                fontWeight: tokens.typography.fontWeight.regular,
+                fontSize: tokens.typography.fontSize400,
+                // Target the FIRST element with this specific class and remove the transform
+                '&:nth-child(1 of .MuiSlider-markLabel)': {
+                    transform: 'none',
+                },
+                // Target the LAST element with this specific class and reset the transform
+                '&:nth-last-child(1 of .MuiSlider-markLabel)': {
+                    transform: 'translateX(-100%)',
+                },
+            },
+        },
         rail: {
             height: tokens.size.spacingXS,
             backgroundColor: tokens.color.gray100,
@@ -7000,14 +7014,26 @@ const DEFAULT_HEADER = 'Filters';
  *
  * Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-filterpopover--docs
  */
-const FilterPopover = ({ anchorEl, onClose, header = DEFAULT_HEADER, content, applyButtonLabel = DEFAULT_APPLY_LABEL, clearButtonLabel = DEFAULT_CLEAR_LABEL, disableApplyButton = false, isLoadingCount = false, onApply, onClear, ...popoverProps }) => {
+const FilterPopover = ({ anchorEl, onClose, header = DEFAULT_HEADER, content, applyButtonLabel = DEFAULT_APPLY_LABEL, clearButtonLabel = DEFAULT_CLEAR_LABEL, disableApplyButton = false, isLoadingCount = false, maxContentWidth = '384px', onApply, onClear, ...popoverProps }) => {
     const handleApply = async () => {
         await onApply?.();
     };
     const handleClear = async () => {
         await onClear?.();
     };
-    return (React__default.createElement(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: onClose, header: header, content: content != null ? React__default.createElement(React__default.Fragment, null, content) : undefined, showDividers: true, hideBackdrop: true, disableEnforceFocus: true, disableScrollLock: true, sx: {
+    return (React__default.createElement(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: onClose, header: header, content: content && content.length > 0 ? (React__default.createElement(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: tokens.size.spacing.scale16,
+                maxWidth: maxContentWidth,
+                '& .MuiSlider-root': {
+                    display: 'flex',
+                    width: '90%',
+                    mx: 'auto',
+                },
+            } }, content.map((item, index) => (React__default.createElement(React__default.Fragment, { key: index },
+            item,
+            index < content.length - 1 && React__default.createElement(Divider$1, { sx: { mx: 0 } })))))) : undefined, showDividers: true, hideBackdrop: true, disableEnforceFocus: true, disableScrollLock: true, sx: {
             // Allows to interact with other elements outside the popover when the popover is open
             pointerEvents: 'none',
             '& > .MuiPaper-root': {
@@ -7024,6 +7050,216 @@ const FilterPopover = ({ anchorEl, onClose, header = DEFAULT_HEADER, content, ap
         }, ...popoverProps }));
 };
 
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/data-display-tag--docs
+ */
+const Tag = ({ color = 'primary', ...props }) => {
+    return React__default.createElement(Chip, { size: "small", color: color, deleteIcon: React__default.createElement(Icon, { name: "Close", "data-testid": "CloseIcon" }), ...props });
+};
+
+const DELIMITERS = [',', ';'];
+const SPLIT_REGEXP = new RegExp(DELIMITERS.join('|'), 'g');
+/**
+ * Autocomplete-based single or multi-select form input. Selected values are displayed
+ * as chips inside the input field.
+ * Supports adding custom values by typing and pressing Enter (comma/semicolon delimiters).
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/patterns-form-formautocomplete--docs
+ */
+const FormAutocomplete = ({ id, component = 'div', title, label, valuesMap = {}, values = [], onChange, placeholder, multiple = false, limitTags = -1, // -1 means no limit
+addCustom = false, allOptionsSelectedPlaceholder, required, disabled, error, helperText, sx, groupBy, }) => {
+    const [inputValue, setInputValue] = useState('');
+    /**
+     * Used to show the allOptionsSelectedPlaceholder when the input is not focused.
+     * @default false
+     */
+    const [isFocused, setIsFocused] = useState(false);
+    /**
+     * Options to display in the autocomplete.
+     */
+    const options = useMemo(() => generateOptions(valuesMap), [valuesMap]);
+    /**
+     * Value for the autocomplete.
+     */
+    const valueForAutocomplete = useMemo(() => {
+        const inputValues = values.map((id) => ({
+            label: valuesMap[id]?.title ?? id,
+            id,
+        }));
+        return multiple ? inputValues : inputValues[0] ?? null;
+    }, [values, valuesMap]);
+    const allOptionsSelected = options.length > 0 && values.length === options.length;
+    const showAllOptionsSelectedPlaceholder = multiple && !addCustom && Boolean(allOptionsSelectedPlaceholder) && allOptionsSelected && !isFocused;
+    /** Converts typed string to options. With addCustom: split by comma/semicolon. Otherwise: match valuesMap by title. */
+    const expandStringToOptions = (input) => {
+        if (input.trim() === '')
+            return [];
+        if (addCustom) {
+            return splitInput(input).map((p) => ({ label: p, id: p }));
+        }
+        const matchingIds = Object.values(valuesMap)
+            .filter(({ title }) => isSubstring(title, input))
+            .map(({ name }) => name);
+        return matchingIds.map((id) => ({ label: valuesMap[id]?.title ?? id, id }));
+    };
+    /** Converts a selected option to options. With addCustom: id may contain "x, y" delimiters to split. */
+    const expandOptionToOptions = (option) => {
+        if (addCustom) {
+            const inputValues = splitInput(option.id);
+            if (inputValues.length > 1) {
+                return inputValues.map((value) => ({ label: value, id: value }));
+            }
+        }
+        return [option];
+    };
+    /** Expands a single input item (string or option) into an array of options. */
+    const expandInputItem = (item) => {
+        return typeof item === 'string' ? expandStringToOptions(item) : expandOptionToOptions(toOption(item));
+    };
+    /**
+     * Handles the change event for the autocomplete input.
+     * @param _event - The event object.
+     * @param newValue{AutocompleteValue | AutocompleteValue[]} - The new value(s) for the input. Can be a single value or an array of values(string or FormAutocompleteOption).
+     */
+    const handleChange = (_event, newValue) => {
+        setInputValue('');
+        if (newValue == null) {
+            onChange([]);
+            return;
+        }
+        const items = Array.isArray(newValue) ? newValue : [newValue];
+        const expandedOptions = items.flatMap(expandInputItem);
+        const uniqueOptionsById = expandedOptions.filter((option, index) => expandedOptions.findIndex((o) => o.id === option.id) === index);
+        const optionIds = uniqueOptionsById.map((option) => option.id);
+        onChange(multiple ? optionIds : optionIds.slice(0, 1));
+    };
+    const handleInputChange = (_event, newInputValue) => {
+        setInputValue(newInputValue);
+    };
+    const getOptionLabel = (option) => {
+        if (typeof option === 'string')
+            return option;
+        return option.label;
+    };
+    const filterOptions = (options, { inputValue }) => {
+        const filteredOptions = options.filter((option) => {
+            const alreadySelected = values.includes(option.id);
+            const matchesInput = inputValue === '' || isSubstring(option.label, inputValue);
+            return !alreadySelected && matchesInput;
+        });
+        // When addCustom, suggest "Add X, Y, Z" for typed input (supports ; or , delimiters)
+        const inputValues = splitInput(inputValue);
+        const isExisting = filteredOptions.some((opt) => inputValue === opt.id);
+        if (addCustom && !isExisting && inputValues.length > 0) {
+            filteredOptions.push({
+                label: `Add ${inputValues.join(', ')}`,
+                id: inputValue,
+            });
+        }
+        return filteredOptions;
+    };
+    const getInputPlaceholder = () => {
+        if (showAllOptionsSelectedPlaceholder)
+            return allOptionsSelectedPlaceholder;
+        if (placeholder)
+            return placeholder;
+        if (title)
+            return `Search by ${title.toLowerCase()}`;
+    };
+    const renderTags = (tagValue, getTagProps) => {
+        if (showAllOptionsSelectedPlaceholder)
+            return null;
+        return tagValue.map((option, index) => {
+            const opt = toOption(option);
+            return React__default.createElement(Tag, { key: opt.id, label: opt.label, ...getTagProps({ index }) });
+        });
+    };
+    return (React__default.createElement(FormControl, { component: component, error: error, disabled: disabled, sx: sx },
+        React__default.createElement(FormLabel, { label: title, required: required, htmlFor: id }),
+        React__default.createElement(Autocomplete, { freeSolo: true, fullWidth: true, multiple: multiple, options: options, "aria-label": `Filter ${title || label}`, value: valueForAutocomplete, clearOnBlur: true, limitTags: limitTags, inputValue: inputValue, onInputChange: handleInputChange, onChange: handleChange, getOptionLabel: getOptionLabel, renderInput: (params) => (React__default.createElement(TextField, { ...params, label: label, placeholder: getInputPlaceholder(), InputLabelProps: { shrink: true }, InputProps: {
+                    ...params.InputProps,
+                    // TODO: Remove when upgrading to MUI v6.
+                    // With limitTags set, the root's onClick fires after the input's mousedown,causing the dropdown to open then
+                    // immediately close on first click. Overriding with undefined fixes it; the input's onMouseDown still opens the dropdown.
+                    // PR fix for this on MUI v6: https://github.com/mui/material-ui/pull/42494
+                    onClick: undefined,
+                }, inputProps: {
+                    ...params.inputProps,
+                    onFocus: (e) => {
+                        setIsFocused(true);
+                        params.inputProps?.onFocus?.(e);
+                    },
+                    onBlur: (e) => {
+                        setIsFocused(false);
+                        params.inputProps?.onBlur?.(e);
+                    },
+                } })), renderTags: multiple ? renderTags : undefined, disableCloseOnSelect: multiple, filterOptions: filterOptions, groupBy: groupBy, sx: { my: 1, mt: label ? 2 : 1 } }),
+        error && helperText && React__default.createElement(FormHelperText, { error: error }, helperText)));
+};
+/** ===============================================================
+ * Internal Helper functions
+ * These are not exported and are used only within this component.
+ * ================================================================
+ */
+/**
+ * Generate options from a mapped object.
+ * @param mappedObject - The mapped object to generate options from.
+ * @returns An array of FormAutocompleteOption.
+ */
+function generateOptions(mappedObject = {}) {
+    return Object.values(mappedObject)
+        .map(({ title, name }) => ({ label: title, id: name }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+}
+/**
+ * Split an input string into an array of strings based on delimiters (comma or semicolon).
+ * @param str - The string to split.
+ * @returns An array of strings.
+ */
+function splitInput(str) {
+    return str
+        .split(SPLIT_REGEXP)
+        .map((s) => s.trim())
+        .filter(Boolean);
+}
+/**
+ * Check if a string is a substring of another string.
+ * @param str - The string to check.
+ * @param sub - The substring to check.
+ * @returns True if the string is a substring of the other string, false otherwise.
+ */
+function isSubstring(str, sub) {
+    const normalized = str
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase();
+    return normalized.includes(sub.toLowerCase());
+}
+/**
+ * Convert an AutocompleteValue to a FormAutocompleteOption.
+ * @param val - The AutocompleteValue to convert.
+ * @returns The FormAutocompleteOption.
+ */
+function toOption(val) {
+    if (typeof val === 'string') {
+        return { label: val, id: val };
+    }
+    return val;
+}
+
+const BaseFormSlider = ({ id, component = 'div', required, disabled, label, error, helperText, sx, inputRef, ...props }) => {
+    return (React__default.createElement(FormControl, { component: component, error: error, disabled: disabled, sx: sx },
+        React__default.createElement(FormLabel, { label: label, required: required, htmlFor: id }),
+        React__default.createElement(Slider, { ref: inputRef, ...props }),
+        error && helperText && React__default.createElement(FormHelperText, { error: error }, helperText)));
+};
+/**
+ * Form wrapper for Slider. Use with useGsdSlider for GSD (Ground Sampling Distance) range sliders.
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/patterns-form-formslider--docs
+ */
+const FormSlider = React__default.forwardRef((props, ref) => (React__default.createElement(BaseFormSlider, { inputRef: ref, ...props })));
+
 const { spacing } = tokens.size;
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/patterns-pageheader--docs
@@ -7339,13 +7575,6 @@ const Badge = ({ children, color = 'info', ...props }) => {
     return (React__default.createElement(Badge$1, { color: color, ...props }, children));
 };
 
-/**
- * Documentation: https://up-components.up42.com/?path=/docs/data-display-tag--docs
- */
-const Tag = ({ color = 'primary', ...props }) => {
-    return React__default.createElement(Chip, { size: "small", color: color, deleteIcon: React__default.createElement(Icon, { name: "Close", "data-testid": "CloseIcon" }), ...props });
-};
-
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
 /**
@@ -11815,6 +12044,51 @@ const useDebounce = (value, delay = 500) => {
     return debouncedValue;
 };
 
+const DEFAULT_MARK_VALUES = [0, 2.5, 10, 30];
+/**
+ * Hook for GSD (Ground Sampling Distance) range slider with logarithmic scale.
+ * Handles conversion between linear slider values and logarithmic GSD values.
+ */
+function useGsdSlider({ minValue, maxValue, onChange, markValues = DEFAULT_MARK_VALUES }) {
+    const minGsd = markValues.length > 0 ? Math.min(...markValues) : DEFAULT_MARK_VALUES[0];
+    const maxGsd = markValues.length > 0 ? Math.max(...markValues) : DEFAULT_MARK_VALUES[DEFAULT_MARK_VALUES.length - 1];
+    const sliderValue = useMemo(() => [getSliderValueFromGsd(minValue, minGsd, maxGsd), getSliderValueFromGsd(maxValue, minGsd, maxGsd)], [minValue, maxValue, minGsd, maxGsd]);
+    const marks = useMemo(() => markValues.map((mark) => ({
+        value: getSliderValueFromGsd(mark, minGsd, maxGsd),
+        label: `${mark} m`,
+    })), [markValues, minGsd, maxGsd]);
+    const handleSliderChange = (_event, newValue) => {
+        if (newValue === undefined)
+            return;
+        const values = Array.isArray(newValue) ? newValue : [newValue, newValue];
+        const [min, max] = values.map((v) => getGsdFromSliderValue(v, minGsd, maxGsd));
+        onChange(min, max);
+    };
+    const scale = (n) => getGsdFromSliderValue(n, minGsd, maxGsd);
+    return {
+        sliderValue,
+        marks,
+        handleSliderChange,
+        scale,
+        minGsd,
+        maxGsd,
+    };
+}
+/**
+ * Convert the value from the slider to a GSD value using a logarithm.
+ */
+function getGsdFromSliderValue(value, minGsd, maxGsd) {
+    const scaledValue = Math.pow(2, (value * Math.log2(maxGsd + 1)) / (maxGsd - minGsd)) - 1;
+    return Number(scaledValue.toFixed(2));
+}
+/**
+ * Convert the GSD value to a value for the slider using a reverse logarithm.
+ */
+function getSliderValueFromGsd(scaledValue, minGsd, maxGsd) {
+    const value = ((Math.log(scaledValue + 1) / Math.log(2)) * (maxGsd - minGsd)) / Math.log2(maxGsd + 1);
+    return Number(value.toFixed(2));
+}
+
 /**
  * There could be many ways to parse URLSearchParams to an object.
  * For example, how should `a` be treated in `a=1&b=2&a=3`?
@@ -11921,4 +12195,4 @@ function useUrlParams(options = {}) {
     };
 }
 
-export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, tokens, useAlert, useCursorPagination, useDebounce, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
+export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormAutocomplete, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSlider, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, tokens, useAlert, useCursorPagination, useDebounce, useGsdSlider, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { default as tokens } from '@up42/design-system-tokens/dist/json/tokens.json';
 import * as _mui_material from '@mui/material';
-import { BoxProps, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, ContainerProps, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps, SwitchProps as SwitchProps$1, SelectProps as SelectProps$1, SliderProps as SliderProps$1, LinkProps as LinkProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, CardProps, ModalProps, AlertProps as AlertProps$1, SxProps, Theme, IconButtonProps, SvgIconProps, PopoverProps as PopoverProps$1, BadgeProps as BadgeProps$1, ChipProps, DividerProps as DividerProps$1, ButtonProps as ButtonProps$2, SnackbarProps } from '@mui/material';
+import { BoxProps, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, ContainerProps, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps, SwitchProps as SwitchProps$1, SelectProps as SelectProps$1, SliderProps as SliderProps$2, LinkProps as LinkProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, CardProps, ModalProps, AlertProps as AlertProps$1, SxProps, Theme, IconButtonProps, SvgIconProps, PopoverProps as PopoverProps$1, BadgeProps as BadgeProps$1, ChipProps, DividerProps as DividerProps$1, ButtonProps as ButtonProps$2, SnackbarProps } from '@mui/material';
 export * from '@mui/material';
 import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
 import * as React from 'react';
@@ -282,11 +282,11 @@ type FormInputProps = FormBaseProps & InputProps;
  */
 declare const FormInput: React__default.ForwardRefExoticComponent<Omit<FormInputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-type SliderProps = MUIGlobalOmit<Omit<SliderProps$1, 'variant' | 'label'>>;
+type SliderProps$1 = MUIGlobalOmit<Omit<SliderProps$2, 'variant' | 'label'>>;
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/data-entry-slider--default--docs
  */
-declare const Slider: (props: SliderProps) => React__default.JSX.Element;
+declare const Slider: (props: SliderProps$1) => React__default.JSX.Element;
 
 type LinkProps<C extends React__default.ElementType> = LinkProps$1<C, {
     component?: C;
@@ -4742,9 +4742,10 @@ declare const Popover: React__default.ForwardRefExoticComponent<Omit<PopoverProp
 
 type FilterPopoverProps = Pick<PopoverProps, 'anchorEl' | 'onClose' | 'header' | 'sx' | 'size'> & {
     /**
-     * Filter area content (placeholder node for now).
+     * Array of filter input components to display. Each item is rendered in a vertical stack with spacing.
+     * Use FormInput, FormDateRangePicker, FormSlider, FormAutocomplete, etc.
      */
-    content?: React__default.ReactNode;
+    content?: React__default.ReactNode[];
     /**
      * Apply button text.
      * @default 'Apply filters'
@@ -4765,6 +4766,11 @@ type FilterPopoverProps = Pick<PopoverProps, 'anchorEl' | 'onClose' | 'header' |
      * @default false
      */
     disableApplyButton?: boolean;
+    /**
+     * Maximum width of the content.
+     * @default '384px'
+     */
+    maxContentWidth?: string;
     /**
      * Called when Apply is clicked; popover closes after.
      */
@@ -4780,7 +4786,115 @@ type FilterPopoverProps = Pick<PopoverProps, 'anchorEl' | 'onClose' | 'header' |
  *
  * Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-filterpopover--docs
  */
-declare const FilterPopover: ({ anchorEl, onClose, header, content, applyButtonLabel, clearButtonLabel, disableApplyButton, isLoadingCount, onApply, onClear, ...popoverProps }: FilterPopoverProps) => React__default.JSX.Element;
+declare const FilterPopover: ({ anchorEl, onClose, header, content, applyButtonLabel, clearButtonLabel, disableApplyButton, isLoadingCount, maxContentWidth, onApply, onClear, ...popoverProps }: FilterPopoverProps) => React__default.JSX.Element;
+
+type FormAutocompleteMapper = Record<string, {
+    title: string;
+    name: string;
+}>;
+type FormAutocompleteOption = {
+    label: string;
+    id: string;
+};
+type FormAutocompleteProps = {
+    /**
+     * ID of the input.
+     */
+    id?: string;
+    /**
+     * Component to wrap the input.
+     */
+    component?: React__default.ElementType;
+    /**
+     * Title of the input.
+     */
+    title?: string;
+    /**
+     * Label of the input.
+     */
+    label?: string;
+    /**
+     * Selected values.
+     */
+    values?: string[];
+    /**
+     * Map of values to options.
+     */
+    valuesMap?: FormAutocompleteMapper;
+    /**
+     * Callback when selection changes.
+     */
+    onChange: (values: string[]) => void;
+    /**
+     * Placeholder text when no selection.
+     */
+    placeholder?: string;
+    /**
+     * When true, allows multiple selections. Selected values are displayed as chips inside the input.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Maximum number of tags to display. -1 means no limit.
+     * @default -1
+     */
+    limitTags?: number;
+    /**
+     * When true, allows adding custom text as values. Shows "Add X, Y, Z" in the dropdown when typing.
+     * Supports multiple values separated by comma or semicolon.
+     * @default false
+     */
+    addCustom?: boolean;
+    /**
+     * Text to display when all options are selected (multiple=true, addCustom=false).
+     * Shown when input is not focused; selected chips are shown when focused.
+     */
+    allOptionsSelectedPlaceholder?: string;
+    /**
+     * Whether the input is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: boolean;
+    /**
+     * Helper text to display.
+     */
+    helperText?: string;
+    /**
+     * Styles to apply to the input.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Function that returns the group key for each option. Groups options in the dropdown.
+     */
+    groupBy?: (option: FormAutocompleteOption) => string;
+};
+/**
+ * Autocomplete-based single or multi-select form input. Selected values are displayed
+ * as chips inside the input field.
+ * Supports adding custom values by typing and pressing Enter (comma/semicolon delimiters).
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/patterns-form-formautocomplete--docs
+ */
+declare const FormAutocomplete: ({ id, component, title, label, valuesMap, values, onChange, placeholder, multiple, limitTags, addCustom, allOptionsSelectedPlaceholder, required, disabled, error, helperText, sx, groupBy, }: FormAutocompleteProps) => React__default.JSX.Element;
+
+type SliderProps = MUIGlobalOmit<Omit<SliderProps$2, 'variant' | 'label'>>
+
+type FormSliderProps = Omit<FormBaseProps, 'onChange'> & SliderProps & {
+    inputRef?: SliderProps['ref'];
+};
+/**
+ * Form wrapper for Slider. Use with useGsdSlider for GSD (Ground Sampling Distance) range sliders.
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/patterns-form-formslider--docs
+ */
+declare const FormSlider: React__default.ForwardRefExoticComponent<Omit<FormSliderProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
 
 type PageHeaderProps = {
     title: string;
@@ -11709,6 +11823,41 @@ declare function useToggle(initialState: boolean | (() => boolean)): UseToggleRe
  */
 declare const useDebounce: <T>(value: T, delay?: number) => T;
 
+type UseGsdSliderProps = {
+    /**
+     * Minimum GSD value (meters). Controlled by parent.
+     */
+    minValue: number;
+    /**
+     * Maximum GSD value (meters). Controlled by parent.
+     */
+    maxValue: number;
+    /**
+     * Callback when the range changes.
+     */
+    onChange: (minValue: number, maxValue: number) => void;
+    /**
+     * GSD values for the slider marks.
+     * @default [0, 2.5, 10, 30]
+     */
+    markValues?: number[];
+};
+/**
+ * Hook for GSD (Ground Sampling Distance) range slider with logarithmic scale.
+ * Handles conversion between linear slider values and logarithmic GSD values.
+ */
+declare function useGsdSlider({ minValue, maxValue, onChange, markValues }: UseGsdSliderProps): {
+    sliderValue: [number, number];
+    marks: {
+        value: number;
+        label: string;
+    }[];
+    handleSliderChange: (_event: unknown, newValue?: number | number[]) => void;
+    scale: (n: number) => number;
+    minGsd: number;
+    maxGsd: number;
+};
+
 type CreateAlertProps = {
     title?: string;
     message: string | ElementType;
@@ -11814,5 +11963,5 @@ declare function valueToString(value: unknown): string;
  */
 declare function objectToSearchParams<T extends ParamsObject = ParamsObject>(object: T): string;
 
-export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, useAlert, useCursorPagination, useDebounce, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
-export type { ActionToolbarProps, AlertProps, AnalyticsConfig, AvatarProps, BadgeProps, BannerProps, ButtonProps, CheckboxProps, CodeBlockProps, CodeInlineProps, CodeSnippetItemProps, CodeSnippetProps, ContactBoxProps, ControlButtonProps, CopyButtonProps, CreateAlertProps, CreateSnackbarProps, CursorPaginatedResponse, DateRange, DateTimeProps, DividerProps, DocumentationPopoverProps, EditTagsButtonProps, EmptyStateProps, FeatureCardHeaderActionsProps, FeatureCardHeaderProps, FeatureCardProps, FeatureFlagCheckboxProps, FilterPopoverProps, FindUsersButtonProps, FormCheckboxProps, FormDatePickerDateType, FormDatePickerProps, FormDateRangePickerListProps, FormDateRangePickerProps, FormDateTimePickerProps, FormInputProps, FormRadioProps, FormSelectProps, FormSwitchProps, GridContainerProps, GridItemProps, IconAction, IconProps$1 as IconProps, IllustrationProps, InfoCardProps, InfoModalProps, InfoPopoverProps, InputProps, LearnMoreButtonProps, LinkProps, LoadingProps, LogoProps, MenuAction, NotFoundProps, PageContainerProps, PageHeaderProps, PageHeaderV2Props, PaginatedResponse, ParamsObject, PopoverProps, RadioProps, RemoveParamRules, RoleBannerProps, SearchParamObject, SelectProps, SliderProps, StatusLightProps, SwitchProps, TabGroupProps, TabProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TableSortLabelProps, TabsProps, TagItem, TagProps, TagsListProps, ToggleButtonProps, TypographyProps, UseToggleResult };
+export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormAutocomplete, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSlider, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, useAlert, useCursorPagination, useDebounce, useGsdSlider, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
+export type { ActionToolbarProps, AlertProps, AnalyticsConfig, AvatarProps, BadgeProps, BannerProps, ButtonProps, CheckboxProps, CodeBlockProps, CodeInlineProps, CodeSnippetItemProps, CodeSnippetProps, ContactBoxProps, ControlButtonProps, CopyButtonProps, CreateAlertProps, CreateSnackbarProps, CursorPaginatedResponse, DateRange, DateTimeProps, DividerProps, DocumentationPopoverProps, EditTagsButtonProps, EmptyStateProps, FeatureCardHeaderActionsProps, FeatureCardHeaderProps, FeatureCardProps, FeatureFlagCheckboxProps, FilterPopoverProps, FindUsersButtonProps, FormAutocompleteMapper, FormAutocompleteProps, FormCheckboxProps, FormDatePickerDateType, FormDatePickerProps, FormDateRangePickerListProps, FormDateRangePickerProps, FormDateTimePickerProps, FormInputProps, FormRadioProps, FormSelectProps, FormSliderProps, FormSwitchProps, GridContainerProps, GridItemProps, IconAction, IconProps$1 as IconProps, IllustrationProps, InfoCardProps, InfoModalProps, InfoPopoverProps, InputProps, LearnMoreButtonProps, LinkProps, LoadingProps, LogoProps, MenuAction, NotFoundProps, PageContainerProps, PageHeaderProps, PageHeaderV2Props, PaginatedResponse, ParamsObject, PopoverProps, RadioProps, RemoveParamRules, RoleBannerProps, SearchParamObject, SelectProps, SliderProps$1 as SliderProps, StatusLightProps, SwitchProps, TabGroupProps, TabProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TableSortLabelProps, TabsProps, TagItem, TagProps, TagsListProps, ToggleButtonProps, TypographyProps, UseGsdSliderProps, UseToggleResult };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up42/up-components",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",
@@ -124,7 +124,8 @@
       "lodash@>=4.0.0 <=4.17.22": ">=4.17.23",
       "serialize-javascript@<=7.0.2": ">=7.0.3",
       "csstype@>=3.0.0": "3.1.3",
-      "@tootallnate/once@<3.0.1": ">=3.0.1"
+      "@tootallnate/once@<3.0.1": ">=3.0.1",
+      "flatted": "^3.4.2"
     }
   }
 }