@ozen-ui/kit 0.28.0 → 0.29.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/__inner__/cjs/components/Card/Card.css +8 -2
  2. package/__inner__/cjs/components/Modal/Modal.d.ts +6 -0
  3. package/__inner__/cjs/components/Modal/Modal.js +6 -5
  4. package/__inner__/cjs/components/Table/Table.css +3 -2
  5. package/__inner__/cjs/components/Table/components/TableRow/TableRow.css +1 -1
  6. package/__inner__/cjs/components/Tag/Tag.css +4 -0
  7. package/__inner__/esm/components/Card/Card.css +8 -2
  8. package/__inner__/esm/components/Modal/Modal.d.ts +6 -0
  9. package/__inner__/esm/components/Modal/Modal.js +6 -5
  10. package/__inner__/esm/components/Table/Table.css +3 -2
  11. package/__inner__/esm/components/Table/components/TableRow/TableRow.css +1 -1
  12. package/__inner__/esm/components/Tag/Tag.css +4 -0
  13. package/package.json +1 -1
  14. package/__inner__/cjs/components/Portal/PortalContext.d.ts +0 -15
  15. package/__inner__/cjs/components/Portal/PortalContext.js +0 -9
  16. package/__inner__/esm/components/Portal/PortalContext.d.ts +0 -15
  17. package/__inner__/esm/components/Portal/PortalContext.js +0 -5
package/__inner__/cjs/components/Card/Card.css CHANGED
@@ -2,10 +2,17 @@
2
2
  position: relative;
3
3
  padding: var(--card-padding);
4
4
  cursor: var(--card-cursor-style);
5
- transition: var(--transition-default);
6
5
  box-sizing: border-box;
6
+ transition:
7
+ background-color var(--transition-default),
8
+ box-shadow var(--transition-default),
9
+ opacity var(--transition-default);
7
10
  }
8
11
 
12
+ .Card::after {
13
+ transition: border-color var(--transition-default);
14
+ }
15
+
9
16
  .Card_size_s {
10
17
  --card-padding: var(--space-l);
11
18
  }
@@ -30,7 +37,6 @@
30
37
  border: var(--card-border-width) var(--card-border-style)
31
38
  var(--card-border-color);
32
39
  border-radius: var(--paper-border-radius);
33
- transition: var(--transition-default);
34
40
  }
35
41
 
