@uxf/core-react 11.72.3 → 11.74.0

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 (84) hide show
  1. package/README.md +70 -0
  2. package/package.json +1 -1
  3. package/clickable/_use-simulated-button.d.ts +0 -17
  4. package/clickable/_use-simulated-button.js +0 -61
  5. package/clickable/add-busy-and-disabled-classnames.d.ts +0 -9
  6. package/clickable/add-busy-and-disabled-classnames.js +0 -17
  7. package/clickable/types.d.ts +0 -3
  8. package/clickable/types.js +0 -2
  9. package/clickable/use-anchor-props.d.ts +0 -9
  10. package/clickable/use-anchor-props.js +0 -67
  11. package/clickable/use-button-props.d.ts +0 -7
  12. package/clickable/use-button-props.js +0 -60
  13. package/clickable/use-clickable-props.d.ts +0 -9
  14. package/clickable/use-clickable-props.js +0 -45
  15. package/components/hide.d.ts +0 -7
  16. package/components/hide.js +0 -13
  17. package/components/show.d.ts +0 -7
  18. package/components/show.js +0 -13
  19. package/components/viewport-height-polyfill.d.ts +0 -2
  20. package/components/viewport-height-polyfill.js +0 -49
  21. package/hooks/use-body-scroll-lock.d.ts +0 -6
  22. package/hooks/use-body-scroll-lock.js +0 -34
  23. package/hooks/use-debounce.d.ts +0 -1
  24. package/hooks/use-debounce.js +0 -15
  25. package/hooks/use-focus-return.d.ts +0 -1
  26. package/hooks/use-focus-return.js +0 -34
  27. package/hooks/use-focus-trap.d.ts +0 -2
  28. package/hooks/use-focus-trap.js +0 -145
  29. package/hooks/use-increment.d.ts +0 -2
  30. package/hooks/use-increment.js +0 -11
  31. package/hooks/use-increment.test.d.ts +0 -1
  32. package/hooks/use-increment.test.js +0 -61
  33. package/hooks/use-input-focus.d.ts +0 -7
  34. package/hooks/use-input-focus.js +0 -26
  35. package/hooks/use-is-mounted.d.ts +0 -1
  36. package/hooks/use-is-mounted.js +0 -9
  37. package/hooks/use-isomorphic-layout-effect.d.ts +0 -2
  38. package/hooks/use-isomorphic-layout-effect.js +0 -6
  39. package/hooks/use-key.d.ts +0 -10
  40. package/hooks/use-key.js +0 -27
  41. package/hooks/use-latest.d.ts +0 -1
  42. package/hooks/use-latest.js +0 -9
  43. package/hooks/use-media-query.d.ts +0 -1
  44. package/hooks/use-media-query.js +0 -18
  45. package/hooks/use-min-window-width.d.ts +0 -1
  46. package/hooks/use-min-window-width.js +0 -28
  47. package/hooks/use-mouse-drag-to-scroll.d.ts +0 -2
  48. package/hooks/use-mouse-drag-to-scroll.js +0 -38
  49. package/hooks/use-on-mount.d.ts +0 -2
  50. package/hooks/use-on-mount.js +0 -9
  51. package/hooks/use-on-unmount.d.ts +0 -2
  52. package/hooks/use-on-unmount.js +0 -14
  53. package/hooks/use-on-update.d.ts +0 -2
  54. package/hooks/use-on-update.js +0 -14
  55. package/hooks/use-pagination.d.ts +0 -2
  56. package/hooks/use-pagination.js +0 -20
  57. package/hooks/use-pagination.test.d.ts +0 -1
  58. package/hooks/use-pagination.test.js +0 -58
  59. package/hooks/use-previous.d.ts +0 -1
  60. package/hooks/use-previous.js +0 -11
  61. package/hooks/use-raf-state.d.ts +0 -2
  62. package/hooks/use-raf-state.js +0 -17
  63. package/hooks/use-toggle.d.ts +0 -2
  64. package/hooks/use-toggle.js +0 -11
  65. package/hooks/use-toggle.test.d.ts +0 -1
  66. package/hooks/use-toggle.test.js +0 -46
  67. package/hooks/use-window-scroll.d.ts +0 -4
  68. package/hooks/use-window-scroll.js +0 -21
  69. package/hooks/use-window-scroll.test.d.ts +0 -1
  70. package/hooks/use-window-scroll.test.js +0 -47
  71. package/hooks/use-window-size.d.ts +0 -4
  72. package/hooks/use-window-size.js +0 -18
  73. package/hooks/use-window-size.test.d.ts +0 -1
  74. package/hooks/use-window-size.test.js +0 -36
  75. package/string/nl2br.d.ts +0 -2
  76. package/string/nl2br.js +0 -37
  77. package/swipeable/types.d.ts +0 -152
  78. package/swipeable/types.js +0 -7
  79. package/swipeable/use-swipeable.d.ts +0 -3
  80. package/swipeable/use-swipeable.js +0 -314
  81. package/utils/compose-refs.d.ts +0 -2
  82. package/utils/compose-refs.js +0 -15
  83. package/utils/compose-refs.test.d.ts +0 -1
  84. package/utils/compose-refs.test.js +0 -41
