@headless-adminapp/fluent 1.4.26 → 1.4.28

package/App/LayoutProvider.d.ts

@@ -4,5 +4,5 @@ import { FC, PropsWithChildren } from 'react';
 import { ExtendedThemeProps } from '../components/fluent/FluentProvider';
 export type LayoutProviderProps = Omit<LayoutProviderIntenralProps, 'containers'> & {
     theme?: PartialTheme;
-} & ExtendedThemeProps;
+} & Partial<ExtendedThemeProps>;
 export declare const LayoutProvider: FC<PropsWithChildren<LayoutProviderProps>>;

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,

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/Button.js

@@ -34,5 +34,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.Button = (0, react_1.forwardRef)(function Button({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, styles[rest.size || 'medium']), "data-icon-only": !rest.children && !!rest.icon ? 'true' : undefined, ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, styles[rest.size || 'medium'], className), "data-icon-only": !rest.children && !!rest.icon ? 'true' : undefined, ref: ref }));
 });

package/components/fluent/Combobox.js

@@ -16,7 +16,7 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.Combobox = (0, react_1.forwardRef)(function Combobox({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Combobox, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref, listbox: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Combobox, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref, listbox: {
             className: styles.listbox,
         } }));
 });

package/components/fluent/DialogSurface.js

@@ -12,5 +12,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.DialogSurface = (0, react_1.forwardRef)(function DialogSurface({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref }));
 });

package/components/fluent/Dropdown.js

@@ -34,10 +34,8 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.Dropdown = (0, react_1.forwardRef)(function Dropdown({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, (rest.appearance === 'outline' || !rest.appearance) && styles.outlined), ref: ref, 
-        // open
-        // onOpenChange={() => {}}
-        listbox: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, (rest.appearance === 'outline' || !rest.appearance) &&
+            styles.outlined, className), ref: ref, listbox: {
             className: styles.listbox,
         } }));
 });

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/Input.js

@@ -39,5 +39,6 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.Input = (0, react_1.forwardRef)(function Input({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, rest.readOnly && styles.readonly, (rest.appearance === 'outline' || !rest.appearance) && styles.outlined), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, rest.readOnly && styles.readonly, (rest.appearance === 'outline' || !rest.appearance) &&
+            styles.outlined, className), ref: ref }));
 });

package/components/fluent/MenuItem.js

@@ -13,5 +13,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref }));
 });

package/components/fluent/MenuPopover.js

@@ -13,5 +13,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.MenuPopover = (0, react_1.forwardRef)(function MenuPopover({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref }));
 });

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,10 +8,10 @@ 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) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Option, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Option, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref }));
 });

package/components/fluent/PopoverSurface.js

@@ -12,5 +12,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.PopoverSurface = (0, react_1.forwardRef)(function PopoverSurface({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref }));
 });

package/components/fluent/SearchBox.js

@@ -38,5 +38,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.SearchBox = (0, react_1.forwardRef)(function SearchBox({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, rest.readOnly && styles.readonly, rest.appearance === 'outline' && styles.outlined), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, rest.readOnly && styles.readonly, rest.appearance === 'outline' && styles.outlined, className), ref: ref }));
 });

package/components/fluent/SpinButton.js

@@ -13,5 +13,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.SpinButton = (0, react_1.forwardRef)(function SpinButton({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref }));
 });

package/components/fluent/Tag.js

@@ -12,5 +12,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.Tag = (0, react_1.forwardRef)(function Tag({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), ref: ref }));
 });

package/components/fluent/Textarea.js

@@ -26,5 +26,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.Textarea = (0, react_1.forwardRef)(function Textarea({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, rest.readOnly && styles.readonly), ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, rest.readOnly && styles.readonly, className), ref: ref }));
 });

package/components/fluent/ToolbarButton.js

@@ -18,5 +18,5 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.ToolbarButton = (0, react_1.forwardRef)(function ToolbarButton({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), "data-icon-only": !rest.children && !!rest.icon ? 'true' : undefined, ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, className), "data-icon-only": !rest.children && !!rest.icon ? 'true' : undefined, ref: 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.26",
+  "version": "1.4.28",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/lodash": "4.17.20"
   },
-  "gitHead": "086994cfa783e4228290a2108dc84e057dbb00fb"
+  "gitHead": "97f2ca3d52879bfff96af530fcc1336989f2fb09"
 }