@up42/up-components 8.3.0 → 9.1.0

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,13 +1,19 @@
 {
   "name": "@up42/up-components",
-  "version": "8.3.0",
+  "version": "9.1.0",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",
-  "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js"
+    }
+  },
   "files": [
-    "dist"
+    "dist/esm/index.js",
+    "dist/index.d.ts"
   ],
   "types": "dist/index.d.ts",
   "scripts": {
@@ -31,7 +37,6 @@
   },
   "dependencies": {
     "@up42/design-system-tokens": "^8.0.5",
-    "dayjs": "^1.11.7",
     "prismjs": "^1.29.0"
   },
   "devDependencies": {
@@ -39,14 +44,12 @@
     "@commitlint/config-conventional": "^20.3.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.3.0",
     "@mui/x-data-grid-premium": "^6.8.0",
     "@mui/x-date-pickers-pro": "^6.8.0",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
     "@storybook/addon-a11y": "^8.6.17",
@@ -81,7 +84,6 @@
     "rimraf": "^6.1.2",
     "rollup": "^4.59.0",
     "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^8.6.17",
     "svgo": "^3.3.3",
     "tslib": "^2.8.1",
@@ -93,10 +95,10 @@
   "peerDependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.3.0",
     "@mui/x-data-grid-premium": "^6.8.0",
     "@mui/x-date-pickers-pro": "^6.8.0",
+    "dayjs": "^1.11.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.12.0"
@@ -122,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"
     }
   }
 }