@quen-ui/components 0.0.13

package/dist/Select/styles.es.js

@@ -0,0 +1,415 @@
+import styled, { css, createGlobalStyle } from "styled-components";
+const SelectWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "error", "zIndex"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .text-field__required {
+    color: ${({ theme }) => theme.colors.red[9]};
+  }
+
+  .text-field__error-message {
+    color: ${({ theme }) => theme.colors.red[9]};
+  }
+
+  .rc-select {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    min-width: 100px;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .rc-select-focused .rc-select-selector {
+    border-bottom: 2px solid ${({ theme }) => theme.colors[theme.primaryColor][9]}!important;
+  }
+
+  .icon-arrow {
+    color: ${({ theme }) => theme.colors.gray[9]};
+  }
+
+  .rc-select-open {
+    .icon-arrow {
+      transform: rotateX(180deg);
+      transition: all 0.2s ease-in-out;
+    }
+  }
+  
+  .rc-select-disabled > .rc-select-selector {
+    background: ${({ theme }) => theme.colors.gray[2]};
+    cursor: not-allowed ;
+    
+    input {
+      cursor: not-allowed;
+    }
+    
+    &:hover {
+      border-bottom: 1px solid ${({ theme }) => theme.colors.gray[5]};
+    }
+  }
+  
+  .rc-select-selector {
+    width: 100%;
+    flex: 0 0 100%;
+    border-radius: ${({ theme }) => theme.control.radius};
+    border: 1px solid ${({ theme }) => theme.colors.gray[3]};
+    border-bottom: 1px solid ${({ theme }) => theme.colors.gray[5]};
+    min-height: ${({ size, theme }) => theme.control.height[size]};
+    align-items: center;
+
+    &:hover {
+      border-bottom: 1px solid ${({ theme }) => theme.colors.gray[8]};
+    }
+  }
+
+  ${({ error, theme }) => error && css`
+      .rc-select-selector {
+        border-bottom: 2px solid ${theme.colors.red[9]} !important;
+      }
+    `};
+
+  .rc-select-arrow {
+    position: relative;
+    z-index: 10;
+    right: 22px;
+  }
+
+  .rc-select-selection-search-input {
+    height: 100%;
+    background-color: transparent;
+    border: none;
+    width: 100%;
+  }
+
+  .rc-select-single .rc-select-selector .rc-select-selection-item,
+  .rc-select-single .rc-select-selector .rc-select-selection-placeholder {
+    position: absolute;
+    left: 3px;
+    pointer-events: none;
+    font-weight: normal;
+    top: ${({ size }) => {
+  if (size === "l") {
+    return "-3px";
+  } else if (size === "m") {
+    return "-2px";
+  } else if (size === "s") {
+    return "0px";
+  } else if (size === "xs") {
+    return "1px";
+  }
+}};
+  }
+
+  .rc-select-single .rc-select-selector {
+    display: flex;
+    position: relative;
+  }
+
+  .rc-select-single .rc-select-selector .rc-select-selection-search {
+    width: 100%;
+    position: relative;
+  }
+  .rc-select-single .rc-select-selector .rc-select-selection-search-input {
+    width: 100%;
+  }
+
+  .rc-select-single .rc-select-selector .rc-select-selection-wrap {
+    width: calc(100% - 10px);
+    position: relative;
+    height: 100%;
+  }
+
+  .rc-select-single:not(.rc-select-customize-input)
+    .rc-select-selector
+    .rc-select-selection-search-input {
+    border: none;
+    outline: none;
+    width: 100%;
+  }
+
+  .rc-select .rc-select-selection-search-input {
+    appearance: none;
+  }
+  .rc-select .rc-select-selection-search-input::-webkit-search-cancel-button {
+    display: none;
+    appearance: none;
+  }
+
+  .rc-select-allow-clear .rc-select-clear {
+    color: ${({ theme }) => theme.colors.gray[9]};
+    cursor: pointer;
+    position: absolute;
+    right: 2.625rem;
+  }
+
+  .rc-select-clear-icon {
+    width: ${({ size }) => {
+  if (size === "l") {
+    return "1.5rem";
+  } else if (size === "m") {
+    return "1.25rem";
+  } else if (size === "s") {
+    return "1rem";
+  } else if (size === "xs") {
+    return "0.875rem";
+  }
+}};
+  }
+
+  .rc-select-selection-search-input {
+    font-size: ${({ theme, size }) => theme.fonts.text.size[size]};
+    font-weight: ${({ theme }) => theme.fonts.text.weight};
+    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size]};
+  }
+
+  .rc-select-multiple .rc-select-selector {
+    display: flex;
+    padding: 1px;
+  }
+  
+  .rc-select-selection-item {
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+    
+    .quen-ui__text {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-item {
+    flex: none;
+    border-radius: 4px;
+    margin-right: 2px;
+    padding: 0 8px;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-item-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .rc-select-multiple .rc-select-selector .rc-select-selection-overflow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {
+    flex: none;
+    max-width: 100%;
+  }
+  .rc-select-multiple .rc-select-selector .rc-select-selection-search {
+    position: relative;
+    max-width: 100%;
+  }
+  .rc-select-multiple .rc-select-selector .rc-select-selection-search-input,
+  .rc-select-multiple .rc-select-selector .rc-select-selection-search-mirror {
+    padding: 1px;
+    font-family: system-ui;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-search-mirror {
+    position: absolute;
+    z-index: 999;
+    white-space: nowrap;
+    left: 0;
+    top: 0;
+    visibility: hidden;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-search-input {
+    border: none;
+    outline: none;
+    width: 100%;
+  }
+  .rc-select-allow-clear.rc-select-multiple .rc-select-selector {
+    padding-right: 20px;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-placeholder {
+    position: absolute;
+    left: 3px;
+    pointer-events: none;
+    font-weight: normal;
+    top: ${({ size }) => {
+  if (size === "l") {
+    return "10px";
+  } else if (size === "m") {
+    return "8px";
+  } else if (size === "s") {
+    return "7px";
+  } else if (size === "xs") {
+    return "2px";
+  }
+}};
+  }
+`;
+const SelectDropDownStyles = createGlobalStyle`
+  .rc-select-dropdown {
+    min-height: 100px;
+    position: absolute;
+    background: ${({ theme }) => theme.colors.grayViolet[5]};
+    border: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+    border-radius: ${({ theme }) => theme.control.radius};
+
+    ${({ zIndex }) => zIndex && css`
+        z-index: ${zIndex};
+      `}
+  }
+  
+  .rc-select-item-option-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: ${({ theme }) => theme.textColor};
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .rc-select-dropdown-hidden {
+    display: none;
+  }
+
+  .rc-select-dropdown-slide-up-enter,
+  .rc-select-dropdown-slide-up-appear {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    transform-origin: 0 0;
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+    animation-play-state: paused;
+  }
+  .rc-select-dropdown-slide-up-leave {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    transform-origin: 0 0;
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+    animation-play-state: paused;
+  }
+
+  .rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active.rc-select-dropdown-placement-bottomLeft,
+  .rc-select-dropdown-slide-up-appear.rc-select-dropdown-slide-up-appear-active.rc-select-dropdown-placement-bottomLeft,
+  .rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active.rc-select-dropdown-placement-bottomRight,
+  .rc-select-dropdown-slide-up-appear.rc-select-dropdown-slide-up-appear-active.rc-select-dropdown-placement-bottomRight {
+    animation-name: rcSelectDropdownSlideUpIn;
+    animation-play-state: running;
+  }
+  .rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active.rc-select-dropdown-placement-bottomLeft,
+  .rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active.rc-select-dropdown-placement-bottomRight {
+    animation-name: rcSelectDropdownSlideUpOut;
+    animation-play-state: running;
+  }
+  .rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active.rc-select-dropdown-placement-topLeft,
+  .rc-select-dropdown-slide-up-appear.rc-select-dropdown-slide-up-appear-active.rc-select-dropdown-placement-topLeft,
+  .rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active.rc-select-dropdown-placement-topRight,
+  .rc-select-dropdown-slide-up-appear.rc-select-dropdown-slide-up-appear-active.rc-select-dropdown-placement-topRight {
+    animation-name: rcSelectDropdownSlideDownIn;
+    animation-play-state: running;
+  }
+  .rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active.rc-select-dropdown-placement-topLeft,
+  .rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active.rc-select-dropdown-placement-topRight {
+    animation-name: rcSelectDropdownSlideDownOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcSelectDropdownSlideUpIn {
+    0% {
+      opacity: 0;
+      transform-origin: 0% 0%;
+      transform: scaleY(0);
+    }
+    100% {
+      opacity: 1;
+      transform-origin: 0% 0%;
+      transform: scaleY(1);
+    }
+  }
+  @keyframes rcSelectDropdownSlideUpOut {
+    0% {
+      opacity: 1;
+      transform-origin: 0% 0%;
+      transform: scaleY(1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 0% 0%;
+      transform: scaleY(0);
+    }
+  }
+  @keyframes rcSelectDropdownSlideDownIn {
+    0% {
+      transform: scaleY(0);
+      transform-origin: 100% 100%;
+      opacity: 0;
+    }
+    100% {
+      transform: scaleY(1);
+      transform-origin: 100% 100%;
+      opacity: 1;
+    }
+  }
+  @keyframes rcSelectDropdownSlideDownOut {
+    0% {
+      transform: scaleY(1);
+      transform-origin: 100% 100%;
+      opacity: 1;
+    }
+    100% {
+      transform: scaleY(0);
+      transform-origin: 100% 100%;
+      opacity: 0;
+    }
+  }
+
+  .rc-select-item {
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1.5;
+    padding: 4px 16px;
+  }
+  
+  .rc-select-item-option {
+    position: relative;
+  }
+  
+  .rc-select-item-option .rc-select-item-option-state {
+    position: absolute;
+    right: 0;
+    top: 4px;
+    pointer-events: none;
+  }
+  .rc-select-item-option-active {
+    background: ${({ theme }) => theme.colors.grayViolet[7]};
+    border-left: 2px solid
+    ${({ theme }) => theme.colors.violet[7]};
+  }
+  .rc-select-item-option-disabled {
+    background: ${({ theme }) => theme.colors.grayViolet[3]};
+    cursor: not-allowed;
+    .quen-ui__select-option {
+      color: ${({ theme }) => theme.colors.gray[3]};
+    }
+  }
+  .rc-select-item-empty {
+    text-align: center;
+    color: ${({ theme }) => theme.textColor};
+  }
+  
+  .rc-select-item-option-selected {
+    background: ${({ theme }) => theme.colors.grayViolet[9]};
+    border-left: 2px solid
+    ${({ theme }) => theme.colors.violet[7]};
+  }
+`;
+export {
+  SelectDropDownStyles,
+  SelectWrapper
+};

package/dist/Select/types.d.ts

@@ -0,0 +1,116 @@
+import { TQuenSize } from '../types/size';
+import { default as React, CSSProperties } from 'react';
+export interface ISelectDefaultItem {
+    label: string;
+    value: string;
+    groupId?: string | number;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export type TSelectSingleValue = string;
+export type TSingleSelectItemOnChange<ITEM> = (value: ITEM | null) => void;
+export type TSingleSelectValueOnChange = (value: TSelectSingleValue | null) => void;
+export type TMultiSelectItemOnChange<ITEM> = (value: ITEM[] | null) => void;
+export type TMultiSelectValueOnChange = (value: TSelectSingleValue[] | null) => void;
+type TSingleSelectOnChange<ITEM = ISelectDefaultItem> = {
+    /**	Selection change handler */
+    onChange?: TSingleSelectItemOnChange<ITEM>;
+    /** Return format for onChange */
+    onChangeReturnValue: "item";
+    /** Current selection (controlled) */
+    value?: ITEM | null;
+} | {
+    /**	Selection change handler */
+    onChange?: TSingleSelectValueOnChange;
+    /** Return format for onChange */
+    onChangeReturnValue?: "value";
+    /** Current selection (controlled) */
+    value?: TSelectSingleValue | null;
+};
+/**	Selection change handler */
+type TMultiSelectOnChange<ITEM = ISelectDefaultItem> = {
+    /**	Selection change handler */ onChange?: TMultiSelectItemOnChange<ITEM>;
+    /** Return format for onChange */
+    onChangeReturnValue?: "item";
+    /** Current selection (controlled) */
+    value?: ITEM[];
+} | {
+    /**	Selection change handler */ onChange?: TMultiSelectValueOnChange;
+    /** Return format for onChange */
+    onChangeReturnValue?: "value";
+    /** Current selection (controlled) */
+    value?: TSelectSingleValue[];
+};
+export type TSelectGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;
+export type TSelectGetItemValue<ITEM> = (item: ITEM | null) => TSelectSingleValue | null;
+export type TSelectGetItemLabel<ITEM> = (item: ITEM) => string;
+export type TSelectGetItemIcon<ITEM> = (item: ITEM) => React.ReactNode;
+export type TSingleSelectProps<ITEM> = TSingleSelectOnChange<ITEM> & {
+    /** Enables multi-selection */
+    multi?: undefined | false;
+};
+export type TMultiSelectProps<ITEM> = TMultiSelectOnChange<ITEM> & {
+    /** Enables multi-selection */
+    multi: true;
+};
+export type TSelectProps<ITEM = ISelectDefaultItem> = (TSingleSelectProps<ITEM> | TMultiSelectProps<ITEM>) & TSelectBaseProps<ITEM>;
+type TSelectBaseProps<ITEM> = {
+    /** Input size */
+    size?: TQuenSize;
+    /** Disables interaction */
+    disabled?: boolean;
+    /** Field label */
+    label?: string;
+    /** Marks as required */
+    required?: boolean;
+    /** Error state/message */
+    error?: string | boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Left-side adornment */
+    leftContent?: React.ReactNode;
+    /** Right-side adornment */
+    rightContent?: React.ReactNode;
+    /** Name select  */
+    name?: string;
+    /** Container class */
+    className?: string;
+    /** Data source for options  */
+    items: ITEM[];
+    /** Called when blur */
+    onBlur?: React.FocusEventHandler;
+    /** Called when focus */
+    onFocus?: React.FocusEventHandler;
+    /** Called when clear */
+    onClear?: () => void;
+    /** Shows clear button */
+    clearable?: boolean;
+    /** Determines disabled state */
+    getItemDisabled?: TSelectGetItemDisabled<ITEM>;
+    /** Extracts option value */
+    getItemValue?: TSelectGetItemValue<ITEM>;
+    /** Extracts display text */
+    getItemLabel?: TSelectGetItemLabel<ITEM>;
+    /** Extracts display icon */
+    getItemIcon?: TSelectGetItemIcon<ITEM>;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Default empty message */
+    messageNoData?: string;
+    /** Custom "no options" UI */
+    notFoundContent?: React.ReactNode;
+    /** Initial open state */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Shows loading indicator */
+    loading?: boolean;
+    /** Get focus by default */
+    autoFocus?: boolean;
+    id?: string;
+    /** Whether show search input in single mode */
+    showSearch?: boolean;
+    zIndex?: number;
+    [key: string]: any;
+};
+export {};

package/dist/Select/useSelect.cjs.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function getDefaultCurrentValue(getItemValue, value) {
+  if (typeof value === "undefined") {
+    return null;
+  }
+  if (typeof value === "string") {
+    return value || null;
+  }
+  if (value === null) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    return value.map((v) => {
+      if (typeof v === "string" || typeof value === "number") {
+        return v;
+      }
+      return getItemValue(v);
+    });
+  }
+  return getItemValue(value);
+}
+function useSelect(props) {
+  const [searchValue, setSearchValue] = React.useState("");
+  const [currentValue, setCurrentValue] = React.useState(getDefaultCurrentValue(props.getItemValue, props.value));
+  const items = React.useMemo(() => {
+    var _a;
+    return ((_a = props.items) == null ? void 0 : _a.filter((item) => {
+      var _a2;
+      return (_a2 = props.getItemLabel) == null ? void 0 : _a2.call(props, item).toLowerCase().includes(searchValue.toLowerCase());
+    })) ?? [];
+  }, [props.items, searchValue]);
+  function handleChange(value) {
+    var _a, _b, _c, _d;
+    if (props.multi && Array.isArray(value)) {
+      const multiProps = props;
+      if (props.onChangeReturnValue === "value") {
+        (_a = props.onChange) == null ? void 0 : _a.call(props, value);
+      }
+      if (props.onChangeReturnValue === "item") {
+        const items2 = value.map(
+          (v) => props.items.find((i) => props.getItemValue(i) === v)
+        );
+        (_b = multiProps.onChange) == null ? void 0 : _b.call(multiProps, items2);
+      }
+      setCurrentValue(value || null);
+    } else {
+      const singleProps = props;
+      const item = props.items.find((i) => {
+        var _a2;
+        return ((_a2 = props.getItemValue) == null ? void 0 : _a2.call(props, i)) === value;
+      }) ?? null;
+      if (props.onChangeReturnValue === "item") {
+        (_c = singleProps.onChange) == null ? void 0 : _c.call(singleProps, item || null);
+      } else {
+        (_d = singleProps.onChange) == null ? void 0 : _d.call(singleProps, value);
+      }
+      setCurrentValue(value || null);
+    }
+    setSearchValue("");
+  }
+  return {
+    ...props,
+    items,
+    handleChange,
+    searchValue,
+    currentValue,
+    size: props.size || "m"
+  };
+}
+exports.useSelect = useSelect;