@broxus/react-uikit 0.16.0 → 0.17.0

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

@@ -16,7 +16,8 @@
 
 @import '../../styles/variables.scss';
 
-/* Layout
+
+/* Picker
  ========================================================================== */
 
 [class^='uk-datepicker'],
@@ -35,7 +36,7 @@
     border-radius: var(--control-border-radius);
     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);
@@ -88,6 +89,9 @@
     display: inline-flex;
     position: relative;
     width: 100%;
+    @if mixin-exists(hook-datepicker-input) {
+        @include hook-datepicker-input;
+    }
 }
 
 .uk-datepicker .uk-datepicker-input .uk-control {
@@ -95,7 +99,9 @@
     padding: 0;
 }
 
-/* Panel */
+
+/* Panel
+ ========================================================================== */
 
 .uk-datepicker-panel-layout {
     align-items: stretch;
@@ -147,6 +153,43 @@
     }
 }
 
+.uk-datepicker-date-panel {
+    @if mixin-exists(hook-datepicker-date-panel) {
+        @include hook-datepicker-date-panel;
+    }
+}
+
+.uk-datepicker-month-panel {
+    @if mixin-exists(hook-datepicker-month-panel) {
+        @include hook-datepicker-month-panel;
+    }
+}
+
+.uk-datepicker-quarter-panel {
+    @if mixin-exists(hook-datepicker-quarter-panel) {
+        @include hook-datepicker-quarter-panel;
+    }
+}
+
+.uk-datepicker-decade-panel {
+    @if mixin-exists(hook-datepicker-decade-panel) {
+        @include hook-datepicker-decade-panel;
+    }
+}
+
+.uk-datepicker-week-panel {
+    @if mixin-exists(hook-datepicker-week-panel) {
+        @include hook-datepicker-week-panel;
+    }
+}
+
+.uk-datepicker-year-panel {
+    @if mixin-exists(hook-datepicker-year-panel) {
+        @include hook-datepicker-year-panel;
+    }
+}
+
+/* Header */
 .uk-datepicker-header {
     align-items: center;
     border-bottom: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
@@ -171,6 +214,7 @@
     }
 }
 
+/* Body and content */
 .uk-datepicker-body {
     padding: var(--datepicker-body-padding-vertical) var(--datepicker-body-padding-horizontal);
     @if mixin-exists(hook-datepicker-body) {
@@ -188,14 +232,7 @@
     }
 }
 
-/* Elements */
-
-.uk-datepicker-content th {
-    box-sizing: border-box;
-    height: var(--datepicker-cell-height);
-    padding: 0;
-}
-
+// Elements
 .uk-datepicker-header button {
     align-items: center;
     appearance: none;
@@ -215,30 +252,18 @@
     padding: 0 var(--datepicker-header-button-padding-horizontal);
     text-align: center;
     transition: color var(--transition-medium-fast-duration);
-    @if mixin-exists(hook-datepicker-header-button) {
-        @include hook-datepicker-header-button;
-    }
 }
 
 .uk-datepicker-header-view button {
     color: inherit;
-    @if mixin-exists(hook-datepicker-header-view-button) {
-        @include hook-datepicker-header-view-button;
-    }
 }
 
 .uk-datepicker-header-view button:hover {
     color: var(--datepicker-header-view-button-hover-color);
-    @if mixin-exists(hook-datepicker-header-view-button-hover) {
-        @include hook-datepicker-header-view-button-hover;
-    }
 }
 
 .uk-datepicker-header > button:hover {
     color: var(--datepicker-header-button-hover-color);
-    @if mixin-exists(hook-datepicker-header-button-hover) {
-        @include hook-datepicker-header-button-hover;
-    }
 }
 
 .uk-datepicker-prev-icon,
@@ -291,48 +316,13 @@
     width: 7px;
 }
 