36
42
  .Card_borderWidth_s {
package/__inner__/cjs/components/Modal/Modal.d.ts CHANGED
@@ -56,6 +56,9 @@ export type ModalProps = {
56
56
  container?: PortalProps['container'];
57
57
  /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
58
58
  ignoreClickOutsideRefs?: Array<RefObject<HTMLElement>>;
59
+ /** Если {true} отключает портал для компонента.
60
+ * Подробнее – https://react.dev/reference/react-dom/createPortal. */
61
+ disablePortal?: boolean;
59
62
  } & PortalProps;
60
63
  export type ModalRef = PortalRef;
61
64
  export declare const Modal: React.ForwardRefExoticComponent<{
@@ -116,6 +119,9 @@ export declare const Modal: React.ForwardRefExoticComponent<{
116
119
  container?: PortalProps['container'];
117
120
  /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
118
121
  ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[] | undefined;
122
+ /** Если {true} отключает портал для компонента.
123
+ * Подробнее – https://react.dev/reference/react-dom/createPortal. */
124
+ disablePortal?: boolean | undefined;
119
125
  } & import("../Portal").PortalBaseProps & {
120
126
  as?: "div" | undefined;
121
127
  } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & React.RefAttributes<HTMLDivElement>>;
package/__inner__/cjs/components/Modal/Modal.js CHANGED
@@ -18,13 +18,14 @@ var components_1 = require("./components");
18
18
  var index_1 = require("./index");
19
19
  exports.cnModal = (0, classname_1.cn)('Modal');
20
20
  exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
21
- var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? false : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? false : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? false : _g, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, ignoreClickOutsideRefs = _a.ignoreClickOutsideRefs, other = tslib_1.__rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs"]);
21
+ var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? false : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? false : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? false : _g, _h = _a.disablePortal, disablePortal = _h === void 0 ? false : _h, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, ignoreClickOutsideRefs = _a.ignoreClickOutsideRefs, other = tslib_1.__rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "disablePortal", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs"]);
22
22
  var hasBackdrop = !hideBackdrop;
23
23
  var modalInnerRef = (0, react_1.useRef)(null);
24
24
  var focusedElement = (0, react_1.useRef)(null);
25
- var _h = tslib_1.__read((0, react_1.useState)(false), 2), openState = _h[0], setOpenState = _h[1];
26
- var _j = tslib_1.__read((0, react_1.useState)(false), 2), opened = _j[0], setOpened = _j[1];
27
- var _k = (0, index_1.useModalManager)(modalInnerRef, 1000, openState), isTop = _k.isTop, refsClickOutside = _k.refsClickOutside;
25
+ var _j = tslib_1.__read((0, react_1.useState)(false), 2), openState = _j[0], setOpenState = _j[1];
26
+ var _k = tslib_1.__read((0, react_1.useState)(false), 2), opened = _k[0], setOpened = _k[1];
27
+ var _l = (0, index_1.useModalManager)(modalInnerRef, 1000, openState), isTop = _l.isTop, refsClickOutside = _l.refsClickOutside;
28
+ var RootComponent = disablePortal ? 'div' : Portal_1.Portal;
28
29
  (0, useClickOutside_1.useClickOutside)({
29
30
  refs: tslib_1.__spreadArray(tslib_1.__spreadArray([
30
31
  modalInnerRef
@@ -73,7 +74,7 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
73
74
  active: isTop && !disableEscapeKeyDown,
74
75
  });
75
76
  return (react_1.default.createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ classNames: (0, exports.cnModal)({ animation: true }), timeout: 300 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
76
- react_1.default.createElement(Portal_1.Portal, tslib_1.__assign({}, other, { className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
77
+ react_1.default.createElement(RootComponent, tslib_1.__assign({}, other, { className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
77
78
  !hideBackdrop && (react_1.default.createElement(Backdrop_1.Backdrop, tslib_1.__assign({ zIndex: -1 }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
78
79
  react_1.default.createElement(components_1.ModalConsumer, tslib_1.__assign({}, windowProps, { ref: (0, useMultiRef_1.useMultiRef)([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
79
80
  });
package/__inner__/cjs/components/Table/Table.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .Table {
2
+ --table-border-color: var(--color-border-main);
2
3
  border-spacing: 0;
3
4
  background-color: var(--color-background-main);
4
5
  }
@@ -64,11 +65,11 @@
64
65
  }
65
66
 
66
67
  .Table_divider_row .TableCell, .Table_divider_all .TableCell {
67
- border-block-end: var(--border-width-s) solid var(--color-border-main);
68
+ border-block-end: var(--border-width-s) solid var(--table-border-color);
68
69
  }
69
70
 
70
71
  .Table_divider_column .TableCell:not(:last-child), .Table_divider_all .TableCell:not(:last-child) {
71
- border-inline-end: var(--border-width-s) solid var(--color-border-main);
72
+ border-inline-end: var(--border-width-s) solid var(--table-border-color);
72
73
  }
73
74
 
74
75
  .Table .TableBody .TableRow:last-child .TableCell {
package/__inner__/cjs/components/Table/components/TableRow/TableRow.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .TableRow {
2
- transition: background-color var(--transition-slow);
2
+ transition: background-color var(--transition-default);
3
3
  }
4
4
 
5
5
  .TableRow_hover:hover {
package/__inner__/cjs/components/Tag/Tag.css CHANGED
@@ -8,6 +8,10 @@
8
8
  outline: none;
9
9
  border: none;
10
10
  text-decoration: none;
11
+ transition:
12
+ box-shadow var(--transition-default),
13
+ background-color var(--transition-default),
14
+ color var(--transition-default);
11
15
  }
12
16
  .Tag_size_2xs {
13
17
  font: var(--typography-text-3xs-font);
package/__inner__/esm/components/Card/Card.css CHANGED
@@ -2,10 +2,17 @@
2
2
  position: relative;
3
3
  padding: var(--card-padding);
4
4
  cursor: var(--card-cursor-style);
5
- transition: var(--transition-default);
6
5
  box-sizing: border-box;
6
+ transition:
7
+ background-color var(--transition-default),
8
+ box-shadow var(--transition-default),
9
+ opacity var(--transition-default);
7
10
  }
8
11
 
12
+ .Card::after {
13
+ transition: border-color var(--transition-default);
14
+ }
15
+
9
16
  .Card_size_s {
10
17
  --card-padding: var(--space-l);
11
18
  }
@@ -30,7 +37,6 @@
30
37
  border: var(--card-border-width) var(--card-border-style)
31
38
  var(--card-border-color);
32
39
  border-radius: var(--paper-border-radius);
33
- transition: var(--transition-default);
34
40
  }
35
41
 
36
42
  .Card_borderWidth_s {
package/__inner__/esm/components/Modal/Modal.d.ts CHANGED
@@ -56,6 +56,9 @@ export type ModalProps = {
56
56
  container?: PortalProps['container'];
57
57
  /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
58
58
  ignoreClickOutsideRefs?: Array<RefObject<HTMLElement>>;
59
+ /** Если {true} отключает портал для компонента.
60
+ * Подробнее – https://react.dev/reference/react-dom/createPortal. */
61
+ disablePortal?: boolean;
59
62
  } & PortalProps;
60
63
  export type ModalRef = PortalRef;
61
64
  export declare const Modal: React.ForwardRefExoticComponent<{
@@ -116,6 +119,9 @@ export declare const Modal: React.ForwardRefExoticComponent<{
116
119
  container?: PortalProps['container'];
117
120
  /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
118
121
  ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[] | undefined;
122
+ /** Если {true} отключает портал для компонента.
123
+ * Подробнее – https://react.dev/reference/react-dom/createPortal. */
124
+ disablePortal?: boolean | undefined;
119
125
  } & import("../Portal").PortalBaseProps & {
120
126
  as?: "div" | undefined;
121
127
  } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & React.RefAttributes<HTMLDivElement>>;
package/__inner__/esm/components/Modal/Modal.js CHANGED
@@ -15,13 +15,14 @@ import { ModalConsumer } from './components';
15
15
  import { useModalManager } from './index';
16
16
  export var cnModal = cn('Modal');
17
17
  export var Modal = forwardRef(function (_a, ref) {
18
- var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? false : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? false : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? false : _g, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, ignoreClickOutsideRefs = _a.ignoreClickOutsideRefs, other = __rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs"]);
18
+ var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? false : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? false : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? false : _g, _h = _a.disablePortal, disablePortal = _h === void 0 ? false : _h, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, ignoreClickOutsideRefs = _a.ignoreClickOutsideRefs, other = __rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "disablePortal", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs"]);
19
19
  var hasBackdrop = !hideBackdrop;
20
20
  var modalInnerRef = useRef(null);
21
21
  var focusedElement = useRef(null);
22
- var _h = __read(useState(false), 2), openState = _h[0], setOpenState = _h[1];
23
- var _j = __read(useState(false), 2), opened = _j[0], setOpened = _j[1];
24
- var _k = useModalManager(modalInnerRef, 1000, openState), isTop = _k.isTop, refsClickOutside = _k.refsClickOutside;
22
+ var _j = __read(useState(false), 2), openState = _j[0], setOpenState = _j[1];
23
+ var _k = __read(useState(false), 2), opened = _k[0], setOpened = _k[1];
24
+ var _l = useModalManager(modalInnerRef, 1000, openState), isTop = _l.isTop, refsClickOutside = _l.refsClickOutside;
25
+ var RootComponent = disablePortal ? 'div' : Portal;
25
26
  useClickOutside({
26
27
  refs: __spreadArray(__spreadArray([
27
28
  modalInnerRef
@@ -70,7 +71,7 @@ export var Modal = forwardRef(function (_a, ref) {
70
71
  active: isTop && !disableEscapeKeyDown,
71
72
  });
72
73
  return (React.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), timeout: 300 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
73
- React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
74
+ React.createElement(RootComponent, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
74
75
  !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1 }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
75
76
  React.createElement(ModalConsumer, __assign({}, windowProps, { ref: useMultiRef([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
76
77
  });
package/__inner__/esm/components/Table/Table.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .Table {
2
+ --table-border-color: var(--color-border-main);
2
3
  border-spacing: 0;
3
4
  background-color: var(--color-background-main);
4
5
  }
@@ -64,11 +65,11 @@
64
65
  }
65
66
 
66
67
  .Table_divider_row .TableCell, .Table_divider_all .TableCell {
67
- border-block-end: var(--border-width-s) solid var(--color-border-main);
68
+ border-block-end: var(--border-width-s) solid var(--table-border-color);
68
69
  }
69
70
 
70
71
  .Table_divider_column .TableCell:not(:last-child), .Table_divider_all .TableCell:not(:last-child) {
71
- border-inline-end: var(--border-width-s) solid var(--color-border-main);
72
+ border-inline-end: var(--border-width-s) solid var(--table-border-color);
72
73
  }
73
74
 
74
75
  .Table .TableBody .TableRow:last-child .TableCell {
package/__inner__/esm/components/Table/components/TableRow/TableRow.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .TableRow {
2
- transition: background-color var(--transition-slow);
2
+ transition: background-color var(--transition-default);
3
3
  }
4
4
 
5
5
  .TableRow_hover:hover {
package/__inner__/esm/components/Tag/Tag.css CHANGED
@@ -8,6 +8,10 @@
8
8
  outline: none;
9
9
  border: none;
10
10
  text-decoration: none;
11
+ transition:
12
+ box-shadow var(--transition-default),
13
+ background-color var(--transition-default),
14
+ color var(--transition-default);
11
15
  }
12
16
  .Tag_size_2xs {
13
17
  font: var(--typography-text-3xs-font);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.28.0",
3
+ "version": "0.29.1",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"
package/__inner__/cjs/components/Portal/PortalContext.d.ts DELETED
@@ -1,15 +0,0 @@
1
- import { type RefObject } from 'react';
2
- export declare const PortalContext: import("react").Context<{
3
- top?: boolean | undefined;
4
- setTop?: ((top: boolean | undefined) => void) | undefined;
5
- refs?: RefObject<HTMLElement>[] | undefined;
6
- setRefs?: ((refs: RefObject<HTMLElement>[]) => void) | undefined;
7
- clearRefs?: (() => void) | undefined;
8
- }>;
9
- export declare function usePortalContext(): {
10
- top?: boolean | undefined;
11
- setTop?: ((top: boolean | undefined) => void) | undefined;
12
- refs?: RefObject<HTMLElement>[] | undefined;
13
- setRefs?: ((refs: RefObject<HTMLElement>[]) => void) | undefined;
14
- clearRefs?: (() => void) | undefined;
15
- };
package/__inner__/cjs/components/Portal/PortalContext.js DELETED
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.usePortalContext = exports.PortalContext = void 0;
4
- var react_1 = require("react");
5
- exports.PortalContext = (0, react_1.createContext)({});
6
- function usePortalContext() {
7
- return (0, react_1.useContext)(exports.PortalContext);
8
- }
9
- exports.usePortalContext = usePortalContext;
package/__inner__/esm/components/Portal/PortalContext.d.ts DELETED
@@ -1,15 +0,0 @@
1
- import { type RefObject } from 'react';
2
- export declare const PortalContext: import("react").Context<{
3
- top?: boolean | undefined;
4
- setTop?: ((top: boolean | undefined) => void) | undefined;
5
- refs?: RefObject<HTMLElement>[] | undefined;
6
- setRefs?: ((refs: RefObject<HTMLElement>[]) => void) | undefined;
7
- clearRefs?: (() => void) | undefined;
8
- }>;
9
- export declare function usePortalContext(): {
10
- top?: boolean | undefined;
11
- setTop?: ((top: boolean | undefined) => void) | undefined;
12
- refs?: RefObject<HTMLElement>[] | undefined;
13
- setRefs?: ((refs: RefObject<HTMLElement>[]) => void) | undefined;
14
- clearRefs?: (() => void) | undefined;
15
- };
package/__inner__/esm/components/Portal/PortalContext.js DELETED
@@ -1,5 +0,0 @@
1
- import { createContext, useContext } from 'react';
2
- export var PortalContext = createContext({});
3
- export function usePortalContext() {
4
- return useContext(PortalContext);
5
- }