@companix/uikit 0.1.10 → 0.1.12

package/dist/WriteBar/Editor.d.ts

@@ -0,0 +1,34 @@
+interface TextSelection {
+    from: number;
+    to: number;
+}
+export declare class Editor {
+    private element;
+    private prevText;
+    private prevTextSelection;
+    private handlers;
+    constructor(element: HTMLSpanElement);
+    getElement(): HTMLSpanElement;
+    onPaste(handler: (files: File[]) => void): () => void;
+    onKeyCombo(handler: (combo: string | null, event: KeyboardEvent) => void): () => void;
+    onFocusChange(handler: (focused: boolean) => void): () => void;
+    onContentChange(handler: (text: string, selection: TextSelection) => void): () => void;
+    onMouseDown(): () => void;
+    setSelection(selection: TextSelection): void;
+    insertAtSelection(text: string, selection?: TextSelection): void;
+    removeFormat(): void;
+    resetText(text?: string, asHtml?: boolean, focusEditor?: boolean): void;
+    getText(): string;
+    getHtml(): string;
+    getHtmlWithEmojisAsText(): string;
+    focus(atStart?: boolean): void;
+    isFocused(): boolean;
+    setDisabled(disabled: boolean): void;
+    private handlePaste;
+    private handleFocus;
+    private handleBlur;
+    private handleMouseDown;
+    private checkContentChanged;
+    private resolveDomPosition;
+}
+export {};

package/dist/WriteBar/Input.d.ts

@@ -0,0 +1,14 @@
+import { Editor } from './Editor';
+interface WriteBarInputProps {
+    id?: string;
+    className?: string;
+    inputClassName: string;
+    placeholderClassName?: string;
+    placeholder?: string;
+    value?: string;
+    inputMode?: 'text';
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onCreate: (editor: Editor) => void;
+}
+export declare const WriteBarInput: (props: WriteBarInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WriteBar/WireBar.scss

@@ -27,52 +27,50 @@
     position: relative;
   }
 