-/*
- * Time panel
- */
-
-.uk-datepicker-time-panel .uk-datepicker-content {
-    display: flex;
-    flex: auto;
-    height: var(--datepicker-time-column-height);
-    @if mixin-exists(hook-datepicker-time-panel-content) {
-        @include hook-datepicker-time-panel-content;
-    }
-}
-
-.uk-datepicker-time-panel-column {
-    flex: 1 0 auto;
-    margin: var(--global-xsmall-margin) 0;
-    overflow: hidden;
-    padding: 0;
-    scrollbar-color: var(--global-scroll-background, var(--global-muted-backgrounf, rgba(#000, 0.15))) transparent;
-    scrollbar-width: thin;
-    text-align: start;
-    transition: background var(--transition-medium-fast-duration);
-    width: var(--datepicker-time-column-width);
-    @if mixin-exists(hook-datepicker-time-panel-column) {
-        @include hook-datepicker-time-panel-column;
-    }
-}
-
-.uk-datepicker-time-panel-column:hover {
-    overflow-y: auto;
-}
-
-.uk-datepicker-time-panel-column ul {
-    list-style: none;
-    margin: 0;
+.uk-datepicker-content th {
+    box-sizing: border-box;
+    height: var(--datepicker-cell-height);
     padding: 0;
 }
 
-/*
- * Footer
- */
-
+/* Footer */
 .uk-datepicker-footer {
     border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
     padding: var(--datepicker-footer-padding-vertical) var(--datepicker-footer-padding-horizontal);
@@ -386,6 +376,10 @@
     z-index: 1;
 }
 
+.uk-datepicker-cell-in-view {
+    color: var(--datepicker-cell-color);
+}
+
 .uk-datepicker-cell-inner {
     border-radius: var(--datepicker-cell-border-radius);
     display: inline-block;
@@ -394,13 +388,12 @@
     min-width: var(--datepicker-cell-height);
     position: relative;
     z-index: 2;
+    @if mixin-exists(hook-datepicker-cell-inner) {
+        @include hook-datepicker-cell-inner;
+    }
 }
 
-.uk-datepicker-cell-in-view {
-    color: var(--datepicker-cell-color);
-}
-
-/* Hover Cell */
+/* Hover cell state */
 .uk-datepicker-cell:hover:not(.uk-datepicker-cell-in-view, .uk-datepicker-cell-disabled) .uk-datepicker-cell-inner,
 .uk-datepicker-cell:hover:not(
     .uk-datepicker-cell-selected,
@@ -418,18 +411,8 @@
     color: var(--datepicker-cell-active-color);
 }
 
-.uk-datepicker-cell-in-view.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
-    border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
-    border-radius: var(--datepicker-cell-border-radius);
-    bottom: 0;
-    content: '';
-    inset-inline: 0;
-    position: absolute;
-    top: 0;
-    z-index: 1;
-}
-
-.uk-datepicker-cell-disabled {
+/* Disabled cell state */
+.uk-datepicker-cell-disabled:not(.uk-datepicker-cell-selected) {
     color: var(--datepicker-cell-disabled-color);
     cursor: not-allowed;
 }
@@ -442,6 +425,18 @@
     background: none;
 }
 
+/* Today */
+.uk-datepicker-cell-in-view.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
+    border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+    border-radius: var(--datepicker-cell-border-radius);
+    bottom: 0;
+    content: '';
+    inset-inline: 0;
+    position: absolute;
+    top: 0;
+    z-index: 1;
+}
+
 .uk-datepicker-cell-disabled.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
     border-color: var(--datepicker-cell-disabled-border);
 }
@@ -490,6 +485,39 @@
 }
 
 
