@broxus/react-uikit 0.1.0

package/dist/cjs/components/Control/Select/index.scss

@@ -0,0 +1,655 @@
+// Name:            Control
+// Description:     Component to create Select elements
+//
+// Component:       `uk-control-select`
+//
+// Modifier:        `uk-select-single`
+//                  `uk-select-multiple`
+//                  `uk-control-small`
+//                  `uk-control-medium`
+//                  `uk-control-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../../styles/variables.scss';
+
+
+// Mixins
+// ========================================================================
+
+@mixin select-item() {
+    color: var(--select-item-color);
+    display: block;
+    font-weight: normal;
+    line-height: var(--select-item-line-height);
+    padding: var(--select-gutter);
+    position: relative;
+}
+
+
+/* ========================================================================
+   Component: Select
+ ========================================================================== */
+
+.uk-select {
+    cursor: pointer;
+    display: flex;
+    min-height: 100%;
+    padding: 0;
+    position: relative;
+    width: 100%;
+    @if mixin-exists(hook-select) {
+        @include hook-select;
+    }
+}
+
+.uk-select-selector {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 var(--select-selector-padding-horizontal);
+    position: relative;
+    width: 100%;
+    @if mixin-exists(hook-select-selector) {
+        @include hook-select-selector;
+    }
+}
+
+.uk-select-selector input {
+    cursor: inherit;
+    font: inherit;
+
+}
+
+/* Disabled */
+.uk-select-selector.uk-select-disabled,
+.uk-select-selector.uk-select-disabled input {
+    cursor: not-allowed;
+}
+
+// Reset search input style
+.uk-select-selector .uk-select-selection-search-input {
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: var(--select-selection-search-input-color);
+    margin: 0;
+    outline: none;
+    padding: 0;
+    @if mixin-exists(hook-select-selection-search-input) {
+        @include hook-select-selection-search-input;
+    }
+}
+
+.uk-select-selector .uk-select-selection-search-input::-webkit-search-cancel-button {
+    appearance: none;
+    display: none;
+}
+
+//
+// Selection
+//
+
+.uk-select-selection-item {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    // IE11 css hack. `*::-ms-backdrop,` is a must have
+    @media all and (-ms-high-contrast: none) {
+        *::-ms-backdrop,
+        & {
+            flex: auto;
+        }
+    }
+}
+
+//
+// Placeholder
+//
+
+.uk-select-selection-placeholder {
+    color: var(--select-selection-placeholder-color);
+    overflow: hidden;
+    pointer-events: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    @if mixin-exists(hook-select-selection-placeholder) {
+        @include hook-select-selection-placeholder;
+    }
+
+    // IE11 css hack. `*::-ms-backdrop,` is a must have
+    @media all and (-ms-high-contrast: none) {
+        *::-ms-backdrop,
+        & {
+            flex: auto;
+        }
+    }
+}
+
+//
+// Search
+//
+
+.uk-select-show-search {
+    cursor: text;
+}
+
+
+/* Single selection
+ ========================================================================== */
+
+.uk-select-single .uk-select-selector {
+    overflow: hidden;
+    @if mixin-exists(hook-select-single-selector) {
+        @include hook-select-single-selector;
+    }
+}
+
+.uk-select-single .uk-select-selection-search {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    left: var(--select-selector-padding-horizontal);
+    position: absolute;
+    right: var(--select-selector-padding-horizontal);
+    top: 0;
+    @if mixin-exists(hook-select-single-selection-search) {
+        @include hook-select-single-selection-search;
+    }
+}
+
+.uk-select-single .uk-select-selection-search-input {
+    height: 100%;
+    line-height: initial;
+    width: 100%;
+    @if mixin-exists(hook-select-single-selection-search-input) {
+        @include hook-select-single-selection-search-input;
+    }
+}
+
+.uk-select-single .uk-select-selection-item,
+.uk-select-single .uk-select-selection-placeholder {
+    padding: 0;
+    transition: all var(--transition-duration);
+}
+
+.uk-select-single .uk-select-selection-item {
+    position: relative;
+    user-select: none;
+    @if mixin-exists(hook-select-single-selection-item) {
+        @include hook-select-single-selection-item;
+    }
+}
+
+// Opacity selection if open
+.uk-select-single.uk-select-open .uk-select-selection-item {
+    color: var(--select-selection-placeholder-color);
+    @if mixin-exists(hook-select-single-open-selection-item) {
+        @include hook-select-single-open-selection-item;
+    }
+}
+
+
+/* Multiple selection
+ ========================================================================== */
+
+.uk-select-multiple .uk-select-selector {
+    padding: var(--select-gutter) var(--select-selector-padding-horizontal);
+    @if mixin-exists(hook-select-multiple-selector) {
+        @include hook-select-multiple-selector;
+    }
+}
+
+.uk-select-multiple .uk-select-selection-placeholder {
+    left: var(--select-selector-padding-horizontal);
+    position: absolute;
+    right: var(--select-selector-padding-horizontal);
+    top: 50%;
+    transform: translateY(-50%);
+    transition: all var(--transition-duration);
+    @if mixin-exists(hook-select-multiple-selection-placeholder) {
+        @include hook-select-multiple-selection-placeholder;
+    }
+}
+
+.uk-select-multiple .uk-select-selection-overflow {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    grid-gap: var(--select-gutter);
+    height: auto;
+    padding: 0;
+    width: 100%;
+}
+
+.uk-select-multiple .uk-select-selection-overflow-item {
+    flex: none;
+    max-width: 100%;
+}
+
+.uk-select-multiple .uk-select-selection-overflow-item-suffix {
+    display: none;
+    left: unset !important;
+    position: unset !important;
+    top: unset !important;
+}
+
+.uk-select-multiple.uk-select-open .uk-select-selection-overflow-item-suffix {
+    display: block;
+}
+
+.uk-select-multiple .uk-select-selection-item {
+    align-items: center;
+    background-color: var(--select-selection-item-background);
+    border-radius: var(--select-selection-item-border-radius);
+    box-sizing: border-box;
+    display: flex;
+    flex: none;
+    font-size: var(--select-selection-item-font-size);
+    line-height: var(--select-selection-item-line-height);
+    max-width: 100%;
+    padding: 0;
+    position: relative;
+    transition: font-size var(--transition-duration),
+        line-height var(--transition-duration),
+        height var(--transition-duration);
+    user-select: none;
+    @if mixin-exists(hook-select-multiple-selection-item) {
+        @include hook-select-multiple-selection-item;
+    }
+}
+
+.uk-select-multiple .uk-select-selection-item-content {
+    display: inline-flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    padding: 0 var(--select-gutter);
+    text-overflow: ellipsis;
+    white-space: pre;
+}
+
+.uk-select-multiple .uk-select-selection-item-remove {
+    --icon-size: var(--select-selection-item-remove-icon-size);
+
+    align-items: center;
+    color: var(--control-icon-color);
+    cursor: pointer;
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding-right: var(--select-gutter);
+    @if mixin-exists(hook-select-multiple-selection-item-remove) {
+        @include hook-select-multiple-selection-item-remove;
+    }
+}
+
+.uk-select-multiple .uk-select-selection-item-remove:hover {
+    color: var(--select-selection-item-remove-icon-hover-color);
+}
+
+.uk-select-multiple .uk-select-selection-search {
+    display: flex;
+    flex: none;
+    position: relative;
+    @if mixin-exists(hook-select-multiple-selection-search) {
+        @include hook-select-multiple-selection-search;
+    }
+}
+
+.uk-select-multiple .uk-select-selection-search-input,
+.uk-select-multiple .uk-select-selection-search-mirror {
+    font-family: inherit;
+    transition: all var(--transition-duration);
+}
+
+.uk-select-multiple .uk-select-selection-search-input {
+    min-width: 4.1px; // fix search cursor missing
+    width: 100%;
+    @if mixin-exists(hook-select-multiple-selection-search-input) {
+        @include hook-select-multiple-selection-search-input;
+    }
+}
+
+.uk-select-multiple .uk-select-selection-search-mirror {
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    white-space: pre; // fix whitespace wrapping caused width calculation bug
+    z-index: 999;
+}
+
+
+/* Icons
+ ========================================================================== */
+
+.uk-select-arrow,
+.uk-select-clear {
+    align-items: center;
+    color: var(--select-icon-color);
+    cursor: pointer;
+    display: flex;
+    padding-right: var(--select-selector-padding-horizontal);
+    transition: color var(--transition-duration) var(--ease-in-out);
+
+}
+
+.uk-select:not(.uk-select-disabled) .uk-select-arrow:hover,
+.uk-select:not(.uk-select-disabled) .uk-select-clear:hover {
+    color: var(--select-icon-hover-color);
+}
+
+.uk-select-disabled .uk-select-arrow,
+.uk-select-disabled .uk-select-clear {
+    color: var(--select-icon-disabled-color);
+    cursor: not-allowed;
+}
+
+.uk-select-arrow {
+    --icon-size: var(--select-arrow-icon-size);
+
+    order: 99;
+    @if mixin-exists(hook-select-arrow) {
+        @include hook-select-arrow;
+    }
+}
+
+.uk-select-clear {
+    @if mixin-exists(hook-select-clear) {
+        @include hook-select-clear;
+    }
+}
+
+
+/* Dropdown
+ ========================================================================== */
+
+.uk-select-dropdown {
+    background-color: var(--select-dropdown-background);
+    border: var(--select-dropdown-border-width) var(--select-dropdown-border-style) var(--select-dropdown-border);
+    border-radius: var(--select-dropdown-border-radius);
+    box-sizing: border-box;
+    font-variant: initial;
+    left: -9999px;
+    outline: none;
+    overflow: hidden;
+    padding: calc(var(--select-gutter) / 2);
+    position: absolute;
+    top: -9999px;
+    z-index: calc(var(--global-z-index) + 30);
+    @if mixin-exists(hook-select-dropdown) {
+        @include hook-select-dropdown;
+    }
+}
+
+// noinspection Stylelint
+.uk-select-dropdown-placement-bottomLeft.uk-slide-up-enter.uk-slide-up-enter-active,
+.uk-select-dropdown-placement-bottomLeft.uk-slide-up-appear.uk-slide-up-appear-active {
+    animation-name: uk-slide-up-in;
+}
+
+// noinspection Stylelint
+.uk-select-dropdown-placement-topLeft.uk-slide-up-enter.uk-slide-up-enter-active,
+.uk-select-dropdown-placement-topLeft.uk-slide-up-appear.uk-slide-up-appear-active {
+    animation-name: uk-slide-down-in;
+}
+
+// noinspection Stylelint
+.uk-select-dropdown-placement-bottomLeft .uk-slide-up-leave.uk-slide-up-leave-active {
+    animation-name: uk-slide-up-out;
+}
+
+// noinspection Stylelint
+.uk-select-dropdown-placement-topLeft.uk-slide-up-leave.uk-slide-up-leave-active {
+    animation-name: uk-slide-down-out;
+}
+
+.uk-select-dropdown-hidden { display: none; }
+
+.uk-select-dropdown-empty { color: var(--control-disabled-color); }
+
+
+/* Dropdown options
+ ========================================================================== */
+
+/* Empty */
+.uk-select-item-empty {
+    color: var(--select-item-disabled-color);
+    text-align: center;
+    @if mixin-exists(select-item) {
+        @include select-item;
+    }
+}
+
+.uk-select-item-empty .uk-empty {
+    margin: var(--global-small-margin) 0;
+}
+
+.uk-select-item-empty .uk-empty-img-simple-ellipse {
+    fill: var(--control-icon-color);
+    fill-opacity: 0.08;
+}
+
+.uk-select-item-empty .uk-empty-img-simple-g {
+    stroke: var(--control-icon-color);
+}
+
+.uk-select-item-empty .uk-empty-img-simple-path {
+    fill: var(--global-default-background);
+    stroke: var(--control-icon-color);
+}
+
+/* Items */
+.uk-select-item {
+    cursor: pointer;
+    transition: background var(--transition-duration) ease;
+    @if mixin-exists(select-item) {
+        @include select-item;
+    }
+}
+
+// Option
+.uk-select-item-option {
+    align-items: center;
+    display: flex;
+}
+
+.uk-select-item-option-content {
+    display: flex;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.uk-select-item-option-state {
+    align-items: center;
+    display: flex;
+    flex: none;
+}
+
+.uk-select-item-option-active {
+    background-color: var(--select-item-active-background);
+}
+
+.uk-select-item-option-selected {
+    background-color: var(--select-item-selected-background);
+
+    .uk-select-item-option-state {
+        color: var(--select-item-selected-state-color);
+    }
+}
+
+.uk-select-item-option-disabled {
+    color: var(--select-item-disabled-color);
+    cursor: not-allowed;
+}
+
+.uk-select-item-option-grouped {
+    padding-left: calc(var(--control-padding-horizontal) * 2);
+}
+
+// Group
+.uk-select-item-group {
+    color: var(--select-item-group-color);
+    cursor: default;
+    font-size: var(--select-item-group-font-size);
+    padding: 0;
+    text-transform: var(--select-item-group-text-transform);
+}
+
+.uk-select-item-group:not(:first-child) {
+    margin: var(--select-gutter) 0;
+}
+
+.uk-select-item-group:not(:first-child):empty {
+    border-bottom: var(--control-border-width) var(--control-border-style) var(--control-border);
+}
+
+
+/* Control
+ ========================================================================== */
+
+.uk-control-select {
+    align-items: unset;
+    border: 0 none;
+    height: auto;
+    min-height: var(--select-height);
+    padding: 0;
+}
+
+.uk-control-select .uk-select {
+    border: var(--select-border-width) var(--select-border-style) var(--select-border);
+    border-radius: var(--select-border-radius);
+    box-sizing: border-box;
+    transition: var(--transition-medium-fast-duration) var(--ease-in-out);
+    transition-property: border;
+}
+
+// Hover state (unused for disabled state)
+.uk-control-select/*:not(.uk-disabled)*/:hover .uk-select {
+    border-color: var(--select-hover-border);
+}
+
+// Disabled state
+.uk-control-select.uk-disabled {
+    border-color: var(--select-disabled-border);
+}
+
+//
+// Sizes
+//
+
+/* Small */
+.uk-control-select.uk-control-small {
+    min-height: var(--select-small-height);
+}
+
+.uk-control-select.uk-control-small .uk-select-selector {
+    padding: 0 var(--select-selector-small-padding-horizontal);
+}
+
+/* Medium */
+.uk-control-select.uk-control-medium {
+    min-height: var(--select-medium-height);
+}
+
+.uk-control-select.uk-control-medium .uk-select-selector {
+    padding: 0 var(--select-selector-medium-padding-horizontal);
+}
+
+/* Large */
+.uk-control-select.uk-control-large {
+    min-height: var(--select-large-height);
+}
+
+.uk-control-select.uk-control-large .uk-select-selector {
+    padding: 0 var(--select-selector-large-padding-horizontal);
+}
+
+
+/* Right to Left Direction
+ ========================================================================== */
+
+.uk-control-select.uk-control-rtl,
+.uk-select-dropdown-rtl { direction: rtl; }
+
+.uk-control-select.uk-control-rtl .uk-select-arrow,
+.uk-control-select.uk-control-rtl .uk-select-clear {
+    padding-left: var(--select-selector-padding-horizontal);
+    padding-right: unset;
+}
+
+.uk-control-select.uk-control-rtl .uk-select-arrow { order: 1; }
+
+// Multiple overwrites
+.uk-control-select.uk-control-rtl .uk-select-selection-item-remove {
+    padding-left: var(--select-gutter);
+    padding-right: unset;
+}
+
+//
+// Dropdown
+//
+
+.uk-select-dropdown-rtl .uk-select-item-option-grouped {
+    padding-left: var(--select-gutter);
+    padding-right: calc(var(--control-padding-horizontal) * 2);
+}
+
+
+// Vars
+// ========================================================================
+
+:root, ::after, ::before {
+    --select-border: var(--control-border);
+    --select-border-style: var(--control-border-style);
+    --select-border-width: var(--control-border-width);
+    --select-border-radius: var(--control-border-radius);
+    --select-hover-border: var(--control-hover-border);
+    --select-focus-border: var(--control-focus-border);
+    --select-disabled-border: var(--control-disabled-border);
+    --select-height: var(--control-height);
+    --select-small-height: var(--control-small-height);
+    --select-medium-height: var(--control-medium-height);
+    --select-large-height: var(--control-large-height);
+    --select-arrow-icon-size: #{$select-arrow-icon-size};
+    --select-gutter: #{$select-gutter};
+    --select-small-gutter: #{$select-small-gutter};
+    --select-medium-gutter: #{$select-medium-gutter};
+    --select-large-gutter: #{$select-large-gutter};
+    --select-selector-padding-horizontal: var(--control-padding-horizontal);
+    --select-selector-small-padding-horizontal: var(--control-small-padding-horizontal);
+    --select-selector-medium-padding-horizontal: var(--control-medium-padding-horizontal);
+    --select-selector-large-padding-horizontal: var(--control-large-padding-horizontal);
+    --select-selection-search-input-color: var(--control-color);
+    --select-selection-placeholder-color: var(--control-placeholder-color);
+    --select-selection-item-background: var(--global-background);
+    --select-selection-item-border-radius: var(--control-border-radius);
+    --select-selection-item-font-size: #{$select-selection-item-font-size};
+    --select-selection-item-line-height: #{$select-selection-item-line-height};
+    --select-selection-item-remove-icon-size: var(--select-selection-item-font-size);
+    --select-selection-item-remove-icon-hover-color: var(--global-primary-background);
+    --select-dropdown-background: #{$select-dropdown-background};
+    --select-dropdown-border: var(--control-border);
+    --select-dropdown-border-style: var(--control-border-style);
+    --select-dropdown-border-width: var(--control-border-width);
+    --select-dropdown-border-radius: var(--control-border-radius);
+    --select-icon-color: var(--control-icon-color);
+    --select-icon-hover-color: var(--control-icon-hover-color);
+    --select-icon-disabled-color: var(--control-disabled-color);
+    --select-item-color: var(--control-color);
+    --select-item-line-height: #{$select-item-line-height};
+    --select-item-disabled-color: var(--control-disabled-color);
+    --select-item-selected-background: #{$select-item-selected-background};
+    --select-item-selected-state-color: var(--global-primary-background);
+    --select-item-active-background: var(--global-default-background);
+    --select-item-group-color: var(--global-muted-color);
+    --select-item-group-font-size: var(--global-small-font-size);
+    --select-item-group-text-transform: #{$select-item-group-text-transform};
+}

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import ResizableTextArea from 'rc-textarea/lib/ResizableTextArea';
+import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
+import type { InputFocusOptions } from '../Input';
+import type { SizeType, StateType } from '../types';
+import './index.scss';
+interface ShowCountProps {
+    formatter: (args: {
+        count: number;
+        maxLength?: number;
+    }) => string;
+}
+export interface TextAreaProps extends RcTextAreaProps {
+    allowClear?: boolean;
+    showCount?: boolean | ShowCountProps;
+    size?: SizeType;
+    state?: StateType;
+}
+export interface TextAreaRef {
+    focus: (options?: InputFocusOptions) => void;
+    blur: () => void;
+    resizableTextArea?: ResizableTextArea;
+}
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>;
+export {};