@sima-land/ui-nucleons 45.0.0-alpha.1 → 45.0.0-alpha.2

package/bottom-bar/bottom-bar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BottomBarProps, BottomBarSize } from './types';
+import { BottomBarProps, type BottomBarSize } from './types';
 export declare const BOTTOM_BAR_HEIGHT: Record<BottomBarSize, number>;
 export declare const BOTTOM_BAR_DEFAULTS: {
     readonly size: "m";

package/bottom-bar/index.d.ts

@@ -1,2 +1,2 @@
+export type { BottomBarSize, BottomBarProps } from './types';
 export { BottomBar, BOTTOM_BAR_DEFAULTS, BOTTOM_BAR_HEIGHT } from './bottom-bar';
-export { BottomBarSize, BottomBarProps } from './types';

package/dropdown-item/index.d.ts

@@ -31,4 +31,4 @@ export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElem
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function DropdownItem({ size, children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, 'data-testid': testId, ...restProps }: DropdownItemProps): JSX.Element;
+export declare function DropdownItem({ size, children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId, ...restProps }: DropdownItemProps): JSX.Element;

package/dropdown-item/index.js

@@ -25,14 +25,15 @@ const cx = bind_1.default.bind(dropdown_item_module_scss_1.default);
  * @return Элемент.
  */
 function DropdownItem(_a) {
-    var { size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, 'data-testid': testId = 'dropdown-item' } = _a, restProps = __rest(_a, ["size", "children", "className", "selected", "disabled", "noHover", "checked", "startContent", "startIcon", "endContent", "endIcon", "comment", 'data-testid']);
+    var { size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId = 'dropdown-item' } = _a, restProps = __rest(_a, ["size", "children", "className", "selected", "disabled", "noHover", "checked", "startContent", "startIcon", "endContent", "endIcon", "comment", "dangerouslySetInnerHTML", 'data-testid']);
     const start = StartIcon ? react_1.default.createElement(StartIcon, { className: cx('icon') }) : startContent;
     const end = EndIcon ? react_1.default.createElement(EndIcon, { className: cx('icon') }) : endContent;
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), "data-testid": testId }),
+    const hasChildren = [start, children, end].some(item => typeof item !== 'undefined');
+    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), dangerouslySetInnerHTML: dangerouslySetInnerHTML, "data-testid": testId }), hasChildren ? (react_1.default.createElement(react_1.default.Fragment, null,
         start && react_1.default.createElement("div", { className: cx('col', 'col-start') }, start),
         react_1.default.createElement("div", { className: cx('col', 'col-center') },
             react_1.default.createElement("div", { className: cx('row-main') }, children),
             size === 'xl' && comment && react_1.default.createElement("div", { className: cx('row-comment') }, comment)),
-        end && react_1.default.createElement("div", { className: cx('col', 'col-end') }, end)));
+        end && react_1.default.createElement("div", { className: cx('col', 'col-end') }, end))) : undefined));
 }
 exports.DropdownItem = DropdownItem;

package/expandable/index.d.ts

@@ -22,6 +22,7 @@ export interface ExpandableGroupProps {
     style?: CSSProperties;
     /** Нужно ли выводить список развернутым. */
     expanded?: boolean;
+    /** Ширина открывающего элемента. */
     openerWidth?: number;
 }
 export interface GroupItemProps {

package/hooks/index.js

@@ -64,7 +64,9 @@ function useOutsideClick(elementRef, callback) {
                 }
             }
             isOutsideClick && ((_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, event));
-        });
+        }, 
+        // ВАЖНО: чтобы изменение DOM не приводило к ложному срабатыванию
+        { capture: true });
         return off;
     }, []);
 }

package/hooks/keydown.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useKeydown = void 0;
 const react_1 = require("react");
 const identity_1 = require("./identity");
-const on_1 = __importDefault(require("../helpers/on"));
+const on_1 = require("../helpers/on");
 /**
  * Хук, добавляющий обработчик нажатия на клавишу.
  * @param targetKey Клавиша, для которой отслеживается нажатие.
@@ -14,7 +11,7 @@ const on_1 = __importDefault(require("../helpers/on"));
  */
 function useKeydown(targetKey, callback) {
     const ref = (0, identity_1.useIdentityRef)(callback);
-    (0, react_1.useEffect)(() => (0, on_1.default)(document, 'keydown', event => {
+    (0, react_1.useEffect)(() => (0, on_1.on)(document, 'keydown', event => {
         const handler = ref.current;
         (event.key === targetKey || event.code === targetKey) && (handler === null || handler === void 0 ? void 0 : handler(event));
     }), [targetKey]);

package/modal/modal.module.scss

@@ -14,7 +14,7 @@ $modal-max-height: 696px;
 
 @mixin fullscreen-modal {
   width: 100%;
-  height: calc(100 * var(--vh, 1vh));
+  height: 100%;
   max-height: 100%;
 }
 

package/modal-overlay/modal-overlay.module.scss

@@ -5,9 +5,12 @@
   position: fixed;
   top: 0;
   left: 0;
+
+  // ВАЖНО: высота/ширина в процентах тк при использовании 100vw/100vh размер ломается если у body указан min-width
+  height: 100%;
+  width: 100%;
+
   display: flex;
-  width: 100vw;
-  height: calc(var(--vh, 1vh) * 100);
   background: modal-overlay-util.$overlay-color;
   overflow: auto;
   @include utils.hidden-scrollbars;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.1",
+  "version": "45.0.0-alpha.2",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/switcher-row/index.js

@@ -17,7 +17,7 @@ const cx = bind_1.default.bind(switcher_row_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-function SwitcherRow({ children, className, style, textAlign, fieldPosition = 'start', 'data-testid': testId = 'switcher-row', }) {
+function SwitcherRow({ children, className, style, textAlign = 'left', fieldPosition = 'start', 'data-testid': testId = 'switcher-row', }) {
     var _a;
     const { toggle, checkbox, radio, label, comment } = (0, define_slots_1.defineSlots)(children, {
         toggle: toggle_1.Toggle,
@@ -30,6 +30,7 @@ function SwitcherRow({ children, className, style, textAlign, fieldPosition = 's
     const failed = input === null || input === void 0 ? void 0 : input.props.failed;
     const disabled = input === null || input === void 0 ? void 0 : input.props.disabled;
     const fieldId = input === null || input === void 0 ? void 0 : input.props.id;
+    // @todo в Safari position: relative ломает vertical-align
     const fieldColumn = input && (react_1.default.createElement("div", { className: cx('col', 'field-col', { 'toggle-col': toggle }) }, input));
     return (react_1.default.createElement("div", { className: cx('root', `text-align-${textAlign}`, { failed, disabled }, className), style: style, "data-testid": testId },
         fieldPosition === 'start' && fieldColumn,

package/switcher-row/switcher-row.module.scss

@@ -33,7 +33,7 @@
 }
 
 .main-col {
-  flex-grow: 1;
+  // ВАЖНО: чтобы область нажатия ограничивалась текстом не задаем тут flex-grow: 1
   cursor: pointer;
 }
 

package/toggle/toggle.module.scss

@@ -6,11 +6,17 @@
   cursor: pointer;
   user-select: none;
   vertical-align: -2px;
-  overflow: hidden;
 }
 
 .input {
-  display: none;
+  position: absolute;
+  display: block;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
   &:not(:checked) + .switch {
     --toggle-slider-position: 2px;
   }