@quen-ui/components 0.0.14 → 1.0.0

package/dist/RichTextEditor/types.d.ts

@@ -0,0 +1,79 @@
+import { CSSProperties, ReactNode, DragEvent, RefObject } from 'react';
+import { TColorValue } from '../ColorPicker';
+import { IQuenUITheme } from '../../../theme/src';
+export interface IRichTextEditorHandle {
+    /** Returns current editor HTML */
+    getHTML: () => string;
+    /** Replaces editor content */
+    setHTML: (html: string) => void;
+    /** Focuses the editor */
+    focus: () => void;
+}
+export interface IRichTextEditorPluginActionParams {
+    exec: (command: string, value?: string) => void;
+    update: () => void;
+    editor: HTMLDivElement | null;
+    context: IRichTextEditorPluginContext;
+    ref: RefObject<HTMLButtonElement | null>;
+}
+export interface IRichTextEditorPlugin {
+    key: string;
+    label: ReactNode;
+    title?: string;
+    disabled?: boolean;
+    action: (params: IRichTextEditorPluginActionParams) => void;
+    onSelectionChange?: (sel: Selection | null, ctx: IRichTextEditorPluginContext) => void;
+    onInput?: (ctx: IRichTextEditorPluginContext) => void;
+    onFocus?: (ctx: IRichTextEditorPluginContext) => void;
+    onBlur?: (ctx: IRichTextEditorPluginContext) => void;
+    onDrop?: (event: DragEvent, ctx: IRichTextEditorPluginContext) => void;
+    onPaste?: (event: ClipboardEvent, ctx: IRichTextEditorPluginContext) => void;
+    onKeyDown?: (event: KeyboardEvent, ctx: IRichTextEditorPluginContext) => void;
+    getState?: (editor: HTMLDivElement | null, ctx: IRichTextEditorPluginContext) => any;
+}
+export interface IRichTextEditorPluginContext {
+    editor: HTMLDivElement | null;
+    exec: (cmd: string, value?: string) => void;
+    update: () => void;
+    getHTML: () => string;
+    getText: () => string;
+    setHTML: (html: string) => void;
+    selection: Selection | null;
+    getPluginState: (key: string) => any;
+    setPluginState: (key: string, value: any) => void;
+    theme: IQuenUITheme;
+}
+export interface IRichTextEditorProps {
+    /** Controlled HTML content of the editor */
+    value?: string;
+    /** Called whenever editor content changes */
+    onChange?: (html: string) => void;
+    /** Placeholder shown when editor is empty */
+    placeholder?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Disables editing and user interaction */
+    disabled?: boolean;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** List of custom editor plugins */
+    plugins?: IRichTextEditorPlugin[];
+    /** List of plugin keys to enable */
+    enablePlugins?: string[];
+}
+export interface IRichTextEditorTableSizePickerProps {
+    onSelect: (size: {
+        rows: number;
+        cols: number;
+    }) => void;
+    onClose: () => void;
+    ref: RefObject<HTMLButtonElement | null>;
+    theme: IQuenUITheme;
+}
+export interface IRichTextEditorColorPickerProps {
+    ref: RefObject<HTMLButtonElement | null>;
+    onChange: (color: TColorValue) => void;
+    onClose: () => void;
+    color: string;
+    theme: IQuenUITheme;
+}

package/dist/Select/Select.cjs.js

@@ -1,5 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const Select = require("rc-select");
 const Text = require("../typography/Text/Text.cjs.js");
 const styles = require("./styles.cjs.js");
