@webpros/mui-theme 0.3.9 → 0.3.10

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v7 theme for WebPros products",
-    "version": "0.3.9",
+    "version": "0.3.10",
     "license": "MIT",
     "repository": {
         "type": "git",

package/dist/src/components/index.d.ts

@@ -48,3 +48,4 @@ export * from './inputs/FormLabel';
 export * from './inputs/OutlinedInput';
 export * from './inputs/FormHelperText';
 export * from './inputs/Radio';
+export * from './inputs/Filter';

package/dist/src/components/index.js

@@ -49,3 +49,4 @@ export * from './inputs/FormLabel';
 export * from './inputs/OutlinedInput';
 export * from './inputs/FormHelperText';
 export * from './inputs/Radio';
+export * from './inputs/Filter';

package/dist/src/components/inputs/Button/Button.theme.js

@@ -17,11 +17,11 @@ export const getButton = (theme) => {
         },
         {
             props: { size: 'medium' },
-            style: Object.assign(Object.assign({}, typography.LabelMedium), { borderRadius: '17px', height: 34, padding: '7px 17px' }),
+            style: Object.assign(Object.assign({}, typography.LabelMediumProminent), { borderRadius: '17px', height: 34, padding: '7px 17px' }),
         },
         {
             props: { size: 'large' },
-            style: Object.assign(Object.assign({}, typography.LabelLarge), { borderRadius: '24px', height: 42, padding: '9px 24px' }),
+            style: Object.assign(Object.assign({}, typography.LabelLargeProminent), { borderRadius: '24px', height: 42, padding: '9px 24px' }),
         },
     ];
     const getStylesByColor = (color, viewContext) => {

package/dist/src/components/inputs/Fab/Fab.theme.js

@@ -4,7 +4,7 @@ export const getFab = (theme) => {
         MuiFab: {
             defaultProps: { color: 'primary' },
             styleOverrides: {
-                root: Object.assign(Object.assign({}, typography.LabelMedium), { width: 'auto', height: '42px', boxShadow: theme.shadows[2], borderRadius: '17px', textTransform: 'none', padding: 11, '&:active': {
+                root: Object.assign(Object.assign({}, typography.LabelMediumProminent), { width: 'auto', height: '42px', boxShadow: theme.shadows[2], borderRadius: '17px', textTransform: 'none', padding: 11, '&:active': {
                         boxShadow: `${theme.shadows[1]} !important`,
                     } }),
             },

package/dist/src/components/inputs/Filter/Filter.d.ts

@@ -0,0 +1,14 @@
+import { AutocompleteProps, AutocompleteRenderInputParams } from '@mui/material';
+export type FilterOption = {
+    label: string;
+    /** Nested options for inner menu (not implemented in UI yet) */
+    options?: FilterOption[];
+    /** If true, shows inner menu with multiple selection (not implemented in UI yet) */
+    multiple?: boolean;
+};
+export type FilterProps<T extends FilterOption = FilterOption> = Omit<AutocompleteProps<T, true, true, false>, 'multiple' | 'renderInput' | 'disableClearable'> & {
+    placeholder?: string;
+    renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
+};
+export declare const Filter: <T extends FilterOption = FilterOption>({ placeholder, size, filterSelectedOptions, renderInput, slotProps, sx, value, onChange, ...props }: FilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type FilterComponentType = typeof Filter;

package/dist/src/components/inputs/Filter/Filter.js

@@ -0,0 +1,84 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useCallback } from 'react';
+import { Autocomplete, Box, IconButton, TextField, autocompleteClasses, } from '@mui/material';
+import { FunnelSimpleIcon, XIcon } from '@phosphor-icons/react';
+const FILTER_SX = {
+    '& .MuiAutocomplete-inputRoot': {
+        flexWrap: 'nowrap',
+        gap: '4px',
+        minHeight: 34,
+        py: '1px !important',
+        pl: '6px !important',
+    },
+    '& .MuiAutocomplete-input': {
+        minWidth: '20px !important',
+        width: 0,
+        flex: '1 1 auto !important',
+        p: '0 !important',
+    },
+    '&:has(.MuiChip-root) .MuiAutocomplete-input': {
+        flex: '1 1 auto !important',
+        minWidth: '50px !important',
+    },
+    '& .MuiAutocomplete-endAdornment': {
+        display: 'none',
+    },
+};
+const CHIPS_CONTAINER_SX = {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    gap: '2px',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+        display: 'none',
+    },
+};
+const FILTER_ICON_SX = {
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+};
+const CLEAR_BUTTON_SX = {
+    flexShrink: 0,
+    ml: 'auto',
+};
+const CHIP_SX = {
+    p: '6px',
+    height: 'auto',
+    m: '0 !important',
+    flexShrink: 0,
+    maxWidth: 'none !important',
+    '& .MuiChip-label': {
+        p: 0,
+        overflow: 'visible',
+        textOverflow: 'clip',
+    },
+};
+const LISTBOX_SX = {
+    [`& .${autocompleteClasses.option}`]: {
+        minHeight: 32,
+        padding: '4px 12px',
+    },
+};
+export const Filter = (_a) => {
+    var { placeholder = 'Filter', size = 'small', filterSelectedOptions = true, renderInput, slotProps, sx, value, onChange } = _a, props = __rest(_a, ["placeholder", "size", "filterSelectedOptions", "renderInput", "slotProps", "sx", "value", "onChange"]);
+    const handleClear = useCallback(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(null, [], 'clear');
+    }, [onChange]);
+    const defaultRenderInput = useCallback((params) => {
+        var _a;
+        const chips = (_a = params.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment;
+        return (_jsx(TextField, Object.assign({}, params, { placeholder: placeholder, slotProps: {
+                input: Object.assign(Object.assign({}, params.InputProps), { startAdornment: (_jsxs(_Fragment, { children: [_jsx(Box, { sx: FILTER_ICON_SX, children: _jsx(FunnelSimpleIcon, { size: 20 }) }), _jsx(Box, { sx: CHIPS_CONTAINER_SX, children: chips })] })), endAdornment: chips ? (_jsx(IconButton, { size: "small", onClick: handleClear, sx: CLEAR_BUTTON_SX, "aria-label": "Clear", children: _jsx(XIcon, { size: 16 }) })) : null }),
+            } })));
+    }, [placeholder, handleClear]);
+    return (_jsx(Autocomplete, Object.assign({}, props, { multiple: true, size: size, value: value, onChange: onChange, filterSelectedOptions: filterSelectedOptions, forcePopupIcon: false, disableClearable: true, renderInput: renderInput !== null && renderInput !== void 0 ? renderInput : defaultRenderInput, slotProps: Object.assign(Object.assign({}, slotProps), { chip: {
+                size: 'small',
+                sx: CHIP_SX,
+            }, listbox: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.listbox), { sx: LISTBOX_SX }) }), sx: Object.assign(Object.assign({}, FILTER_SX), sx) })));
+};

package/dist/src/components/inputs/Filter/index.d.ts

@@ -0,0 +1 @@
+export * from './Filter';

package/dist/src/components/inputs/Filter/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './Filter';

package/dist/src/components/surfaces/Paper/Paper.theme.js

@@ -22,6 +22,9 @@ export const getPaper = (theme) => {
     return {
         MuiPaper: {
             variants,
+            defaultProps: {
+                elevation: 0,
+            },
         },
     };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpros/mui-theme",
   "description": "MUI v7 theme for WebPros products",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "license": "MIT",
   "repository": {
     "type": "git",