@headless-adminapp/fluent 1.4.27 → 1.4.29

package/DataGrid/GridTableContainer.js

@@ -72,10 +72,19 @@ const useStyles = (0, react_components_1.makeStyles)({
         alignItems: 'center',
     },
     table: {
-        '&:after': {
-            content: ' ',
-            display: 'block',
-            height: '32px',
+        display: 'flex',
+        flexDirection: 'column',
+        borderCollapse: 'collapse',
+        width: '100%',
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        MozUserSelect: 'none',
+        msUserSelect: 'none',
+        '& *': {
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none',
         },
     },
 });
@@ -211,16 +220,11 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                         paddingInline: hPadding,
                         position: 'relative',
                     }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            borderCollapse: 'collapse',
-                            width: '100%',
                             height: virtualizer.getTotalSize() + headerHeight,
                             ['--action-shadow']: !isScrolledToRight
                                 ? '-2px 0px 6px rgba(0, 0, 0, 0.12)'
                                 : 'none',
-                            userSelect: 'none',
-                        }, ref: tableElementRef, tabIndex: 0, className: "table-pseduo", children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
+                        }, ref: tableElementRef, tabIndex: 0, className: (0, react_components_1.mergeClasses)('table-pseduo', styles.table), children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
                                     display: 'flex',
                                     position: 'sticky',
                                     top: 0,

package/Insights/Header.js

@@ -29,8 +29,8 @@ const Header = () => {
             //   ? tokens.colorNeutralBackground1
             //   : 'transparent',
             // backdropFilter: isScrolled ? 'blur(15px)' : 'none',
-            backdropFilter: 'blur(15px)',
-            background: react_components_1.tokens.colorNeutralBackgroundAlpha,
+            backdropFilter: 'blur(20px)',
+            background: react_components_1.tokens.colorNeutralBackgroundAlpha2,
             boxShadow: react_components_1.tokens.shadow4,
             // backgroundColor: tokens.colorNeutralBackground1,
             // backgroundColor: 'rgba(255, 255, 255, 0.8)',

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -74,7 +74,7 @@ const PageEntityFormDesktopContainer = () => {
                                 background: react_components_1.tokens.colorNeutralBackground1,
                                 display: 'flex',
                                 // overflow: 'hidden',
-                            }, children: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, { skeleton: dataState.isFetching }) })), notifications.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, { skeleton: dataState.isFetching }) })), notifications.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(fluent_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 boxShadow: react_components_1.tokens.shadow4,
@@ -131,8 +131,8 @@ const Wrapper = ({ children, formHeaderDivRef, }) => {
     const visible = !!rect && rect.bottom < headerHeight + tabContainerHeight;
     if (isMobile) {
         return ((0, jsx_runtime_1.jsxs)(ScrollView_1.ScrollView, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        background: react_components_1.tokens.colorNeutralBackgroundAlpha,
-                        backdropFilter: 'blur(15px)',
+                        background: react_components_1.tokens.colorNeutralBackgroundAlpha2,
+                        backdropFilter: 'blur(20px)',
                         position: 'fixed',
                         transition: 'all 0.2s',
                         top: visible ? headerHeight : -headerHeight,

package/QuickCreateContainer/FormContainer.js

@@ -41,7 +41,7 @@ const FormContainer = ({ onClose, onCreate, }) => {
                                 gap: react_components_1.tokens.spacingVerticalS,
                                 paddingInline: react_components_1.tokens.spacingHorizontalS,
                                 paddingTop: react_components_1.tokens.spacingVerticalS,
-                            }, children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: {
+                            }, children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(fluent_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     padding: react_components_1.tokens.spacingVerticalM,

package/components/LoginForm.js

@@ -79,7 +79,7 @@ function LoginForm(props) {
                         alignItems: 'stretch',
                         justifyContent: 'flex-start',
                         gap: 16,
-                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!fieldState.error?.message && formState.isSubmitted }) })) }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!fieldState.error?.message && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) })) }), props.beforeLoginContent, !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(fluent_1.Button, { appearance: "primary", type: "submit", style: {
+                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!fieldState.error?.message && formState.isSubmitted }) })) }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!fieldState.error?.message && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) })) }), props.beforeLoginContent, !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(fluent_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(fluent_1.Button, { appearance: "primary", type: "submit", style: {
                                 marginTop: 8,
                                 pointerEvents: form.formState.isSubmitting ? 'none' : 'auto',
                             }, children: [form.formState.isSubmitting && ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 4 } })), "Login"] }), props.afterLoginContent] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 80 } })] }) }));