@@ -21,7 +22,7 @@ const SelectComponent = (props) => {
     getItemDisabled,
     getItemIcon,
     error,
-    zIndex,
+    zIndex = 20,
     label,
     required,
     id,
@@ -38,32 +39,43 @@ const SelectComponent = (props) => {
     defaultOpen,
     open,
     disabled,
-    style
+    style,
+    searchValue,
+    ...otherProps
   } = useSelect.useSelect(
     helpers.withDefaultGetters(props)
   );
+  const [dropdownMatchSelectWidth, setDropdownMatchSelectWidth] = React.useState(true);
+  const selectRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    setDropdownMatchSelectWidth(selectRef.current?.clientWidth ?? true);
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.SelectWrapper,
     {
-      size,
-      error,
-      className,
+      ref: selectRef,
       style,
-      "data-testid": "select",
+      className,
+      id: id ?? label,
+      disabled,
+      label,
+      error,
+      size,
+      required,
+      ...otherProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(styles.SelectDropDownStyles, { zIndex }),
-        label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "label", size, for: id, children: [
-          label,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-field__required", children: "*" })
-        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Select,
           {
+            prefixCls: "quen-ui__select",
             mode: multi ? "multiple" : void 0,
             autoFocus,
+            searchValue,
             allowClear: clearable && {
               clearIcon: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { className: "rc-select-clear-icon" })
             },
+            onDropdownVisibleChange: () => setDropdownMatchSelectWidth(selectRef.current?.clientWidth ?? true),
             onClear,
             menuItemSelectedIcon: null,
             loading,
@@ -77,10 +89,11 @@ const SelectComponent = (props) => {
             disabled,
             showSearch,
             value: currentValue || null,
-            id,
+            id: id || label,
             placeholder: /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: placeholder }),
             notFoundContent,
             defaultOpen,
+            dropdownMatchSelectWidth,
             onChange: handleChange,
             tagRender: ({ label: label2, disabled: disabledTag, onClose }) => /* @__PURE__ */ jsxRuntime.jsx(
               Tag,
@@ -95,18 +108,17 @@ const SelectComponent = (props) => {
             children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
               Select.Option,
               {
-                value: getItemValue == null ? void 0 : getItemValue(item),
-                disabled: getItemDisabled == null ? void 0 : getItemDisabled(item),
+                value: getItemValue?.(item),
+                disabled: getItemDisabled?.(item),
                 children: [
-                  getItemIcon == null ? void 0 : getItemIcon(item),
-                  /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "quen-ui__select-option", size, children: getItemLabel == null ? void 0 : getItemLabel(item) })
+                  getItemIcon?.(item),
+                  /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "quen-ui__select-option", size, children: getItemLabel?.(item) })
                 ]
               },
-              getItemValue == null ? void 0 : getItemValue(item)
+              getItemValue?.(item)
             ))
           }
-        ),
-        typeof props.error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "text-field__error-message", size: "xs", children: props.error })
+        )
       ]
     }
   );

package/dist/Select/Select.es.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect } from "react";
 import Select, { Option } from "rc-select";
 import Text from "../typography/Text/Text.es.js";
 import { SelectWrapper, SelectDropDownStyles } from "./styles.es.js";
