@broxus/react-uikit 0.16.1 → 0.17.0

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { type ButtonProps } from '../../components/Button';
+import { type PickerLocale } from '../../components/DatePicker';
 import { type ColorMode } from '../../components/Inverse';
+import { type TimePickerLocale } from '../../components/TimePicker';
 import { type BreakpointsConfig, type Direction, type TooltipOptions } from '../../types';
 type PropsWithMouseHandler = {
     onClick: React.HTMLAttributes<HTMLElement>['onClick'];
@@ -31,6 +33,7 @@ export type ConfigContextConsumedProps = {
     };
     datePicker?: {
         direction?: Direction;
+        locale?: PickerLocale;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         nextIcon?: React.ReactNode;
@@ -71,6 +74,7 @@ export type ConfigContextConsumedProps = {
     };
     timePicker?: {
         direction?: Direction;
+        locale?: TimePickerLocale;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         suffixIcon?: React.ReactNode;

package/dist/cjs/components/Control/Select/index.d.ts

@@ -2,17 +2,18 @@ import { type BaseSelectRef, OptGroup, Option, type SelectProps as RcSelectProps
 import { type OptionProps } from 'rc-select/lib/Option';
 import { type BaseOptionType, type DefaultOptionType } from 'rc-select/lib/Select';
 import * as React from 'react';
-import { type ControlProps } from '../../../components/Control/types';
+import { type ControlProps, type SelectPlacement } from '../../../components/Control/types';
 import { type SizeType } from '../../../types';
 import './index.scss';
 import '../index.scss';
 export type { BaseSelectRef, OptionProps };
-export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode'> {
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode' | 'placement'> {
     mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
     size?: SizeType;
 }
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'value' | 'defaultValue'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
     mode?: 'multiple' | 'tags';
+    placement?: SelectPlacement;
     showArrow?: boolean;
 }
 export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {

package/dist/cjs/components/Control/types.d.ts

@@ -15,3 +15,4 @@ export interface ControlProps<T> {
     value?: T;
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }
+export type SelectPlacement = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';

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,17 +411,7 @@
     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;
-}
-
+/* 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
  ========================================================================== */
 
@@ -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;

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() {}