package/components/fluent/FluentProvider.js

@@ -65,6 +65,11 @@ exports.FluentProvider = (0, react_1.forwardRef)(function FluentProvider({ corne
         let optionPaddingVertical = '6px';
         let appBarHeight = '48px';
         let navItempaddingVertical = '10px';
+        let calendarTableWidth = '196px';
+        let calendarDayCellSize = '24px';
+        let calendarHeaderIconSize = '28px';
+        let calendarPickerItemButtonSize = '40px';
+        let calendarGoTodayButtonHeight = '30px';
         if (density === 'comfortable') {
             buttonMinWidthS = '72px';
             buttonMinWidthM = '112px';
@@ -79,6 +84,11 @@ exports.FluentProvider = (0, react_1.forwardRef)(function FluentProvider({ corne
             optionPaddingVertical = '9px';
             appBarHeight = '64px';
             navItempaddingVertical = '16px';
+            calendarTableWidth = '252px';
+            calendarDayCellSize = '32px';
+            calendarHeaderIconSize = '36px';
+            calendarPickerItemButtonSize = '54px';
+            calendarGoTodayButtonHeight = '36px';
         }
         let fontSizeBase100 = '10px';
         let fontSizeBase200 = '12px';
@@ -143,6 +153,11 @@ exports.FluentProvider = (0, react_1.forwardRef)(function FluentProvider({ corne
             optionPaddingVertical,
             navItempaddingVertical,
             appBarHeight,
+            calendarTableWidth,
+            calendarDayCellSize,
+            calendarHeaderIconSize,
+            calendarPickerItemButtonSize,
+            calendarGoTodayButtonHeight,
             fontSizeBase100,
             fontSizeBase200,
             fontSizeBase300,

package/components/fluent/MessageBar.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, MessageBarProps } from '@fluentui/react-components';
+type ExtendedMessageBarProps = MessageBarProps;
+export declare const MessageBar: ForwardRefComponent<ExtendedMessageBarProps>;
+export {};

package/components/fluent/MessageBar.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        fontWeight: react_components_1.tokens.fontWeightRegular,
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+    },
+});
+exports.MessageBar = (0, react_1.forwardRef)(function MessageBar({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref }));
+});

package/components/fluent/Option.js

@@ -8,7 +8,7 @@ const tokens_1 = require("./tokens");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         borderRadius: tokens_1.extendedTokens.controlBorderRadius,
-        paddingBlock: tokens_1.extendedTokens.optionPaddingVertical,
+        padding: `${tokens_1.extendedTokens.optionPaddingVertical} ${react_components_1.tokens.spacingHorizontalS}`,
     },
 });
 exports.Option = (0, react_1.forwardRef)(function Option({ className, ...rest }, ref) {

package/components/fluent/index.d.ts

@@ -15,3 +15,4 @@ export { Checkbox } from './Checkbox';
 export { MenuItem } from './MenuItem';
 export { PopoverSurface } from './PopoverSurface';
 export { DialogSurface } from './DialogSurface';
+export { MessageBar } from './MessageBar';

package/components/fluent/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogSurface = exports.PopoverSurface = exports.MenuItem = exports.Checkbox = exports.Option = exports.tokens = exports.extendedTokens = exports.FluentProvider = exports.SearchBox = exports.MenuPopover = exports.ToolbarButton = exports.SpinButton = exports.Dropdown = exports.Tag = exports.Combobox = exports.Textarea = exports.Input = exports.Button = void 0;
+exports.MessageBar = exports.DialogSurface = exports.PopoverSurface = exports.MenuItem = exports.Checkbox = exports.Option = exports.tokens = exports.extendedTokens = exports.FluentProvider = exports.SearchBox = exports.MenuPopover = exports.ToolbarButton = exports.SpinButton = exports.Dropdown = exports.Tag = exports.Combobox = exports.Textarea = exports.Input = exports.Button = void 0;
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 var Input_1 = require("./Input");
@@ -36,3 +36,5 @@ var PopoverSurface_1 = require("./PopoverSurface");
 Object.defineProperty(exports, "PopoverSurface", { enumerable: true, get: function () { return PopoverSurface_1.PopoverSurface; } });
 var DialogSurface_1 = require("./DialogSurface");
 Object.defineProperty(exports, "DialogSurface", { enumerable: true, get: function () { return DialogSurface_1.DialogSurface; } });
+var MessageBar_1 = require("./MessageBar");
+Object.defineProperty(exports, "MessageBar", { enumerable: true, get: function () { return MessageBar_1.MessageBar; } });

package/components/fluent/tokens.d.ts

@@ -24,6 +24,11 @@ export type ExtendedTokens = {
     optionPaddingVertical: string;
     appBarHeight: string;
     navItempaddingVertical: string;
+    calendarTableWidth: string;
+    calendarDayCellSize: string;
+    calendarHeaderIconSize: string;
+    calendarPickerItemButtonSize: string;
+    calendarGoTodayButtonHeight: string;
 };
 export { tokens } from '@fluentui/react-components';
 export declare const extendedTokens: ExtendedTokens;

package/components/fluent/tokens.js

@@ -29,4 +29,9 @@ exports.extendedTokens = {
     optionPaddingVertical: 'var(--optionPaddingVertical)',
     appBarHeight: 'var(--appBarHeight)',
     navItempaddingVertical: 'var(--navItempaddingVertical)',
+    calendarTableWidth: 'var(--calendarTableWidth)',
+    calendarDayCellSize: 'var(--calendarDayCellSize)',
+    calendarHeaderIconSize: 'var(--calendarHeaderIconSize)',
+    calendarPickerItemButtonSize: 'var(--calendarPickerItemButtonSize)',
+    calendarGoTodayButtonHeight: 'var(--calendarGoTodayButtonHeight)',
 };

package/form/controls/DateControl.d.ts

@@ -1,4 +1,5 @@
 import { ControlProps } from './types';
+export declare const useCalendarStyles: () => Record<"calendar", string>;
 export interface DateControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;

package/form/controls/DateControl.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalendarStyles = void 0;
 exports.DateControl = DateControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_calendar_compat_1 = require("@fluentui/react-calendar-compat");
@@ -18,9 +19,48 @@ const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
+exports.useCalendarStyles = (0, react_components_1.makeStyles)({
+    calendar: {
+        width: `calc(${fluent_1.extendedTokens.calendarTableWidth} + 24px)`,
+        '& .fui-CalendarDay': {
+            width: fluent_1.extendedTokens.calendarTableWidth,
+        },
+        '& .fui-CalendarDayGrid__table': {
+            width: fluent_1.extendedTokens.calendarTableWidth,
+        },
+        '& .fui-CalendarDayGrid__dayButton': {
+            width: fluent_1.extendedTokens.calendarDayCellSize,
+            height: fluent_1.extendedTokens.calendarDayCellSize,
+            lineHeight: fluent_1.extendedTokens.calendarDayCellSize,
+        },
+        '& .fui-CalendarDay__headerIconButton': {
+            width: fluent_1.extendedTokens.calendarHeaderIconSize,
+            height: fluent_1.extendedTokens.calendarHeaderIconSize,
+            lineHeight: fluent_1.extendedTokens.calendarHeaderIconSize,
+        },
+        '& .fui-CalendarPicker__navigationButton': {
+            width: fluent_1.extendedTokens.calendarHeaderIconSize,
+            height: fluent_1.extendedTokens.calendarHeaderIconSize,
+            lineHeight: fluent_1.extendedTokens.calendarHeaderIconSize,
+        },
+        '& .fui-CalendarPicker__itemButton': {
+            width: fluent_1.extendedTokens.calendarPickerItemButtonSize,
+            height: fluent_1.extendedTokens.calendarPickerItemButtonSize,
+            lineHeight: fluent_1.extendedTokens.calendarPickerItemButtonSize,
+        },
+        '& .fui-CalendarPicker': {
+            width: fluent_1.extendedTokens.calendarTableWidth,
+        },
+        '& .fui-Calendar__goTodayButton': {
+            height: fluent_1.extendedTokens.calendarGoTodayButtonHeight,
+            lineHeight: fluent_1.extendedTokens.calendarGoTodayButtonHeight,
+        },
+    },
+});
 function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, skeleton, }) {
     const { dateFormats } = (0, locale_1.useLocale)();
     const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
+    const calendarStyles = (0, exports.useCalendarStyles)();
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
@@ -44,5 +84,7 @@ function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
                 justifyContent: 'center',
                 marginRight: -4,
                 color: react_components_1.tokens.colorNeutralForeground2,
-            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }), calendar: {
+            className: calendarStyles.calendar,
+        } }));
 }