package/README.md CHANGED
@@ -394,3 +394,73 @@ import { twScreens } from "@generated/tw-tokens/tw-screens";
394
394
 
395
395
  const isDesktop = useMediaQuery(`(min-width: ${twScreens.sm})`);
396
396
  ```
397
+
398
+ ## Translations
399
+
400
+ Provides a translation system that can be used in both single-language and multi-language projects.
401
+
402
+ ### Single-language projects
403
+
404
+ For single-language projects, use the `TranslationsProvider` context and `createDefaultT` function to provide translations for the packages you use:
405
+
406
+ ```tsx
407
+ import { TranslationsProvider } from "@uxf/core-react/translations";
408
+ import { createDefaultT } from "@uxf/core-react/translations/create-default-t";
409
+
410
+ // Import translations for packages you use
411
+ import uiTranslations from "@uxf/ui/translations/cs.json";
412
+ import formTranslations from "@uxf/form/translations/cs.json";
413
+
414
+ // Create a translation function for your language
415
+ const t = createDefaultT({
416
+ ...uiTranslations,
417
+ ...formTranslations
418
+ });
419
+
420
+ // Provide the translation function to your app
421
+ function App() {
422
+ return (
423
+ <TranslationsProvider value={t}>
424
+ {/* Your app content */}
425
+ </TranslationsProvider>
426
+ );
427
+ }
428
+ ```
429
+
430
+ ### Multi-language projects
431
+
432
+ For multi-language projects, use the `TranslationsProvider` context with a translation function from your preferred translation library (e.g., next-translate):
433
+
434
+ ```tsx
435
+ import { TranslationsProvider } from "@uxf/core-react/translations";
436
+ import useTranslation from "next-translate/useTranslation"; // Or any other translation library
437
+
438
+ function App() {
439
+ // Get the translation function from your translation library
440
+ const { t } = useTranslation();
441
+
442
+ return (
443
+ <TranslationsProvider value={t}>
444
+ {/* Your app content */}
445
+ </TranslationsProvider>
446
+ );
447
+ }
448
+ ```
449
+
450
+ ### Using translations in components
451
+
452
+ To use translations in your components, use the `useUxfTranslation` hook:
453
+
454
+ ```tsx
455
+ import { useUxfTranslation } from "@uxf/core-react/translations";
456
+
457
+ function MyComponent() {
458
+ const t = useUxfTranslation();
459
+
460
+ return (
461
+ <div>
462
+ {t("form:validation.required")}
463
+ </div>
464
+ );
465
+ }
466
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/core-react",
3
- "version": "11.72.3",
3
+ "version": "11.74.0",
4
4
  "description": "UXF Core",
5
5
  "author": "UX Fans s.r.o",
6
6
  "license": "MIT",