@@ -20,7 +21,7 @@ const SelectComponent = (props) => {
     getItemDisabled,
     getItemIcon,
     error,
-    zIndex,
+    zIndex = 20,
     label,
     required,
     id,
@@ -37,32 +38,43 @@ const SelectComponent = (props) => {
     defaultOpen,
     open,
     disabled,
-    style
+    style,
+    searchValue,
+    ...otherProps
   } = useSelect(
     withDefaultGetters(props)
   );
+  const [dropdownMatchSelectWidth, setDropdownMatchSelectWidth] = useState(true);
+  const selectRef = useRef(null);
+  useLayoutEffect(() => {
+    setDropdownMatchSelectWidth(selectRef.current?.clientWidth ?? true);
+  }, []);
   return /* @__PURE__ */ jsxs(
     SelectWrapper,
     {
-      size,
-      error,
-      className,
+      ref: selectRef,
       style,
-      "data-testid": "select",
+      className,
+      id: id ?? label,
+      disabled,
+      label,
+      error,
+      size,
+      required,
+      ...otherProps,
       children: [
         /* @__PURE__ */ jsx(SelectDropDownStyles, { zIndex }),
-        label && /* @__PURE__ */ jsxs(Text, { as: "label", size, for: id, children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "text-field__required", children: "*" })
-        ] }),
         /* @__PURE__ */ jsx(
           Select,
           {
+            prefixCls: "quen-ui__select",
             mode: multi ? "multiple" : void 0,
             autoFocus,
+            searchValue,
             allowClear: clearable && {
               clearIcon: /* @__PURE__ */ jsx(SvgIconClose, { className: "rc-select-clear-icon" })
             },
+            onDropdownVisibleChange: () => setDropdownMatchSelectWidth(selectRef.current?.clientWidth ?? true),
             onClear,
             menuItemSelectedIcon: null,
             loading,
@@ -76,10 +88,11 @@ const SelectComponent = (props) => {
             disabled,
             showSearch,
             value: currentValue || null,
-            id,
+            id: id || label,
             placeholder: /* @__PURE__ */ jsx(Text, { size, children: placeholder }),
             notFoundContent,
             defaultOpen,
+            dropdownMatchSelectWidth,
             onChange: handleChange,
             tagRender: ({ label: label2, disabled: disabledTag, onClose }) => /* @__PURE__ */ jsx(
               Tag,
@@ -94,18 +107,17 @@ const SelectComponent = (props) => {
             children: items.map((item) => /* @__PURE__ */ jsxs(
               Option,
               {
-                value: getItemValue == null ? void 0 : getItemValue(item),
-                disabled: getItemDisabled == null ? void 0 : getItemDisabled(item),
+                value: getItemValue?.(item),
+                disabled: getItemDisabled?.(item),
                 children: [
-                  getItemIcon == null ? void 0 : getItemIcon(item),
-                  /* @__PURE__ */ jsx(Text, { className: "quen-ui__select-option", size, children: getItemLabel == null ? void 0 : getItemLabel(item) })
+                  getItemIcon?.(item),
+                  /* @__PURE__ */ jsx(Text, { className: "quen-ui__select-option", size, children: getItemLabel?.(item) })
                 ]
               },
-              getItemValue == null ? void 0 : getItemValue(item)
+              getItemValue?.(item)
             ))
           }
-        ),
-        typeof props.error === "string" && /* @__PURE__ */ jsx(Text, { className: "text-field__error-message", size: "xs", children: props.error })
+        )
       ]
     }
   );