package/form/controls/DateTimeControl.js

@@ -16,12 +16,16 @@ const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const react_1 = require("react");
 const fluent_1 = require("../../components/fluent");
+const DateControl_1 = require("./DateControl");
 const SkeletonControl_1 = require("./SkeletonControl");
+const TimeControl_1 = require("./TimeControl/TimeControl");
 const utils_1 = require("./TimeControl/utils");
 dayjs_1.default.extend(customParseFormat_1.default);
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
 function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, skeleton, }) {
+    const calendarStyles = (0, DateControl_1.useCalendarStyles)();
+    const timePickerStyles = (0, TimeControl_1.useTimePickerStyles)();
     const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
     const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat) : '');
     const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
@@ -90,6 +94,8 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                     style: {
                         borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                     },
+                }, calendar: {
+                    className: calendarStyles.calendar,
                 } }), (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: {
                     flex: 1,
                     minWidth: 0,
@@ -144,8 +150,6 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                         marginRight: -4,
                         color: react_components_1.tokens.colorNeutralForeground2,
                     }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }), listbox: {
-                    style: {
-                        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
-                    },
+                    className: timePickerStyles.listbox,
                 } })] }));
 }

package/form/controls/TimeControl/TimeControl.d.ts

@@ -1,4 +1,5 @@
 import { ControlProps } from '../types';