-  &-form {
+  &-placeholder {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font: inherit;
+    font: inherit;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    padding: 12px 0;
+
+    @include mixins.use-styles(write-bar, placeholder);
+  }
+
+  &-input-wrapper {
     position: relative;
-    display: flex;
-    flex: 1;
-    min-inline-size: 0;
-
-    textarea {
-      box-sizing: border-box;
-      flex: 1;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      resize: none;
-      background: transparent;
-      border: 0;
-      height: 56px;
-      max-height: 280px;
-      padding: 16px 12px;
-      width: 100%;
-      min-width: 0;
-
-      &::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      &::-webkit-scrollbar-corner {
-        visibility: hidden;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        visibility: hidden;
-      }
-
-      &::placeholder {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        opacity: 1;
-
-        @include mixins.use-styles(write-bar, placeholder);
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
+    width: 100%;
+    overflow: auto;
+
+    margin: 0 6px;
+    -ms-flex-item-align: center;
+    align-self: center;
+  }
+
+  &-input {
+    display: block;
+    position: relative;
+    font: inherit;
+    width: 100%;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    overflow: auto;
+    background-color: transparent;
+    cursor: text;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    outline: none;
+
+    margin: 12px 0;
+    min-height: var(--messageLineHeight);
+    max-height: calc(12 * var(--messageLineHeight));
   }
 
   &-icon {
@@ -90,7 +88,7 @@
     background: none;
     cursor: pointer;
     opacity: 0.72;
-    height: 56px;
+    height: 48px;
     min-width: 44px;
     width: 44px;
     transition: all 150ms;

package/dist/WriteBar/index.d.ts

@@ -1,18 +1,18 @@
 import { IconDefinition } from '../Icon';
-export interface WriteBarProps extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onKeyDown' | 'autoComplete' | 'cols' | 'dirName' | 'disabled' | 'maxLength' | 'minLength' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'rows' | 'value' | 'wrap' | 'onChange' | 'onFocus' | 'onBlur'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown'> {
+import { Editor } from './Editor';
+export interface WriteBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown'> {
     containerRef?: React.Ref<HTMLDivElement>;
-    textareaRef?: React.Ref<HTMLTextAreaElement>;
     before?: React.ReactNode;
-    inlineAfter?: React.ReactNode;
     after?: React.ReactNode;
-    onHeightChange?: VoidFunction;
     contentClassName?: string;
     shadow?: boolean;
-    attachbar?: React.ReactNode;
+    header?: React.ReactNode;
     children?: never;
+    placeholder?: string;
+    onCreate: (editor: Editor) => void;
 }
 export declare const WriteBar: {
-    ({ before, inlineAfter, after, onHeightChange, shadow, containerRef, attachbar, contentClassName, textareaRef, autoComplete, cols, dirName, disabled, maxLength, minLength, name, placeholder, readOnly, required, value, wrap, rows, onChange, onFocus, onBlur, id, inputMode, defaultValue, autoFocus, tabIndex, spellCheck, className, onKeyDown, ...restProps }: WriteBarProps): import("react/jsx-runtime").JSX.Element;
+    (props: WriteBarProps): import("react/jsx-runtime").JSX.Element;
     IconButton({ Component, icon, mode, onClick, isLoading, isHidden }: WriteBarIconProps): import("react/jsx-runtime").JSX.Element;
 };
 interface WriteBarIconProps {

package/dist/WriteBar/keyboard.d.ts

@@ -0,0 +1,16 @@
+export declare enum Modifier {
+    Mod = "Mod",
+    Alt = "Alt",
+    Shift = "Shift",
+    Meta = "Meta"
+}
+export interface KeyCombo {
+    key: string;
+    code: string;
+}
+declare const MODULE_KEY_COMBOS: readonly [Modifier.Shift, Modifier.Mod, "ArrowDown", "ArrowUp", "Mod+ArrowDown", "Mod+ArrowUp", "Enter", "Escape", "Backspace", "Shift+Enter", "Mod+Enter", "ArrowLeft", "ArrowRight", "Tab", "Shift+Tab", "Space", "Mod+B", "Mod+U", "Mod+I", "Mod+S", "Mod+K", "Mod+Equal", "Mod+Shift+Equal", "Mod+Minus", "Mod+Shift+Minus", "PageUp", "PageDown", "Home", "End"];
+export type ComboKeys = (typeof MODULE_KEY_COMBOS)[number];
+export declare const getKeyCombo: (event: KeyboardEvent) => KeyCombo | undefined;
+export declare const getModuleKeyCombo: (event: KeyboardEvent) => string | null;
+declare const onElementKeyDownFactory: (handler: (combo: string | null, event: KeyboardEvent) => void) => (event: KeyboardEvent) => void;
+export { onElementKeyDownFactory };

package/dist/WriteBar/utils.d.ts

@@ -0,0 +1,14 @@
+export declare const isTextNode: (node: Node) => node is Text;
+export declare const isElementNode: (node: Node) => node is Element;
+export declare const getNodeTextContent: (node: Node) => string;
+export declare const getEditorSelection: (root: HTMLElement) => {
+    range: Range;
+    selection: Selection;
+} | {};
+export declare const getPlainTextOffset: (root: HTMLElement, targetNode: Node, targetOffset: number) => number;
+export declare const getTextSelectionOffsets: (root: HTMLElement, range: Range) => {
+    from: number;
+    to: number;
+};
+export declare const scrollSelectionIntoView: () => void;
+export declare const normalizeEditorText: (text: string) => string;

package/dist/bundle.es.js

@@ -16,7 +16,7 @@ import { OptionItem as w } from "./bundle.es16.js";
 import { NumberInput as L } from "./bundle.es17.js";
 import { OptionsList as F } from "./bundle.es18.js";
 import { Checkbox as G } from "./bundle.es19.js";
-import { Switch as Y } from "./bundle.es20.js";
+import { Switch as E } from "./bundle.es20.js";
 import { Radio as j, RadioGroup as q } from "./bundle.es21.js";
 import { Drawer as J } from "./bundle.es22.js";
 import { Dialog as Q } from "./bundle.es23.js";
@@ -37,23 +37,24 @@ import { Skeleton as Pe } from "./bundle.es37.js";
 import { Blank as Ie } from "./bundle.es38.js";
 import { ProgressRing as ke } from "./bundle.es39.js";
 import { WriteBar as ve } from "./bundle.es40.js";
-import { DropArea as Oe, DropAreaProvider as Re, useDragEnter as ze } from "./bundle.es41.js";
-import { Table as Ce } from "./bundle.es42.js";
-import { ThemeProvider as Me, useTheme as Fe } from "./bundle.es43.js";
-import { ColorSchemeScript as Ge, colorSchemeScript as We } from "./bundle.es44.js";
-import { useLocalStorage as Ee } from "./bundle.es45.js";
-import { useBooleanState as qe } from "./bundle.es46.js";
-import { useResizeTextarea as Je } from "./bundle.es47.js";
-import { useLoading as Qe } from "./bundle.es48.js";
-import { NowContextProvider as Ve, useNow as Xe } from "./bundle.es49.js";
-import { createAlertAgent as _e } from "./bundle.es50.js";
-import { createToaster as er } from "./bundle.es51.js";
-import { Toast as or } from "./bundle.es52.js";
-import { DialogShell as pr, DrawerShell as mr, createPopupRegistry as ar, usePopup as xr } from "./bundle.es53.js";
-import { createPopoversRegistry as ir } from "./bundle.es54.js";
-import { createScope as nr, createStaticScope as lr } from "./bundle.es55.js";
-import { RemoveListener as Sr } from "./bundle.es56.js";
-import { MONDAY as gr, addMonths as Dr, createDayDisableChecker as dr, endOfDay as hr, endOfWeek as Br, isDayMinMaxRestricted as Pr, isSameDate as yr, setMonth as Ir, setYear as Tr, startOfDay as kr, startOfWeek as br, subMonths as vr, useDayDisableCheker as Ar } from "./bundle.es57.js";
+import { Editor as Oe } from "./bundle.es41.js";
+import { DropArea as ze, DropAreaProvider as we, useDragEnter as Ce } from "./bundle.es42.js";
+import { Table as Me } from "./bundle.es43.js";
+import { ThemeProvider as Ne, useTheme as Ge } from "./bundle.es44.js";
+import { ColorSchemeScript as Ee, colorSchemeScript as Ye } from "./bundle.es45.js";
+import { useLocalStorage as qe } from "./bundle.es46.js";
+import { useBooleanState as Je } from "./bundle.es47.js";
+import { useResizeTextarea as Qe } from "./bundle.es48.js";
+import { useLoading as Ve } from "./bundle.es49.js";
+import { NowContextProvider as Ze, useNow as _e } from "./bundle.es50.js";
+import { createAlertAgent as er } from "./bundle.es51.js";
+import { createToaster as or } from "./bundle.es52.js";
+import { Toast as pr } from "./bundle.es53.js";
+import { DialogShell as ar, DrawerShell as xr, createPopupRegistry as fr, usePopup as ir } from "./bundle.es54.js";
+import { createPopoversRegistry as nr } from "./bundle.es55.js";
+import { createScope as cr, createStaticScope as Sr } from "./bundle.es56.js";
+import { RemoveListener as gr } from "./bundle.es57.js";
+import { MONDAY as dr, addMonths as hr, createDayDisableChecker as Br, endOfDay as Pr, endOfWeek as yr, isDayMinMaxRestricted as Ir, isSameDate as Tr, setMonth as kr, setYear as br, startOfDay as vr, startOfWeek as Ar, subMonths as Or, useDayDisableCheker as Rr } from "./bundle.es58.js";
 export {
   Z as AlertDialog,
   o as Avatar,
@@ -61,24 +62,25 @@ export {
   s as Button,
   l as ButtonGroup,
   G as Checkbox,
-  Ge as ColorSchemeScript,
+  Ee as ColorSchemeScript,
   te as Countdown,
   ie as DateInput,
   xe as DatePicker,
   Q as Dialog,
-  pr as DialogShell,
+  ar as DialogShell,
   J as Drawer,
-  mr as DrawerShell,
-  Oe as DropArea,
-  Re as DropAreaProvider,
+  xr as DrawerShell,
+  ze as DropArea,
+  we as DropAreaProvider,
+  Oe as Editor,
   ne as FileOverlay,
   ce as FormGroup,
   De as Icon,
   d as ImitateScroll,
   R as Input,
   $ as LoadingButton,
-  gr as MONDAY,
-  Ve as NowContextProvider,
+  dr as MONDAY,
+  Ze as NowContextProvider,
   L as NumberInput,
   w as OptionItem,
   F as OptionsList,
@@ -88,51 +90,51 @@ export {
   ke as ProgressRing,
   j as Radio,
   q as RadioGroup,
-  Sr as RemoveListener,
+  gr as RemoveListener,
   g as Scrollable,
   B as Segments,
   b as Select,
   A as SelectTags,
   Pe as Skeleton,
   S as Spinner,
-  Y as Switch,
-  Ce as Table,
+  E as Switch,
+  Me as Table,
   re as Tabs,
   me as TextArea,
-  Me as ThemeProvider,
+  Ne as ThemeProvider,
   ue as TimePicker,
-  or as Toast,
+  pr as Toast,
   T as Tooltip,
   ve as WriteBar,
-  Dr as addMonths,
+  hr as addMonths,
   p as avatarSizes,
-  We as colorSchemeScript,
-  _e as createAlertAgent,
-  dr as createDayDisableChecker,
-  ir as createPopoversRegistry,
-  ar as createPopupRegistry,
-  nr as createScope,
-  lr as createStaticScope,
-  er as createToaster,
-  hr as endOfDay,
-  Br as endOfWeek,
+  Ye as colorSchemeScript,
+  er as createAlertAgent,
+  Br as createDayDisableChecker,
+  nr as createPopoversRegistry,
+  fr as createPopupRegistry,
+  cr as createScope,
+  Sr as createStaticScope,
+  or as createToaster,
+  Pr as endOfDay,
+  yr as endOfWeek,
   a as getBadgeIconSizeByImageBaseSize,
   x as getFallbackIconSizeByImageBaseSize,
   f as getInitialsFontSize,
-  Pr as isDayMinMaxRestricted,
-  yr as isSameDate,
-  Ir as setMonth,
-  Tr as setYear,
-  kr as startOfDay,
-  br as startOfWeek,
-  vr as subMonths,
-  qe as useBooleanState,
-  Ar as useDayDisableCheker,
-  ze as useDragEnter,
-  Qe as useLoading,
-  Ee as useLocalStorage,
-  Xe as useNow,
-  xr as usePopup,
-  Je as useResizeTextarea,
-  Fe as useTheme
+  Ir as isDayMinMaxRestricted,
+  Tr as isSameDate,
+  kr as setMonth,
+  br as setYear,
+  vr as startOfDay,
+  Ar as startOfWeek,
+  Or as subMonths,
+  Je as useBooleanState,
+  Rr as useDayDisableCheker,
+  Ce as useDragEnter,
+  Ve as useLoading,
+  qe as useLocalStorage,
+  _e as useNow,
+  ir as usePopup,
+  Qe as useResizeTextarea,
+  Ge as useTheme
 };

package/dist/bundle.es10.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { makeTabId as c, useTabSlider as i } from "./bundle.es58.js";
+import { makeTabId as c, useTabSlider as i } from "./bundle.es59.js";
 import { attr as o } from "@companix/utils-browser";
 import { useRef as u, useId as f } from "react";
 const h = ({ value: s, onChange: t, options: a }) => {

package/dist/bundle.es13.js

@@ -1,10 +1,10 @@
 import { jsx as l } from "react/jsx-runtime";
 import { useRef as L, useMemo as j, useImperativeHandle as k } from "react";
 import { Popover as q } from "./bundle.es11.js";
-import { useFroozeClosing as w } from "./bundle.es59.js";
-import { SelectInput as H } from "./bundle.es60.js";
-import { useScrollListController as M } from "./bundle.es61.js";
-import { OptionsPopover as N } from "./bundle.es62.js";
+import { useFroozeClosing as w } from "./bundle.es60.js";
+import { SelectInput as H } from "./bundle.es61.js";
+import { useScrollListController as M } from "./bundle.es62.js";
+import { OptionsPopover as N } from "./bundle.es63.js";
 import { mergeRefs as W } from "react-merge-refs";
 const Z = (t) => {
   const {

package/dist/bundle.es14.js

@@ -3,12 +3,12 @@ import { mergeRefs as T } from "react-merge-refs";
 import { useState as M, useRef as h, useMemo as j } from "react";
 import { matchPattern as q } from "@companix/utils-js";
 import { faXmark as V, faChevronDown as $ } from "@companix/icons-solid";
-import { useFroozeClosing as B } from "./bundle.es59.js";
+import { useFroozeClosing as B } from "./bundle.es60.js";
 import { Popover as L } from "./bundle.es11.js";
 import { Icon as g } from "./bundle.es35.js";
 import { attr as l, getActiveElementByAnotherElement as X, contains as G } from "@companix/utils-browser";
-import { OptionsPopover as H } from "./bundle.es62.js";
-import { arrays as v } from "./bundle.es63.js";
+import { OptionsPopover as H } from "./bundle.es63.js";
+import { arrays as v } from "./bundle.es64.js";
 const ne = (r) => {
   const {
     closeAfterSelect: C,

package/dist/bundle.es15.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as b, useRef as R } from "react";
 import { mergeRefs as c } from "react-merge-refs";
-import { InputElement as x } from "./bundle.es64.js";
-import { InputContainer as I } from "./bundle.es65.js";
+import { InputElement as x } from "./bundle.es65.js";
+import { InputContainer as I } from "./bundle.es66.js";
 import g from "classnames";
 const N = b(
   ({

package/dist/bundle.es17.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import C from "classnames";
 import { forwardRef as j, useRef as w } from "react";
 import { mergeRefs as y } from "react-merge-refs";
-import { InputContainer as F } from "./bundle.es65.js";
+import { InputContainer as F } from "./bundle.es66.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({

package/dist/bundle.es24.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import f from "classnames";
 import * as o from "@radix-ui/react-dialog";
 import { VisuallyHidden as l } from "@radix-ui/react-visually-hidden";
-import { RemoveListener as u } from "./bundle.es56.js";
+import { RemoveListener as u } from "./bundle.es57.js";
 const v = (i) => {
   const { open: t, onOpenChange: s, children: a, onClosed: c, disableEsc: p, overlay: n = {}, content: m = {} } = i, d = (h) => {
     p && h.preventDefault();

package/dist/bundle.es25.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-alert-dialog";
 import { Button as c } from "./bundle.es5.js";
-import { RemoveListener as N } from "./bundle.es56.js";
+import { RemoveListener as N } from "./bundle.es57.js";
 import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
 const C = ({
   open: d,

package/dist/bundle.es26.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { Button as p } from "./bundle.es5.js";
-import { useLoading as s } from "./bundle.es48.js";
+import { useLoading as s } from "./bundle.es49.js";
 const l = ({
   onClick: o,
   appearance: r = "primary",

package/dist/bundle.es27.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import { useTabSlider as b, makeTabId as l } from "./bundle.es58.js";
+import { useTabSlider as b, makeTabId as l } from "./bundle.es59.js";
 import * as n from "@radix-ui/react-tabs";
 import { useRef as m, useId as f, createContext as T, useContext as c } from "react";
 const o = T({ baseId: "", containerRef: {} }), u = ({ children: s, value: e, onChange: r }) => {

package/dist/bundle.es29.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import u from "classnames";
-import { useResizeTextarea as z } from "./bundle.es47.js";
+import { useResizeTextarea as z } from "./bundle.es48.js";
 import { attr as e, callMultiple as R } from "@companix/utils-browser";
 import { useEffect as T } from "react";
 import { mergeRefs as g } from "react-merge-refs";

package/dist/bundle.es30.js

@@ -2,11 +2,11 @@ import { jsx as u } from "react/jsx-runtime";
 import { Popover as T } from "./bundle.es11.js";
 import { Input as w } from "./bundle.es15.js";
 import { useState as A, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es66.js";
-import { useDayDisableCheker as N } from "./bundle.es57.js";
+import { Calendar as E } from "./bundle.es67.js";
+import { useDayDisableCheker as N } from "./bundle.es58.js";
 import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es63.js";
-import { SelectRightElements as Y } from "./bundle.es67.js";
+import { removeDigits as O } from "./bundle.es64.js";
+import { SelectRightElements as Y } from "./bundle.es68.js";
 const i = {
   char: "-",
   toString: (e) => {

package/dist/bundle.es31.js

@@ -1,8 +1,8 @@
 import { jsxs as D, jsx as h } from "react/jsx-runtime";
 import { useMemo as M, useEffect as C } from "react";
 import { Select as c } from "./bundle.es13.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es63.js";
-import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es68.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es64.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es69.js";
 const B = ({
   min: o = j,
   max: e = N,

package/dist/bundle.es34.js

@@ -1,8 +1,8 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as b, useMemo as I, useState as E, useCallback as A } from "react";
 import { getNum as S } from "@companix/utils-js";
-import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es63.js";
-import { SelectRightElements as z } from "./bundle.es67.js";
+import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es64.js";
+import { SelectRightElements as z } from "./bundle.es68.js";
 import { Select as F } from "./bundle.es13.js";
 import { Input as G } from "./bundle.es15.js";
 const o = {