@phpsoftbox/react-softbox 1.4.5 → 1.5.0

package/README.md

@@ -42,6 +42,7 @@ import {
   Text,
   Textarea,
   Tooltip,
+  Wizard,
 } from '@phpsoftbox/react-softbox';
 ```
 
@@ -71,6 +72,7 @@ setThemeMode('dark');
 - `docs/tabs.md`
 - `docs/progress.md`
 - `docs/breadcrumbs.md`
+- `docs/wizard.md`
 
 ## Playground
 

package/dist/components/Card/Card.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from '../Button/Button';
 type CardProps = React.HTMLAttributes<HTMLDivElement>;
 type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
     title?: React.ReactNode;
@@ -8,10 +9,24 @@ type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
 type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
 type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
     align?: 'left' | 'right' | 'between';
+    buttonHideLabelOn?: 'never' | 'md';
 };
 type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement>;
+type CardToolbarButtonBaseProps = Omit<React.ComponentProps<typeof Button>, 'children'> & {
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    hideLabelOn?: 'never' | 'md';
+};
+type CardToolbarButtonProps = (CardToolbarButtonBaseProps & {
+    icon: React.ReactNode;
+    label?: React.ReactNode;
+}) | (CardToolbarButtonBaseProps & {
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+});
 type CardToolbarComponent = React.FC<CardToolbarProps> & {
     Group: React.FC<CardToolbarGroupProps>;
+    Button: React.FC<CardToolbarButtonProps>;
 };
 type CardComponent = React.FC<CardProps> & {
     Header: React.FC<CardHeaderProps>;

package/dist/components/Card/Card.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import styles from './Card.module.css';
+import Button from '../Button/Button';
 function CardBase({ className, ...props }) {
     const classes = [styles.card, className].filter(Boolean).join(' ');
     return _jsx("section", { className: classes, ...props });
@@ -17,14 +19,128 @@ function CardFooter({ className, ...props }) {
     const classes = [styles.footer, className].filter(Boolean).join(' ');
     return _jsx("div", { className: classes, ...props });
 }
-function CardToolbarBase({ align = 'left', className, ...props }) {
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const CardToolbarContext = React.createContext({ hideLabelOn: 'md' });
+const resolveToolbarRows = (elements) => {
+    let currentTop = null;
+    let currentRow = 0;
+    return elements.map((element) => {
+        const top = Math.round(element.offsetTop);
+        if (currentTop === null) {
+            currentTop = top;
+            return { row: currentRow, rowStart: true };
+        }
+        if (Math.abs(top - currentTop) > 1) {
+            currentTop = top;
+            currentRow += 1;
+            return { row: currentRow, rowStart: true };
+        }
+        return { row: currentRow, rowStart: false };
+    });
+};
+const isSameRows = (left, right) => {
+    if (left.length !== right.length) {
+        return false;
+    }
+    for (let index = 0; index < left.length; index += 1) {
+        if (left[index].row !== right[index].row || left[index].rowStart !== right[index].rowStart) {
+            return false;
+        }
+    }
+    return true;
+};
+function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', className, children, ...props }) {
     const alignClass = align === 'right'
         ? styles.toolbarAlignRight
         : align === 'between'
             ? styles.toolbarAlignBetween
             : styles.toolbarAlignLeft;
     const classes = [styles.toolbar, alignClass, className].filter(Boolean).join(' ');
-    return _jsx("div", { className: classes, ...props });
+    const rootRef = React.useRef(null);
+    const [rows, setRows] = React.useState([]);
+    const toolbarChildren = React.Children.toArray(children);
+    useIsomorphicLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        let frameId = null;
+        const collect = () => {
+            root.setAttribute('data-toolbar-measuring', 'true');
+            try {
+                const items = Array.from(root.querySelectorAll('[data-card-toolbar-item="true"]'));
+                const nextRows = resolveToolbarRows(items);
+                setRows((previousRows) => (isSameRows(previousRows, nextRows) ? previousRows : nextRows));
+            }
+            finally {
+                root.removeAttribute('data-toolbar-measuring');
+            }
+        };
+        const scheduleCollect = () => {
+            if (typeof window === 'undefined') {
+                collect();
+                return;
+            }
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            frameId = window.requestAnimationFrame(() => {
+                frameId = null;
+                collect();
+            });
+        };
+        scheduleCollect();
+        const handleResize = () => scheduleCollect();
+        window.addEventListener('resize', handleResize);
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver(() => scheduleCollect());
+            observer.observe(root);
+            Array.from(root.children).forEach((child) => {
+                if (child instanceof HTMLElement) {
+                    observer.observe(child);
+                }
+            });
+            return () => {
+                observer.disconnect();
+                window.removeEventListener('resize', handleResize);
+                if (frameId !== null) {
+                    window.cancelAnimationFrame(frameId);
+                }
+            };
+        }
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+        };
+    }, [toolbarChildren.length]);
+    return (_jsx(CardToolbarContext.Provider, { value: { hideLabelOn: buttonHideLabelOn }, children: _jsx("div", { ref: rootRef, className: classes, ...props, children: toolbarChildren.map((child, index) => {
+                const rowMeta = rows[index];
+                const key = React.isValidElement(child) && child.key !== null ? child.key : `toolbar-item-${index}`;
+                const row = rowMeta?.row ?? 0;
+                const rowStart = rowMeta?.rowStart ?? index === 0;
+                return (_jsx("div", { className: styles.toolbarItem, "data-card-toolbar-item": "true", "data-toolbar-row": row, "data-toolbar-row-start": rowStart ? 'true' : 'false', "data-toolbar-row-wrapped": row > 0 ? 'true' : 'false', children: child }, key));
+            }) }) }));
+}
+function CardToolbarButton({ icon, label, hideLabelOn, className, ...props }) {
+    const toolbarConfig = React.useContext(CardToolbarContext);
+    const resolvedHideLabelOn = hideLabelOn ?? toolbarConfig.hideLabelOn;
+    const hasIcon = icon !== undefined && icon !== null;
+    const hasLabel = label !== undefined && label !== null;
+    if (!hasIcon && !hasLabel) {
+        return null;
+    }
+    const hasBoth = hasIcon && hasLabel;
+    const classes = [
+        styles.toolbarButton,
+        hasBoth ? styles.toolbarButtonHasBoth : null,
+        hasBoth && resolvedHideLabelOn === 'md' ? styles.toolbarButtonHideLabelMd : null,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(Button, { size: "sm", appearance: "outline", className: classes, ...props, children: [hasIcon ? _jsx("span", { className: styles.toolbarButtonIcon, children: icon }) : null, hasBoth ? _jsx("span", { className: styles.toolbarButtonSeparator, "aria-hidden": "true" }) : null, hasLabel ? (_jsx("span", { className: styles.toolbarButtonLabel, children: label })) : null] }));
 }
 function CardToolbarGroup({ className, ...props }) {
     const classes = [styles.toolbarGroup, className].filter(Boolean).join(' ');
@@ -32,6 +148,7 @@ function CardToolbarGroup({ className, ...props }) {
 }
 const CardToolbar = Object.assign(CardToolbarBase, {
     Group: CardToolbarGroup,
+    Button: CardToolbarButton,
 });
 const Card = Object.assign(CardBase, {
     Header: CardHeader,

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/components/Card/Card.module.css

@@ -19,12 +19,15 @@
 
 .toolbar {
   display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
+  align-items: stretch;
+  flex-wrap: wrap;
+  column-gap: var(--spacing-2);
+  row-gap: 0;
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-md);
   border: 1px solid var(--color-line);
   background: var(--surface-panel-soft);
+  overflow: hidden;
 }
 
 .toolbarAlignLeft {
@@ -39,30 +42,95 @@
   justify-content: space-between;
 }
 
-.toolbarGroup {
-  display: inline-flex;
+.toolbarItem {
+  display: flex;
   align-items: center;
-  gap: var(--spacing-2);
-  min-height: 30px;
-  position: relative;
+  min-width: 0;
 }
 
-.toolbarGroup + .toolbarGroup {
-  margin-left: var(--spacing-1);
-  padding-left: var(--spacing-3);
+.toolbarItem[data-toolbar-row-start="false"] {
+  position: relative;
 }
 
-.toolbarGroup + .toolbarGroup::before {
+.toolbarItem[data-toolbar-row-start="false"]::before {
   content: '';
   position: absolute;
-  left: 0;
-  top: 2px;
-  bottom: 2px;
+  left: calc(var(--spacing-2) / -2);
+  top: 0;
+  bottom: 0;
   width: 1px;
   background: var(--color-line);
   opacity: 0.55;
 }
 
+.toolbarItem[data-toolbar-row-wrapped="true"] {
+  margin-top: var(--spacing-2);
+  padding-top: var(--spacing-2);
+}
+
+.toolbarItem[data-toolbar-row-start="true"][data-toolbar-row-wrapped="true"] {
+  position: relative;
+}
+
+.toolbarItem[data-toolbar-row-start="true"][data-toolbar-row-wrapped="true"]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -2000px;
+  right: -2000px;
+  height: 1px;
+  background: var(--color-line);
+}
+
+.toolbar[data-toolbar-measuring="true"] .toolbarItem[data-toolbar-row-wrapped="true"] {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.toolbar[data-toolbar-measuring="true"] .toolbarItem[data-toolbar-row-start="false"]::before,
+.toolbar[data-toolbar-measuring="true"] .toolbarItem[data-toolbar-row-start="true"][data-toolbar-row-wrapped="true"]::before {
+  display: none;
+}
+
+.toolbarGroup {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  padding-inline: var(--spacing-1);
+  min-height: 30px;
+  min-width: 0;
+}
+
+.toolbarButton {
+  min-height: 32px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.toolbarButtonIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toolbarButtonLabel {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.toolbarButtonSeparator {
+  width: 1px;
+  align-self: stretch;
+  background: currentColor;
+  opacity: 0.4;
+}
+
+.toolbarButtonHasBoth {
+  gap: var(--spacing-2);
+}
+
 .headerMain {
   display: flex;
   flex-direction: column;
@@ -99,3 +167,16 @@
   justify-content: flex-end;
   gap: var(--spacing-3);
 }
+
+@media (max-width: 1024px) {
+  .toolbarButtonHideLabelMd .toolbarButtonLabel,
+  .toolbarButtonHideLabelMd .toolbarButtonSeparator {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .toolbar {
+    padding: var(--spacing-2);
+  }
+}

package/dist/components/Input/Field.js

@@ -16,12 +16,17 @@ const InputField = React.forwardRef(({ hasError, className, ...props }, ref) =>
     ]
         .filter(Boolean)
         .join(' ');
-    if (process.env.NODE_ENV !== 'production') {
-        if (!props.id && !props.name) {
+    const warnedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV === 'production') {
+            return;
+        }
+        if (!props.id && !props.name && !warnedRef.current) {
+            warnedRef.current = true;
             // eslint-disable-next-line no-console
             console.warn('Input.Field: рекомендуется передавать id или name для связки с label.');
         }
-    }
+    }, [props.id, props.name]);
     React.useEffect(() => {
         context?.registerField(resolvedId, props.name, props.required === true);
     }, [context, resolvedId, props.name, props.required]);

package/dist/components/Input/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Input/Field.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAM5D,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC;AAE1F,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAA0B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtG,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IAClC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,IAAI,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC5G,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC;IACjD,MAAM,OAAO,GAAG;QACd,MAAM,CAAC,KAAK;QACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC9B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI;QACzD,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAC7B,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtD,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC;AACxG,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Input/Field.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAM5D,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC;AAE1F,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAA0B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtG,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IAClC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,IAAI,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC5G,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC;IACjD,MAAM,OAAO,GAAG;QACd,MAAM,CAAC,KAAK;QACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC9B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI;QACzD,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACnD,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YACzB,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAE3B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtD,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC;AACxG,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,eAAe,UAAU,CAAC"}

package/dist/components/Input/FloatLabel/FloatLabel.module.css

@@ -11,6 +11,7 @@
 .label {
   position: absolute;
   left: 16px;
+  right: 16px;
   top: 16px;
   color: var(--color-muted-2);
   font-size: var(--ui-control-font-size, var(--font-size-3));
@@ -22,6 +23,13 @@
   background: var(--surface-input);
   padding: 0;
   border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wrapperWithHint .label {
+  right: 52px;
 }
 
 .requiredMark {

package/dist/components/Input/FormField/FormField.module.css

@@ -39,3 +39,16 @@
   font-size: 12px;
   color: var(--badge-danger-color, #ff6b6b);
 }
+
+@media (max-width: 720px) {
+  .fieldRow {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .fieldRow .label {
+    min-width: 0;
+    text-align: left;
+    padding-top: 0;
+  }
+}

package/dist/components/Input/MaskedInput.d.ts

@@ -6,5 +6,5 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChan
     placeholderChar?: string;
     escapeChar?: string;
 };
-export default function MaskedInput({ mask, value, onChange, placeholderChar, escapeChar, onPaste, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function MaskedInput({ mask, value, onChange, placeholderChar, escapeChar, onKeyDown, onPaste, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/MaskedInput.js

@@ -82,9 +82,10 @@ const extractRaw = (masked, mask, escapeChar = '\\') => {
     }
     return raw;
 };
-export default function MaskedInput({ mask, value, onChange, placeholderChar, escapeChar = '\\', onPaste, ...props }) {
+export default function MaskedInput({ mask, value, onChange, placeholderChar, escapeChar = '\\', onKeyDown, onPaste, ...props }) {
     const isControlled = value !== undefined;
     const [internal, setInternal] = React.useState('');
+    const inputRef = React.useRef(null);
     const displayValue = React.useMemo(() => {
         const raw = extractRaw(String(isControlled ? value ?? '' : internal), mask, escapeChar);
         return applyMask(raw, mask, placeholderChar, escapeChar);
@@ -92,10 +93,50 @@ export default function MaskedInput({ mask, value, onChange, placeholderChar, es
     const handleChange = (event) => {
         const rawInput = event.target.value;
         const raw = extractRaw(rawInput, mask, escapeChar);
+        const updateRaw = (nextRaw) => {
+            if (!isControlled) {
+                setInternal(nextRaw);
+            }
+            onChange?.(nextRaw);
+        };
+        updateRaw(raw);
+    };
+    const handleKeyDownInternal = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.key !== 'Backspace') {
+            return;
+        }
+        const target = event.currentTarget;
+        const start = target.selectionStart ?? 0;
+        const end = target.selectionEnd ?? start;
+        if (start <= 0 || start !== end) {
+            return;
+        }
+        const masked = target.value;
+        const raw = extractRaw(masked, mask, escapeChar);
+        const rawBefore = extractRaw(masked.slice(0, start), mask, escapeChar);
+        const rawBeforePrev = extractRaw(masked.slice(0, start - 1), mask, escapeChar);
+        // If deleting a literal mask symbol, remove the previous data char instead.
+        if (rawBefore.length !== rawBeforePrev.length) {
+            return;
+        }
+        if (rawBefore.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const deleteIndex = rawBefore.length - 1;
+        const nextRaw = raw.slice(0, deleteIndex) + raw.slice(deleteIndex + 1);
+        const caret = applyMask(nextRaw.slice(0, deleteIndex), mask, placeholderChar, escapeChar).length;
         if (!isControlled) {
-            setInternal(raw);
+            setInternal(nextRaw);
         }
-        onChange?.(raw);
+        onChange?.(nextRaw);
+        requestAnimationFrame(() => {
+            inputRef.current?.setSelectionRange(caret, caret);
+        });
     };
     const handlePaste = (event) => {
         onPaste?.(event);
@@ -107,7 +148,6 @@ export default function MaskedInput({ mask, value, onChange, placeholderChar, es
             return;
         }
         const raw = extractRaw(text, mask, escapeChar);
-        console.log(raw);
         if (!raw) {
             return;
         }
@@ -117,6 +157,6 @@ export default function MaskedInput({ mask, value, onChange, placeholderChar, es
         }
         onChange?.(raw);
     };
-    return _jsx(InputField, { ...props, value: displayValue, onChange: handleChange, onPaste: handlePaste });
+    return (_jsx(InputField, { ...props, ref: inputRef, value: displayValue, onChange: handleChange, onKeyDown: handleKeyDownInternal, onPaste: handlePaste }));
 }
 //# sourceMappingURL=MaskedInput.js.map

package/dist/components/Input/MaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaskedInput.js","sourceRoot":"","sources":["../../../src/components/Input/MaskedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MaskedInput.js","sourceRoot":"","sources":["../../../src/components/Input/MaskedInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/Input/Select/Select.js

@@ -119,12 +119,17 @@ export default function Select({ label, id, name, required = false, options = []
     React.useEffect(() => {
         context?.registerField(controlId, name, required === true);
     }, [context, controlId, name, required]);
-    if (process.env.NODE_ENV !== 'production') {
-        if (!id && !name) {
+    const warnedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV === 'production') {
+            return;
+        }
+        if (!id && !name && !warnedRef.current) {
+            warnedRef.current = true;
             // eslint-disable-next-line no-console
             console.warn('Input.Select: рекомендуется передавать id или name для связки с label.');
         }
-    }
+    }, [id, name]);
     React.useEffect(() => {
         if (open && searchable) {
             inputRef.current?.focus();
@@ -408,7 +413,7 @@ export default function Select({ label, id, name, required = false, options = []
                                         event.stopPropagation();
                                         handleRemove(item.value);
                                     }
-                                }, "aria-label": `Удалить ${item.label}`, children: "\u00D7" })] }, String(item.value))))) : (_jsx("span", { className: styles.singleValue, children: selectedList[0] ? (renderValue ? renderValue(selectedList[0]) : selectedList[0].label) : null }))) : (_jsx("span", { className: styles.placeholder, children: placeholder })) }) }), _jsxs(ActionStack, { className: styles.controls, children: [endActions, showClear ? (_jsx("span", { role: "button", tabIndex: 0, className: styles.clearButton, "aria-label": clearLabel, onMouseDown: (event) => event.preventDefault(), onClick: handleClear, onKeyDown: (event) => {
+                                }, "aria-label": `Удалить ${item.label}`, children: "\u00D7" })] }, String(item.value))))) : (_jsx("span", { className: styles.singleValue, children: selectedList[0] ? (renderValue ? renderValue(selectedList[0]) : selectedList[0].label) : null }))) : (_jsx("span", { className: [styles.placeholder, styles.singleValue].join(' '), children: placeholder })) }) }), _jsxs(ActionStack, { className: styles.controls, children: [endActions, showClear ? (_jsx("span", { role: "button", tabIndex: 0, className: styles.clearButton, "aria-label": clearLabel, onMouseDown: (event) => event.preventDefault(), onClick: handleClear, onKeyDown: (event) => {
                             if (event.key === 'Enter' || event.key === ' ') {
                                 event.preventDefault();
                                 handleClear(event);
@@ -447,7 +452,9 @@ export default function Select({ label, id, name, required = false, options = []
                                             if (event.detail === 0) {
                                                 handleSelect(option);
                                             }
-                                        }, disabled: option.disabled, children: [renderOption ? renderOption(option, { selected, active, multiple }) : _jsx("span", { children: option.label }), selected ? _jsx("span", { className: styles.check, children: "\u2713" }) : null] }, option.value ?? '__empty'));
+                                        }, disabled: option.disabled, children: [renderOption
+                                                ? renderOption(option, { selected, active, multiple })
+                                                : _jsx("span", { className: styles.optionLabel, children: option.label }), selected ? _jsx("span", { className: styles.check, children: "\u2713" }) : null] }, option.value ?? '__empty'));
                                 })
                                 : null] })] })) : null] }));
 }