package/dist/Select/helpers.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const defaultGetItemLabel = (item) => item.label;
-const defaultGetItemValue = (item) => (item == null ? void 0 : item.value) || null;
+const defaultGetItemValue = (item) => item?.value || null;
 const defaultGetItemDisabled = (item) => item.disabled;
 const defaultGetItemIcon = (item) => item.icon;
 function withDefaultGetters(props) {

package/dist/Select/helpers.d.ts

@@ -8,29 +8,29 @@ export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
     onChangeReturnValue?: "value";
     value?: import('./types').TSelectSingleValue | null;
     multi?: undefined | false;
-    size?: import('..').TQuenSize;
     disabled?: boolean;
+    size?: import('..').TQuenSize;
     label?: string;
     required?: boolean;
     error?: string | boolean;
+    leftContent?: import('react').ReactNode;
+    rightContent?: import('react').ReactNode;
+    id?: string;
+    className?: string;
+    style?: import('react').CSSProperties;
     placeholder?: string;
-    leftContent?: React.ReactNode;
-    rightContent?: React.ReactNode;
     name?: string;
-    className?: string;
     items: ITEM[];
     onBlur?: React.FocusEventHandler;
     onFocus?: React.FocusEventHandler;
     onClear?: () => void;
     clearable?: boolean;
-    style?: import('react').CSSProperties;
     messageNoData?: string;
     notFoundContent?: React.ReactNode;
     defaultOpen?: boolean;
     open?: boolean;
     loading?: boolean;
     autoFocus?: boolean;
-    id?: string;
     showSearch?: boolean;
     zIndex?: number;
 } | {
@@ -42,29 +42,29 @@ export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
     onChangeReturnValue?: "value";
     value?: import('./types').TSelectSingleValue[];
     multi: true;
-    size?: import('..').TQuenSize;
     disabled?: boolean;
+    size?: import('..').TQuenSize;
     label?: string;
     required?: boolean;
     error?: string | boolean;
+    leftContent?: import('react').ReactNode;
+    rightContent?: import('react').ReactNode;
+    id?: string;
+    className?: string;
+    style?: import('react').CSSProperties;
     placeholder?: string;
-    leftContent?: React.ReactNode;
-    rightContent?: React.ReactNode;
     name?: string;
-    className?: string;
     items: ITEM[];
     onBlur?: React.FocusEventHandler;
     onFocus?: React.FocusEventHandler;
     onClear?: () => void;
     clearable?: boolean;
-    style?: import('react').CSSProperties;
     messageNoData?: string;
     notFoundContent?: React.ReactNode;
     defaultOpen?: boolean;
     open?: boolean;
     loading?: boolean;
     autoFocus?: boolean;
-    id?: string;
     showSearch?: boolean;
     zIndex?: number;
 } | {
@@ -76,29 +76,29 @@ export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
     onChangeReturnValue: "item";
     value?: ITEM | null | undefined;
     multi?: undefined | false;
-    size?: import('..').TQuenSize;
     disabled?: boolean;
+    size?: import('..').TQuenSize;
     label?: string;
     required?: boolean;
     error?: string | boolean;
+    leftContent?: import('react').ReactNode;
+    rightContent?: import('react').ReactNode;
+    id?: string;
+    className?: string;
+    style?: import('react').CSSProperties;
     placeholder?: string;
-    leftContent?: React.ReactNode;
-    rightContent?: React.ReactNode;
     name?: string;
-    className?: string;
     items: ITEM[];
     onBlur?: React.FocusEventHandler;
     onFocus?: React.FocusEventHandler;
     onClear?: () => void;
     clearable?: boolean;
-    style?: import('react').CSSProperties;
     messageNoData?: string;
     notFoundContent?: React.ReactNode;
     defaultOpen?: boolean;
     open?: boolean;
     loading?: boolean;
     autoFocus?: boolean;
-    id?: string;
     showSearch?: boolean;
     zIndex?: number;
 } | {
@@ -110,29 +110,29 @@ export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
     onChangeReturnValue?: "item";
     value?: ITEM[] | undefined;
     multi: true;
-    size?: import('..').TQuenSize;
     disabled?: boolean;
+    size?: import('..').TQuenSize;
     label?: string;
     required?: boolean;
     error?: string | boolean;
+    leftContent?: import('react').ReactNode;
+    rightContent?: import('react').ReactNode;
+    id?: string;
+    className?: string;
+    style?: import('react').CSSProperties;
     placeholder?: string;
-    leftContent?: React.ReactNode;
-    rightContent?: React.ReactNode;
     name?: string;
-    className?: string;
     items: ITEM[];
     onBlur?: React.FocusEventHandler;
     onFocus?: React.FocusEventHandler;
     onClear?: () => void;
     clearable?: boolean;
-    style?: import('react').CSSProperties;
     messageNoData?: string;
     notFoundContent?: React.ReactNode;
     defaultOpen?: boolean;
     open?: boolean;
     loading?: boolean;
     autoFocus?: boolean;
-    id?: string;
     showSearch?: boolean;
     zIndex?: number;
 };

package/dist/Select/helpers.es.js

@@ -1,5 +1,5 @@
 const defaultGetItemLabel = (item) => item.label;
-const defaultGetItemValue = (item) => (item == null ? void 0 : item.value) || null;
+const defaultGetItemValue = (item) => item?.value || null;
 const defaultGetItemDisabled = (item) => item.disabled;
 const defaultGetItemIcon = (item) => item.icon;
 function withDefaultGetters(props) {