@@ -1,17 +0,0 @@
1
- import { KeyboardEventHandler, MouseEventHandler } from "react";
2
- interface Props<T extends HTMLElement> {
3
- analyticsCallback?: () => void;
4
- isClickable: boolean;
5
- isHyperlink: boolean;
6
- onClick?: MouseEventHandler<T>;
7
- onKeyDown?: KeyboardEventHandler<T>;
8
- onKeyUp?: KeyboardEventHandler<T>;
9
- isSubmitType?: boolean;
10
- }
11
- export declare function _useSimulatedButton<T extends HTMLAnchorElement>({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, isSubmitType, }: Props<T>): {
12
- onClick: MouseEventHandler<T>;
13
- onKeyDown: KeyboardEventHandler<T>;
14
- onKeyUp: KeyboardEventHandler<T>;
15
- isBusy: boolean | undefined;
16
- };
17
- export {};
@@ -1,61 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports._useSimulatedButton = _useSimulatedButton;
4
- const react_1 = require("react");
5
- function _useSimulatedButton({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, isSubmitType, }) {
6
- // eslint-disable-next-line react-hooks/rules-of-hooks
7
- const [isBusy, setIsBusy] = (0, react_1.useState)(false);
8
- // eslint-disable-next-line react-hooks/rules-of-hooks
9
- const _onClick = (0, react_1.useCallback)((e) => {
10
- var _a;
11
- if ((isClickable || isHyperlink) && analyticsCallback) {
12
- analyticsCallback();
13
- }
14
- if (isClickable) {
15
- if (isSubmitType) {
16
- const closestForm = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest("form");
17
- if (closestForm) {
18
- closestForm.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
19
- }
20
- }
21
- // TODO @vejvis - jaktože tady je onclick který vrací void a ne Promise<void> ?
22
- const clickResult = onClick === null || onClick === void 0 ? void 0 : onClick(e);
23
- if (clickResult instanceof Promise) {
24
- setIsBusy(true);
25
- clickResult.finally(() => setIsBusy(false));
26
- }
27
- }
28
- else {
29
- e.preventDefault();
30
- }
31
- }, [analyticsCallback, isClickable, isHyperlink, onClick, isSubmitType]);
32
- // eslint-disable-next-line react-hooks/rules-of-hooks
33
- const _onKeyUp = (0, react_1.useCallback)((e) => {
34
- if (isClickable && (e.key === "Enter" || e.key === " ")) {
35
- e.target.dispatchEvent(new MouseEvent("click", {
36
- bubbles: true,
37
- buttons: 1,
38
- cancelable: true,
39
- view: window,
40
- }));
41
- if (onKeyUp) {
42
- onKeyUp(e);
43
- }
44
- }
45
- }, [isClickable, onKeyUp]);
46
- // eslint-disable-next-line react-hooks/rules-of-hooks
47
- const _onKeyDown = (0, react_1.useCallback)((e) => {
48
- if (isClickable && e.key === " ") {
49
- e.preventDefault();
50
- if (onKeyDown) {
51
- onKeyDown(e);
52
- }
53
- }
54
- }, [isClickable, onKeyDown]);
55
- return {
56
- onClick: _onClick,
57
- onKeyDown: _onKeyDown,
58
- onKeyUp: _onKeyUp,
59
- isBusy: isBusy ? true : undefined,
60
- };
61
- }
@@ -1,9 +0,0 @@
1
- import { Nullish } from "@uxf/core/types";
2
- import { CxClassValue } from "@uxf/core/utils/cx";
3
- import { Options } from "./types";
4
- interface State {
5
- isBusy: boolean | Nullish;
6
- isDisabled: boolean | Nullish;
7
- }
8
- export declare function addBusyAndDisabledClassnames(className: string | Nullish, state: State, options: Options): CxClassValue[];
9
- export {};
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.addBusyAndDisabledClassnames = addBusyAndDisabledClassnames;
4
- const classes_1 = require("@uxf/core/constants/classes");
5
- function addBusyAndDisabledClassnames(className, state, options) {
6
- return [
7
- state.isBusy &&
8
- (options.classNamePrefix
9
- ? `${options.classNamePrefix}--${classes_1.CLASSES.IS_LOADING} ${classes_1.CLASSES.IS_LOADING}`
10
- : classes_1.CLASSES.IS_LOADING),
11
- state.isDisabled &&
12
- (options.classNamePrefix
13
- ? `${options.classNamePrefix}--${classes_1.CLASSES.IS_DISABLED} ${classes_1.CLASSES.IS_DISABLED}`
14
- : classes_1.CLASSES.IS_DISABLED),
15
- className,
16
- ];
17
- }
@@ -1,3 +0,0 @@
1
- export type Options = {
2
- classNamePrefix?: string;
3
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,9 +0,0 @@
1
- import { AnchorHTMLAttributes } from "react";
2
- import { Options } from "./types";
3
- export interface UseAnchorProps {
4
- analyticsCallback?: () => void;
5
- isDisabled?: boolean;
6
- isLoading?: boolean;
7
- type?: "submit";
8
- }
9
- export declare function useAnchorProps<T extends AnchorHTMLAttributes<HTMLAnchorElement>>(props: UseAnchorProps & T, options?: Options): T;
@@ -1,67 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useAnchorProps = useAnchorProps;
4
- const classes_1 = require("@uxf/core/constants/classes");
5
- const cx_1 = require("@uxf/core/utils/cx");
6
- const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
7
- const _use_simulated_button_1 = require("./_use-simulated-button");
8
- const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
9
- function useAnchorProps(props, options = {}) {
10
- const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, download, href, hrefLang, isLoading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role, tabIndex, target, type, ...restProps } = props;
11
- const isBusy = Boolean(isLoading || ariaBusy);
12
- const isDisabledOrAriaDisabled = Boolean(isDisabled || ariaDisabled);
13
- const isBusyOrDisabled = isBusy || isDisabledOrAriaDisabled;
14
- const isSubmitType = type === "submit";
15
- const isButton = isSubmitType || (0, is_not_nil_1.isNotNil)(onClick);
16
- const tabIndexInteractive = isBusyOrDisabled ? -1 : tabIndex;
17
- const simulatedButton = (0, _use_simulated_button_1._useSimulatedButton)({
18
- analyticsCallback,
19
- isClickable: !isBusyOrDisabled || isButton,
20
- isHyperlink: !isBusyOrDisabled || Boolean(href),
21
- onClick,
22
- onKeyDown,
23
- onKeyUp,
24
- isSubmitType,
25
- });
26
- const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy: isBusy || simulatedButton.isBusy, isDisabled: isDisabledOrAriaDisabled }, options);
27
- if (href) {
28
- return {
29
- "aria-busy": isBusy,
30
- "aria-disabled": isDisabledOrAriaDisabled,
31
- className: (0, cx_1.cx)(classes_1.CLASSES.IS_HOVERABLE, ..._className),
32
- download,
33
- href,
34
- hrefLang,
35
- media,
36
- onClick: simulatedButton.onClick,
37
- onKeyDown: simulatedButton.onKeyDown,
38
- onKeyUp: simulatedButton.onKeyUp,
39
- ping,
40
- referrerPolicy,
41
- rel: target === "_blank" ? (rel ? `noopener noreferrer ${rel}` : "noopener noreferrer") : rel,
42
- role: role || (isButton ? "button" : undefined),
43
- tabIndex: tabIndexInteractive,
44
- target,
45
- ...restProps,
46
- };
47
- }
48
- if (isButton) {
49
- return {
50
- "aria-busy": isBusy,
51
- "aria-disabled": isDisabledOrAriaDisabled,
52
- className: (0, cx_1.cx)(classes_1.CLASSES.IS_HOVERABLE, ..._className),
53
- onClick: simulatedButton.onClick,
54
- onKeyDown: simulatedButton.onKeyDown,
55
- onKeyUp: simulatedButton.onKeyUp,
56
- role: role || "button",
57
- tabIndex: tabIndexInteractive !== null && tabIndexInteractive !== void 0 ? tabIndexInteractive : 0,
58
- ...restProps,
59
- };
60
- }
61
- return {
62
- className: (0, cx_1.cx)(..._className),
63
- role: role || "none",
64
- tabIndex,
65
- ...restProps,
66
- };
67
- }
@@ -1,7 +0,0 @@
1
- import { ButtonHTMLAttributes } from "react";
2
- import { Options } from "./types";
3
- export interface UseButtonProps {
4
- analyticsCallback?: () => void;
5
- loading?: boolean;
6
- }
7
- export declare function useButtonProps<T extends ButtonHTMLAttributes<HTMLButtonElement>>(props: UseButtonProps & T, options?: Options): T;
@@ -1,60 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useButtonProps = useButtonProps;
4
- const classes_1 = require("@uxf/core/constants/classes");
5
- const cx_1 = require("@uxf/core/utils/cx");
6
- const react_1 = require("react");
7
- const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
8
- function useButtonProps(props, options = {}) {
9
- const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, autoFocus, analyticsCallback, className, disabled, formAction, formEncType, formMethod, formNoValidate, formTarget, loading, name, onClick, role, tabIndex, type, value, ...restProps } = props;
10
- const isBusy = loading ? loading : Boolean(ariaBusy);
11
- const isDisabled = disabled ? disabled : Boolean(ariaDisabled);
12
- const isBusyOrDisabled = isBusy || isDisabled;
13
- const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy, isDisabled }, options);
14
- const _onClick = (0, react_1.useCallback)((e) => {
15
- if (isBusyOrDisabled) {
16
- e.preventDefault();
17
- }
18
- else {
19
- if (analyticsCallback) {
20
- analyticsCallback();
21
- }
22
- if (onClick) {
23
- onClick(e);
24
- }
25
- }
26
- }, [analyticsCallback, isBusyOrDisabled, onClick]);
27
- if (onClick || type === "reset" || type === "submit") {
28
- let submitProps = {};
29
- if (type === "submit") {
30
- submitProps = {
31
- formAction,
32
- formEncType,
33
- formMethod,
34
- formNoValidate,
35
- formTarget,
36
- name,
37
- value,
38
- };
39
- }
40
- return {
41
- "aria-busy": isBusy,
42
- "aria-disabled": ariaDisabled,
43
- autoFocus,
44
- className: (0, cx_1.cx)(classes_1.CLASSES.IS_HOVERABLE, ..._className),
45
- disabled,
46
- onClick: _onClick,
47
- role,
48
- tabIndex: isBusyOrDisabled ? -1 : tabIndex,
49
- type,
50
- ...submitProps,
51
- ...restProps,
52
- };
53
- }
54
- return {
55
- className: (0, cx_1.cx)(..._className),
56
- role,
57
- tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : -1,
58
- ...restProps,
59
- };
60
- }
@@ -1,9 +0,0 @@
1
- import { HTMLAttributes } from "react";
2
- import { Options } from "./types";
3
- export interface UseClickableProps {
4
- analyticsCallback?: () => void;
5
- isDisabled?: boolean;
6
- isLoading?: boolean;
7
- type?: "submit";
8
- }
9
- export declare function useClickableProps<T extends HTMLAttributes<HTMLElement>>(props: UseClickableProps & T, options?: Options): T;
@@ -1,45 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useClickableProps = useClickableProps;
4
- const classes_1 = require("@uxf/core/constants/classes");
5
- const cx_1 = require("@uxf/core/utils/cx");
6
- const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
7
- const _use_simulated_button_1 = require("./_use-simulated-button");
8
- const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
9
- function useClickableProps(props, options = {}) {
10
- const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, isLoading, onClick, onKeyDown, onKeyUp, role, tabIndex, type, ...restProps } = props;
11
- const isBusy = Boolean(isLoading || ariaBusy);
12
- const isDisabledOrAriaDisabled = Boolean(isDisabled || ariaDisabled);
13
- const isBusyOrDisabled = isBusy || isDisabledOrAriaDisabled;
14
- const isSubmitType = type === "submit";
15
- const isButton = isSubmitType || (0, is_not_nil_1.isNotNil)(onClick);
16
- const simulatedButton = (0, _use_simulated_button_1._useSimulatedButton)({
17
- analyticsCallback,
18
- isClickable: !isBusyOrDisabled || isButton,
19
- isHyperlink: false,
20
- onClick,
21
- onKeyDown,
22
- onKeyUp,
23
- isSubmitType,
24
- });
25
- const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy: isBusy || simulatedButton.isBusy, isDisabled: isDisabledOrAriaDisabled }, options);
26
- if (isButton) {
27
- return {
28
- "aria-busy": isBusy,
29
- "aria-disabled": isDisabledOrAriaDisabled,
30
- className: (0, cx_1.cx)(classes_1.CLASSES.IS_HOVERABLE, ..._className),
31
- onClick: simulatedButton.onClick,
32
- onKeyDown: simulatedButton.onKeyDown,
33
- onKeyUp: simulatedButton.onKeyUp,
34
- role: role || "button",
35
- tabIndex: isBusyOrDisabled ? -1 : (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0),
36
- ...restProps,
37
- };
38
- }
39
- return {
40
- className: (0, cx_1.cx)(..._className),
41
- role,
42
- tabIndex,
43
- ...restProps,
44
- };
45
- }
@@ -1,7 +0,0 @@
1
- import React, { ReactNode } from "react";
2
- interface HideProps {
3
- when: boolean;
4
- children?: ReactNode;
5
- }
6
- export declare function Hide(props: HideProps): React.JSX.Element | null;
7
- export {};
@@ -1,13 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Hide = Hide;
7
- const react_1 = __importDefault(require("react"));
8
- function Hide(props) {
9
- if (props.when) {
10
- return null;
11
- }
12
- return react_1.default.createElement(react_1.default.Fragment, null, props.children);
13
- }
@@ -1,7 +0,0 @@
1
- import React, { ReactNode } from "react";
2
- interface ShowProps {
3
- when: boolean;
4
- children?: ReactNode;
5
- }
6
- export declare function Show(props: ShowProps): React.JSX.Element | null;
7
- export {};
@@ -1,13 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Show = Show;
7
- const react_1 = __importDefault(require("react"));
8
- function Show(props) {
9
- if (!props.when) {
10
- return null;
11
- }
12
- return react_1.default.createElement(react_1.default.Fragment, null, props.children);
13
- }
@@ -1,2 +0,0 @@
1
- import { ReactNode } from "react";
2
- export declare function ViewportHeightPolyfill(): ReactNode;
@@ -1,49 +0,0 @@
1
- "use strict";
2
- "use client";
3
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
- if (k2 === undefined) k2 = k;
5
- var desc = Object.getOwnPropertyDescriptor(m, k);
6
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
- desc = { enumerable: true, get: function() { return m[k]; } };
8
- }
9
- Object.defineProperty(o, k2, desc);
10
- }) : (function(o, m, k, k2) {
11
- if (k2 === undefined) k2 = k;
12
- o[k2] = m[k];
13
- }));
14
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
- Object.defineProperty(o, "default", { enumerable: true, value: v });
16
- }) : function(o, v) {
17
- o["default"] = v;
18
- });
19
- var __importStar = (this && this.__importStar) || function (mod) {
20
- if (mod && mod.__esModule) return mod;
21
- var result = {};
22
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
23
- __setModuleDefault(result, mod);
24
- return result;
25
- };
26
- Object.defineProperty(exports, "__esModule", { value: true });
27
- exports.ViewportHeightPolyfill = ViewportHeightPolyfill;
28
- const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
29
- const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
30
- const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
31
- const with_unit_1 = require("@uxf/styles/units/with-unit");
32
- const react_1 = __importStar(require("react"));
33
- function ViewportHeightPolyfill() {
34
- const isMounted = (0, use_is_mounted_1.useIsMounted)();
35
- const [viewportHeight, setViewportHeight] = (0, react_1.useState)();
36
- (0, use_on_mount_1.useOnMount)(() => {
37
- if (!CSS.supports("height: 100dvh")) {
38
- return;
39
- }
40
- const updateViewportHeight = () => setViewportHeight(window.innerHeight);
41
- updateViewportHeight();
42
- window.addEventListener("resize", updateViewportHeight);
43
- return () => window.removeEventListener("resize", updateViewportHeight);
44
- });
45
- if (isMounted && (0, is_not_nil_1.isNotNil)(viewportHeight)) {
46
- return react_1.default.createElement("style", null, `:root { --viewport-height: ${(0, with_unit_1.withUnit)(viewportHeight, "px")}; }`);
47
- }
48
- return null;
49
- }
@@ -1,6 +0,0 @@
1
- import { BodyScrollOptions } from "@uxf/core/utils/body-scroll-lock";
2
- import { RefObject } from "react";
3
- export interface UseBodyScrollLockOptions extends BodyScrollOptions {
4
- clearAllOnClose?: boolean;
5
- }
6
- export declare function useBodyScrollLock<T extends HTMLElement>(containerRef: RefObject<T | null>, isOpen: boolean, { allowTouchMove, clearAllOnClose, reserveScrollBarGap }?: Partial<UseBodyScrollLockOptions>): void;
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useBodyScrollLock = useBodyScrollLock;
4
- const body_scroll_lock_1 = require("@uxf/core/utils/body-scroll-lock");
5
- const react_1 = require("react");
6
- function useBodyScrollLock(containerRef, isOpen, { allowTouchMove, clearAllOnClose, reserveScrollBarGap } = {}) {
7
- (0, react_1.useEffect)(() => {
8
- const node = containerRef.current;
9
- if (isOpen && node) {
10
- (0, body_scroll_lock_1.disableBodyScroll)(node, {
11
- allowTouchMove: allowTouchMove ||
12
- ((element) => {
13
- var _a;
14
- while (element !== document.body) {
15
- if (element.getAttribute("data-body-scroll-lock-ignore") !== null) {
16
- return true;
17
- }
18
- element = (_a = element.parentElement) !== null && _a !== void 0 ? _a : element;
19
- }
20
- return false;
21
- }),
22
- reserveScrollBarGap,
23
- });
24
- }
25
- return () => {
26
- if (node) {
27
- (0, body_scroll_lock_1.enableBodyScroll)(node);
28
- }
29
- if (clearAllOnClose) {
30
- (0, body_scroll_lock_1.clearAllBodyScrollLocks)();
31
- }
32
- };
33
- }, [allowTouchMove, clearAllOnClose, containerRef, isOpen, reserveScrollBarGap]);
34
- }
@@ -1 +0,0 @@
1
- export declare function useDebounce<T>(value: T, delay?: number): T;
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useDebounce = useDebounce;
4
- const react_1 = require("react");
5
- const use_on_update_1 = require("./use-on-update");
6
- function useDebounce(value, delay) {
7
- const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(value);
8
- (0, use_on_update_1.useOnUpdate)(() => {
9
- const timer = setTimeout(() => setDebouncedValue(value), delay !== null && delay !== void 0 ? delay : 500);
10
- return () => {
11
- clearTimeout(timer);
12
- };
13
- }, [value, delay]);
14
- return debouncedValue;
15
- }
@@ -1 +0,0 @@
1
- export declare function useFocusReturn(opened: boolean, transitionDuration?: number, shouldReturnFocus?: boolean): () => void;
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useFocusReturn = useFocusReturn;
4
- const react_1 = require("react");
5
- const use_on_update_1 = require("./use-on-update");
6
- function useFocusReturn(opened, transitionDuration = 0, shouldReturnFocus = true) {
7
- const lastActiveElement = (0, react_1.useRef)();
8
- const returnFocus = () => {
9
- const node = lastActiveElement.current;
10
- if (node && "focus" in node && typeof node.focus === "function") {
11
- node.focus();
12
- }
13
- };
14
- (0, use_on_update_1.useOnUpdate)(() => {
15
- let timeout = -1;
16
- const clearFocusTimeout = (e) => {
17
- if (e.key === "Tab") {
18
- clearTimeout(timeout);
19
- }
20
- };
21
- document.addEventListener("keydown", clearFocusTimeout);
22
- if (opened) {
23
- lastActiveElement.current = document.activeElement;
24
- }
25
- else if (shouldReturnFocus) {
26
- timeout = window.setTimeout(returnFocus, transitionDuration + 10);
27
- }
28
- return () => {
29
- clearTimeout(timeout);
30
- document.removeEventListener("keydown", clearFocusTimeout);
31
- };
32
- }, [opened, shouldReturnFocus, transitionDuration]);
33
- return returnFocus;
34
- }
@@ -1,2 +0,0 @@
1
- import { RefCallback } from "react";
2
- export declare function useFocusTrap<T extends HTMLElement>(active?: boolean): RefCallback<T>;