+/* Time panel */
+.uk-datepicker-time-panel .uk-datepicker-content {
+    display: flex;
+    flex: auto;
+    height: var(--datepicker-time-column-height);
+}
+
+.uk-datepicker-time-panel-column {
+    flex: 1 0 auto;
+    margin: var(--global-xsmall-margin) 0;
+    overflow: hidden;
+    padding: 0;
+    scrollbar-color: var(--global-scroll-background, var(--global-muted-backgrounf, rgba(#000, 0.15))) transparent;
+    scrollbar-width: thin;
+    text-align: start;
+    transition: background var(--transition-medium-fast-duration);
+    width: var(--datepicker-time-column-width);
+    @if mixin-exists(hook-datepicker-time-panel-column) {
+        @include hook-datepicker-time-panel-column;
+    }
+}
+
+.uk-datepicker-time-panel-column:hover {
+    overflow-y: auto;
+}
+
+.uk-datepicker-time-panel-column ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+
 /* Time
  ========================================================================== */
 
@@ -520,7 +548,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;
 }
@@ -570,8 +598,7 @@
 
 .uk-datepicker-dropdown {
     background-color: var(--datepicker-dropdown-background);
-    border: var(--datepicker-dropdown-border-width) var(--datepicker-dropdown-border-style)
-    var(--datepicker-dropdown-border);
+    border: var(--datepicker-dropdown-border-width) var(--datepicker-dropdown-border-style) var(--datepicker-dropdown-border);
     border-radius: var(--datepicker-dropdown-border-radius);
     font-variant: initial;
     left: -9999px;
@@ -618,13 +645,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 +660,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/cjs/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/cjs/components/Drop/index.d.ts

@@ -3,6 +3,7 @@ import { type BuildInPlacements, type TriggerProps } from 'rc-trigger';
 import { type AlignType } from 'rc-trigger/lib/interface';
 import * as React from 'react';
 import './index.scss';
+export type DropPlacement = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
 export interface DropProps extends Pick<TriggerProps, 'alignPoint' | 'action' | 'autoDestroy' | 'blurDelay' | 'children' | 'focusDelay' | 'getPopupContainer' | 'hideAction' | 'mask' | 'maskClosable' | 'maskMotion' | 'mouseEnterDelay' | 'mouseLeaveDelay' | 'prefixCls' | 'showAction' | 'stretch' | 'zIndex'> {
     align?: AlignType;
     arrow?: boolean;
@@ -16,7 +17,7 @@ export interface DropProps extends Pick<TriggerProps, 'alignPoint' | 'action' |
     overlay?: (() => React.ReactElement) | React.ReactElement;
     overlayClassName?: string;
     overlayStyle?: React.CSSProperties;
-    placement?: string;
+    placement?: DropPlacement;
     rootCls?: string;
     visible?: boolean;
     onAlign?: (element: HTMLElement, align: AlignType) => void;

package/dist/cjs/styles/mixins.scss

@@ -824,6 +824,29 @@
 
 @mixin hook-cover-misc() {}
 
+@mixin hook-datepicker() {}
+@mixin hook-datepicker-hover() {}
+@mixin hook-datepicker-focus() {}
+@mixin hook-datepicker-input() {}
+@mixin hook-datepicker-panel-layout() {}
+@mixin hook-datepicker-panel() {}
+@mixin hook-datepicker-datetime-panel() {}
+@mixin hook-datepicker-time-panel() {}
+@mixin hook-datepicker-date-panel() {}
+@mixin hook-datepicker-month-panel() {}
+@mixin hook-datepicker-quarter-panel() {}
+@mixin hook-datepicker-decade-panel() {}
+@mixin hook-datepicker-week-panel() {}
+@mixin hook-datepicker-year-panel() {}
+@mixin hook-datepicker-header() {}
+@mixin hook-datepicker-header-view() {}
+@mixin hook-datepicker-body() {}
+@mixin hook-datepicker-content() {}
+@mixin hook-datepicker-footer() {}
+@mixin hook-datepicker-ranges() {}
+@mixin hook-datepicker-cell() {}
+@mixin hook-datepicker-cell-inner() {}
+@mixin hook-datepicker-time-panel-column() {}
 @mixin hook-datepicker-dropdown() {}
 
 @mixin hook-description-list-term() {}

package/dist/cjs/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