+export declare const useTimePickerStyles: () => Record<"listbox", string>;
 export interface TimeControlProps extends ControlProps<number> {
 }
 export declare function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, skeleton, }: Readonly<TimeControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/TimeControl/TimeControl.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimePickerStyles = void 0;
 exports.TimeControl = TimeControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
@@ -16,7 +17,17 @@ const fluent_1 = require("../../../components/fluent");
 const SkeletonControl_1 = require("../SkeletonControl");
 const utils_1 = require("./utils");
 dayjs_1.default.extend(customParseFormat_1.default);
+exports.useTimePickerStyles = (0, react_components_1.makeStyles)({
+    listbox: {
+        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
+        '& .fui-Option': {
+            borderRadius: fluent_1.extendedTokens.controlBorderRadius,
+            padding: `${fluent_1.extendedTokens.optionPaddingVertical} ${react_components_1.tokens.spacingHorizontalS}`,
+        },
+    },
+});
 function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, skeleton, }) {
+    const timePickerStyles = (0, exports.useTimePickerStyles)();
     const { timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
     const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)().startOf('day').add(value, 'minutes').format(timeFormat) : '');
     const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
@@ -82,8 +93,6 @@ function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled,
                     marginRight: -4,
                     color: react_components_1.tokens.colorNeutralForeground2,
                 }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }), listbox: {
-                style: {
-                    borderRadius: fluent_1.extendedTokens.paperBorderRadius,
-                },
+                className: timePickerStyles.listbox,
             } }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.27",
+  "version": "1.4.29",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/lodash": "4.17.20"
   },
-  "gitHead": "5e339733dfb34f81e5a75da48b8e64faeb1e25ee"
+  "gitHead": "bf59bd13938acd5768f93b2524fe58e103981395"
 }