@broxus/react-uikit 0.16.0 → 0.16.1

package/dist/esm/components/Button/Button.js

@@ -6,7 +6,7 @@ import { Link } from '../../components/Link';
 const defaultElement = 'button';
 export const Button = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { component = defaultElement, children, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls || config.prefixCls, shape = config.button?.shape || config.buttonShape, size = config.button?.size || config.buttonSize, type, ...restProps } = props;
+    const { component = defaultElement, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls ?? config.prefixCls, shape = config.button?.shape ?? config.buttonShape, size = config.button?.size ?? config.buttonSize, type, ...restProps } = props;
     const buttonRef = React.useRef(null);
     const onClick = React.useCallback(event => {
         if (restProps.disabled) {
@@ -15,7 +15,7 @@ export const Button = React.forwardRef((props, ref) => {
         }
         restProps.onClick?.(event);
     }, [restProps]);
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.button?.prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => classNames(rootCls, {
         [`${rootCls}-${type}`]: type !== undefined,
         [`${rootCls}-ghost`]: ghost === true,
@@ -23,9 +23,9 @@ export const Button = React.forwardRef((props, ref) => {
         [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);
     if (restProps.href !== undefined) {
-        return (React.createElement(Component, { ref: ref || buttonRef, component: Link, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+        return (React.createElement(Component, { ref: ref || buttonRef, component: Link, href: restProps.href, ...restProps, className: className, onClick: onClick }));
     }
-    return (React.createElement(Component, { ref: ref || buttonRef, component: component, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+    return (React.createElement(Component, { ref: ref || buttonRef, component: component, type: htmlType, ...restProps, className: className, onClick: onClick }));
 });
 if (process.env.NODE_ENV !== 'production') {
     Button.displayName = 'Button';

package/dist/esm/components/ConfigProvider/index.d.ts

@@ -21,16 +21,16 @@ export type ConfigContextConsumedProps = {
         tertiaryColorMode?: ColorMode;
     };
     checkbox?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
     };
     control?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     };
     datePicker?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         nextIcon?: React.ReactNode;
@@ -39,7 +39,7 @@ export type ConfigContextConsumedProps = {
         superPrevIcon?: React.ReactNode;
         superNextIcon?: React.ReactNode;
     };
-    direction?: Direction | string;
+    direction?: Direction;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
     getRootPrefixCls: (prefix?: string, component?: string) => string;
     getTooltipConfig: (props: string | TooltipOptions | undefined) => {
@@ -48,7 +48,7 @@ export type ConfigContextConsumedProps = {
     inverseGlobalColorMode?: ColorMode;
     prefixCls: string;
     radio?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
     };
     section?: {
@@ -58,7 +58,7 @@ export type ConfigContextConsumedProps = {
         tertiaryColorMode?: ColorMode;
     };
     select?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         addIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         arrowIcon?: React.ReactNode | ((props: {
@@ -70,7 +70,7 @@ export type ConfigContextConsumedProps = {
         searchIcon?: React.ReactNode | (() => React.ReactElement);
     };
     timePicker?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         suffixIcon?: React.ReactNode;

package/dist/esm/components/Control/Input/Password/index.js

@@ -7,11 +7,11 @@ import './index.scss';
 import '../../index.scss';
 export const Password = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { prefixCls = config.control?.prefixCls || config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
+    const { prefixCls = config.control?.prefixCls ?? config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const removePasswordValueAttribute = React.useCallback(() => {
         removePasswordTimeout.current = setTimeout(() => {
             const input = inputRef?.current?.getInputRef()?.current;

package/dist/esm/components/Control/Input/useInput.js

@@ -10,7 +10,7 @@ export function fixControlledValue(value) {
 export function useInput(props) {
     const config = useConfig();
     const inputRef = React.useRef(null);
-    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls || config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
+    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls ?? config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(useInternalValueState ? restProps.value || restProps.defaultValue : undefined);
     const onChange = React.useCallback((event) => {
@@ -47,6 +47,7 @@ export function useInput(props) {
     }, [onPressEnter, restProps]);
     const inputProps = React.useMemo(() => ({
         ...restProps,
+        prefixCls,
         value: fixControlledValue(internalValue || restProps.value),
         // eslint-disable-next-line sort-keys
         onBlur,
@@ -54,16 +55,16 @@ export function useInput(props) {
         onClear,
         onFocus,
         onKeyDown,
-    }), [restProps, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    }), [restProps, prefixCls, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames(controlCls, {
         [`${controlCls}-${restProps.type}`]: restProps.type,
         [`${controlCls}-${size}`]: size,
         [`${controlCls}-${state}`]: state,
         [`${controlCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-focused`]: focused,
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-readonly`]: restProps.readOnly,
+        [`${prefixCls}-disabled`]: restProps.disabled,
+        [`${prefixCls}-focused`]: focused,
+        [`${prefixCls}-readonly`]: restProps.readOnly,
     }, className), [
         controlCls,
         restProps.type,
@@ -73,8 +74,6 @@ export function useInput(props) {
         state,
         direction,
         prefixCls,
-        config.control?.prefixCls,
-        config.prefixCls,
         focused,
         className,
     ]);

package/dist/esm/components/Control/index.scss

@@ -31,7 +31,7 @@
     box-sizing: border-box;
     color: var(--control-color);
     cursor: text;
-    display: inline-flex;
+    display: flex;
     font-size: inherit;
     min-height: var(--control-height);
     padding-left: var(--control-padding-horizontal);

package/dist/esm/components/DatePicker/generatePurePicker.d.ts

@@ -0,0 +1,24 @@
+import { type GenerateConfig } from 'rc-picker/lib/generate';
+import * as React from 'react';
+import { type GenericTimePickerProps, type PickerPanelProps, type PickerPanelPropsWithMultiple } from '../../components/DatePicker/types';
+import { type AnyObject } from '../../types';
+export declare const generatePurePicker: <DateType extends AnyObject = AnyObject>(generateConfig: GenerateConfig<DateType>) => {
+    DatePicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, PickerPanelProps<DateType>, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    MonthPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    QuarterPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    TimePicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<GenericTimePickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    WeekPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    YearPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+};

package/dist/esm/components/DatePicker/generatePurePicker.js

@@ -0,0 +1,38 @@
+import { PickerPanel } from 'rc-picker';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
+import { MONTH, MONTHPICKER, QUARTER, QUARTERPICKER, TIME, TIMEPICKER, WEEK, WEEKPICKER, YEAR, YEARPICKER, } from '../../components/DatePicker/constants';
+// eslint-disable-next-line camelcase
+import en_US from '../../components/DatePicker/locale/en_US';
+import { useComponents } from '../../components/DatePicker/useComponents';
+import { getMotionName } from '../../utils';
+export const generatePurePicker = (generateConfig) => {
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+    const getPanel = (picker, displayName) => {
+        const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
+        const Picker = React.forwardRef((props, ref) => {
+            const config = useConfig();
+            const ctxPickerConfig = React.useMemo(() => config[consumerName] || {}, [config]);
+            const { components, direction = ctxPickerConfig.direction || config.direction, locale = en_US, prefixCls = `${config.prefixCls}-datepicker`, ...restProps } = props;
+            const pickerRef = React.useRef(null);
+            const mergedPicker = picker || restProps.picker;
+            const mergedComponents = useComponents(components);
+            React.useImperativeHandle(ref, () => pickerRef.current, []);
+            return (
+            // @ts-ignore
+            React.createElement(PickerPanel, { ref: pickerRef, components: mergedComponents, direction: direction, generateConfig: generateConfig, locale: locale.lang, picker: mergedPicker, prefixCls: prefixCls, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), ...restProps }));
+        });
+        if (process.env.NODE_ENV !== 'production' && displayName) {
+            Picker.displayName = displayName;
+        }
+        return Picker;
+    };
+    const DatePicker = getPanel();
+    const MonthPicker = getPanel(MONTH, MONTHPICKER);
+    const QuarterPicker = getPanel(QUARTER, QUARTERPICKER);
+    // @ts-ignore
+    const TimePicker = getPanel(TIME, TIMEPICKER);
+    const WeekPicker = getPanel(WEEK, WEEKPICKER);
+    const YearPicker = getPanel(YEAR, YEARPICKER);
+    return { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker };
+};

package/dist/esm/components/DatePicker/generateSinglePicker.js

@@ -17,8 +17,8 @@ export const generateSinglePicker = (generateConfig) => {
         const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
             const config = useConfig();
-            const ctxPickerConfig = config[consumerName] || {};
-            const { allowClear = true, builtinPlacements = placements, className, components, direction = ctxPickerConfig.direction || config.direction, getPopupContainer = config.getPopupContainer, locale = en_US, placeholder, placement = 'bottom-left', popupClassName, prefixCls = `${config.prefixCls}-datepicker`, rootClassName, size, state, style, onCalendarChange, ...restProps } = props;
+            const ctxPickerConfig = React.useMemo(() => config[consumerName] || {}, [config]);
+            const { allowClear = true, builtinPlacements = placements, className, components, direction = ctxPickerConfig.direction ?? config.direction, getPopupContainer = config.getPopupContainer, locale = en_US, placeholder, placement = 'bottom-left', popupClassName, prefixCls = `${config.prefixCls}-datepicker`, rootClassName, size, state, style, onCalendarChange, ...restProps } = props;
             const pickerRef = React.useRef(null);
             const mergedPicker = picker || restProps.picker;
             const mergedComponents = useComponents(components);
@@ -50,7 +50,7 @@ export const generateSinglePicker = (generateConfig) => {
                         [`${prefixCls}-rtl`]: direction === 'rtl',
                     }, className), classNames: {
                         popup: classNames(popupClassName),
-                    }, components: mergedComponents, directio: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: getPlaceholder(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, suffixIcon: suffixIcon, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), style: style, transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
+                    }, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: getPlaceholder(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, suffixIcon: suffixIcon, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), style: style, transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
                         popup: { ...restProps.styles },
                     } })));
         });

package/dist/esm/components/DatePicker/index.d.ts

@@ -1,9 +1,12 @@
 import { type DateTime } from 'luxon';
 import { generatePicker } from '../../components/DatePicker/generatePicker';
+import { generatePurePicker } from '../../components/DatePicker/generatePurePicker';
 import './index.scss';
 export * from '../../components/DatePicker/locale';
 export * from '../../components/DatePicker/types';
 export interface DatePicker extends ReturnType<typeof generatePicker<DateTime>> {
     generatePicker: typeof generatePicker;
+    generatePurePicker: typeof generatePurePicker;
+    Panel: ReturnType<typeof generatePurePicker<DateTime>>;
 }
 export declare const DatePicker: DatePicker;

package/dist/esm/components/DatePicker/index.js

@@ -1,8 +1,11 @@
 import dayjsGenerateConfig from 'rc-picker/lib/generate/luxon';
 import { generatePicker } from '../../components/DatePicker/generatePicker';
+import { generatePurePicker } from '../../components/DatePicker/generatePurePicker';
 import './index.scss';
 export * from '../../components/DatePicker/locale';
 export * from '../../components/DatePicker/types';
 const InternalDatePicker = generatePicker(dayjsGenerateConfig);
 export const DatePicker = InternalDatePicker;
 DatePicker.generatePicker = generatePicker;
+DatePicker.generatePurePicker = generatePurePicker;
+DatePicker.Panel = generatePurePicker(dayjsGenerateConfig);

package/dist/esm/components/DatePicker/index.scss

@@ -429,7 +429,7 @@
     z-index: 1;
 }
 
-.uk-datepicker-cell-disabled {
+.uk-datepicker-cell-disabled:not(.uk-datepicker-cell-selected) {
     color: var(--datepicker-cell-disabled-color);
     cursor: not-allowed;
 }
@@ -520,7 +520,7 @@
     color: var(--datepicker-cell-active-color);
 }
 
-.uk-datepicker-time-panel-cell-disabled .uk-datepicker-time-panel-cell-inner {
+.uk-datepicker-time-panel-cell-disabled:not(.uk-datepicker-time-panel-cell-selected) .uk-datepicker-time-panel-cell-inner {
     color: var(--datepicker-cell-disabled-color);
     cursor: not-allowed;
 }
@@ -618,13 +618,13 @@
     --datepicker-header-padding-horizontal: var(--global-small-gutter);
     --datepicker-header-font-size: var(--global-font-size);
     --datepicker-header-font-weight: var(--global-bold-font-weight);
-    --datepicker-header-height: var(--global-control-height);
+    --datepicker-header-height: var(--global-control-large-height);
     --datepicker-body-padding-horizontal: var(--global-gutter);
     --datepicker-body-padding-vertical: var(--global-small-gutter);
     --datepicker-header-button-color: var(--global-muted-color);
     --datepicker-header-button-font-size: var(--global-font-size);
     --datepicker-header-button-font-weight: var(--global-bold-font-weight);
-    --datepicker-header-button-line-height: #{$datepicker-button-line-height};
+    --datepicker-header-button-line-height: var(--global-control-large-height);
     --datepicker-header-button-padding-horizontal: var(--global-small-gutter);
     --datepicker-header-button-hover-color: var(--global-color);
     --datepicker-header-view-button-hover-color: var(--global-primary-color);
@@ -633,7 +633,7 @@
     --datepicker-footer-ranges-padding-horizontal: var(--global-small-gutter);
     --datepicker-footer-ranges-padding-vertical: var(--global-small-gutter);
     --datepicker-cell-border-radius: var(--global-small-border-radius);
-    --datepicker-cell-height: #{$datepicker-cell-height};
+    --datepicker-cell-height: var(--global-control-height);
     --datepicker-cell-width: #{$datepicker-cell-width};
     --datepicker-cell-padding: var(--global-xsmall-gutter);
     --datepicker-cell-color: var(--global-color);

package/dist/esm/components/DatePicker/types.d.ts

@@ -1,7 +1,9 @@
-import { type PickerRef, type PickerProps as RcPickerProps, type RangePickerProps as RcRangePickerProps } from 'rc-picker';
+import { type PickerRef, type PickerPanelProps as RcPickerPanelProps, type PickerProps as RcPickerProps, type RangePickerProps as RcRangePickerProps } from 'rc-picker';
 import { type Locale as RcPickerLocale } from 'rc-picker/lib/interface';
 import type * as React from 'react';
+import { type TimePickerLocale } from '../../components/TimePicker';
 import { type AnyObject, type SizeType, type StateType } from '../../types';
+import { PickerPanelRef } from 'rc-picker/lib/PickerPanel';
 export interface AdditionalPickerLocaleProps {
     dateFormat?: string;
     dateTimeFormat?: string;
@@ -22,7 +24,7 @@ export interface AdditionalPickerLocaleLangProps {
 }
 export interface PickerLocale extends AdditionalPickerLocaleProps {
     lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
-    timePickerLocale: any;
+    timePickerLocale: TimePickerLocale;
 }
 declare const DatePickerPlacements: readonly ["bottomLeft", "bottomRight", "topLeft", "topRight"];
 type DatePickerPlacement = (typeof DatePickerPlacements)[number];
@@ -35,7 +37,10 @@ type InjectDefaultProps<Props> = Omit<Props, 'locale' | 'generateConfig' | 'hide
     size?: SizeType;
     state?: StateType;
 };
-export interface PickerProps<DateType extends AnyObject = any> extends InjectDefaultProps<RcPickerProps<DateType>> {
+export interface PickerProps<DateType extends AnyObject = AnyObject> extends InjectDefaultProps<RcPickerProps<DateType>> {
+}
+export interface PickerPanelProps<DateType extends AnyObject = AnyObject> extends Omit<RcPickerPanelProps<DateType>, 'locale' | 'generateConfig' | 'hideHeader'> {
+    locale?: PickerLocale;
 }
 export interface RangePickerProps<DateType extends AnyObject = AnyObject> extends InjectDefaultProps<RcRangePickerProps<DateType>> {
 }
@@ -47,4 +52,10 @@ export type PickerPropsWithMultiple<DateType extends AnyObject = any, InnerPicke
     onChange?: (date: ValueType, dateString: string | string[]) => void;
     onConfirm?: (date: ValueType) => void;
 };
+export type PickerPanelPropsWithMultiple<DateType extends AnyObject = any, InnerPickerProps extends PickerProps<DateType> = PickerProps<DateType>, ValueType = DateType> = Omit<InnerPickerProps, 'defaultValue' | 'value' | 'onChange' | 'onOk'> & React.RefAttributes<PickerPanelRef> & {
+    defaultValue?: ValueType | null;
+    value?: ValueType | null;
+    onChange?: (date: ValueType, dateString: string | string[]) => void;
+    onConfirm?: (date: ValueType) => void;
+};
 export {};

package/dist/esm/styles/variables.scss

@@ -623,19 +623,14 @@ $countdown-separator-font-size-m:                               3rem !default; /
 // DatePicker
 // ========================================================================
 
-$datepicker-dropdown-background:                                $global-muted-background !default;
-$datepicker-dropdown-border:                                    $global-border !default;
-$datepicker-dropdown-border-style:                              $global-border-style !default;
-$datepicker-dropdown-border-width:                              $global-border-width !default;
-$datepicker-dropdown-border-radius:                             $global-border-radius !default;
 $datepicker-button-font-size:                                   $global-font-size !default;
-$datepicker-button-line-height:                                 40px !default;
+$datepicker-button-line-height:                                 $global-control-large-height !default;
 $datepicker-button-padding-horizontal:                          $global-small-gutter !default;
 $datepicker-body-padding-vertical:                              $global-small-gutter !default;
 $datepicker-body-padding-horizontal:                            $global-gutter !default;
 $datepicker-cell-border-radius:                                 $global-small-border-radius !default;
-$datepicker-cell-height:                                        32px !default;
-$datepicker-cell-width:                                         44px !default;
+$datepicker-cell-height:                                        $global-control-height !default;
+$datepicker-cell-width:                                         $global-control-height * 1.05 !default;
 $datepicker-cell-padding:                                       $global-xsmall-gutter !default;
 $datepicker-cell-color:                                         $global-color !default;
 $datepicker-cell-hover-background:                              $global-secondary-background !default;
@@ -646,6 +641,11 @@ $datepicker-cell-disabled-color:                                $global-muted-co
 $datepicker-time-column-height:                                 252px !default;
 $datepicker-time-column-width:                                  60px !default;
 $datepicker-time-cell-height:                                   28px !default;
+$datepicker-dropdown-background:                                $global-muted-background !default;
+$datepicker-dropdown-border:                                    $global-border !default;
+$datepicker-dropdown-border-style:                              $global-border-style !default;
+$datepicker-dropdown-border-width:                              $global-border-width !default;
+$datepicker-dropdown-border-radius:                             $global-border-radius !default;
 
 
 // Description list