@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.4

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 (22) hide show
  1. package/dist/components/Alert/Alert.js +1 -1
  2. package/dist/components/Alert/components/AlertIcon/utils.js +1 -1
  3. package/dist/components/Alert/intl.json.js +2 -6
  4. package/dist/components/Button/Button.js +1 -1
  5. package/dist/components/Checkbox/Checkbox.js +1 -1
  6. package/dist/components/Container/Container.js +1 -1
  7. package/dist/components/Dialog/DialogContext.js +1 -1
  8. package/dist/components/Dialog/components/DialogContent.js +1 -1
  9. package/dist/components/Dialog/intl.json.js +2 -6
  10. package/dist/components/List/components/ListOption/ListOption.js +1 -1
  11. package/dist/components/ProgressBar/ProgressBar.module.css.js +1 -2
  12. package/dist/components/ProgressSpinner/ProgressSpinner.module.css.js +1 -2
  13. package/dist/components/RadioGroup/components/Radio/Radio.js +1 -1
  14. package/dist/components/SkeletonBlock/SkeletonBlock.module.css.js +0 -1
  15. package/dist/components/SkeletonTypography/utils.js +3 -0
  16. package/dist/components/Toggle/Toggle.js +1 -1
  17. package/dist/components/Tooltip/Tooltip.d.ts +1 -0
  18. package/dist/components/Tooltip/Tooltip.js +5 -3
  19. package/dist/components/Tooltip/types.d.ts +8 -3
  20. package/dist/styles/utility.js +0 -1
  21. package/dist/styles/utility.module.css.js +0 -1
  22. package/package.json +6 -6
package/dist/components/Alert/Alert.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsxs, jsx } from "react/jsx-runtime";
3
- import { polymorphicForwardRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
3
+ import { polymorphicForwardRef, mergeProps, isNotNil, clsx } from "@koobiq/react-core";
4
4
  import { IconXmark16 } from "@koobiq/react-icons";
5
5
  import { useLocalizedStringFormatter } from "@koobiq/react-primitives";
6
6
  import s from "./Alert.module.css.js";
package/dist/components/Alert/components/AlertIcon/utils.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { IconInfoCircle16, IconCheck16, IconExclamationTriangle16, IconCheckCircle16 } from "@koobiq/react-icons";
2
+ import { IconExclamationTriangle16, IconCheckCircle16, IconInfoCircle16, IconCheck16 } from "@koobiq/react-icons";
3
3
  const iconProps = {
4
4
  focusable: false,
5
5
  "aria-hidden": true
package/dist/components/Alert/intl.json.js CHANGED
@@ -1,10 +1,6 @@
1
1
  const intlMessages = {
2
- "ru-RU": {
3
- close: "Закрыть"
4
- },
5
- "en-US": {
6
- close: "Close"
7
- }
2
+ "ru-RU": { "close": "Закрыть" },
3
+ "en-US": { "close": "Close" }
8
4
  };
9
5
  export {
10
6
  intlMessages as default
package/dist/components/Button/Button.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
3
3
  import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
4
4
  import { Button as Button$1 } from "@koobiq/react-primitives";
5
5
  import s from "./Button.module.css.js";
package/dist/components/Checkbox/Checkbox.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { forwardRef } from "react";
4
- import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
4
+ import { mergeProps, clsx, isNotNil } from "@koobiq/react-core";
5
5
  import { IconCheckS16, IconMinusS16 } from "@koobiq/react-icons";
6
6
  import { Checkbox as Checkbox$1 } from "@koobiq/react-primitives";
7
7
  import s from "./Checkbox.module.css.js";
package/dist/components/Container/Container.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
3
3
  import s from "./Container.module.css.js";
4
- import { normalizeMaxInlineSize, normalizePosition, normalizeMargins } from "./utils.js";
4
+ import { normalizeMargins, normalizeMaxInlineSize, normalizePosition } from "./utils.js";
5
5
  import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
6
6
  import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
7
7
  const Container = polymorphicForwardRef(
package/dist/components/Dialog/DialogContext.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { createContext, useContext } from "react";
2
+ import { useContext, createContext } from "react";
3
3
  const DialogContext = createContext(
4
4
  {}
5
5
  );
package/dist/components/Dialog/components/DialogContent.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { forwardRef } from "react";
4
- import { useMultiRef, clsx } from "@koobiq/react-core";
4
+ import { clsx, useMultiRef } from "@koobiq/react-core";
5
5
  import { utilClasses } from "../../../styles/utility.js";
6
6
  import s from "../Dialog.module.css.js";
7
7
  import { useDialogProvider } from "../DialogContext.js";
package/dist/components/Dialog/intl.json.js CHANGED
@@ -1,10 +1,6 @@
1
1
  const intlMessages = {
2
- "ru-RU": {
3
- close: "Закрыть"
4
- },
5
- "en-US": {
6
- close: "Close"
7
- }
2
+ "ru-RU": { "close": "Закрыть" },
3
+ "en-US": { "close": "Close" }
8
4
  };
9
5
  export {
10
6
  intlMessages as default
package/dist/components/List/components/ListOption/ListOption.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { useRef } from "react";
4
- import { useHover, usePress, mergeProps, clsx } from "@koobiq/react-core";
4
+ import { useHover, usePress, clsx, mergeProps } from "@koobiq/react-core";
5
5
  import { useOption } from "@koobiq/react-primitives";
6
6
  import { utilClasses } from "../../../../styles/utility.js";
7
7
  import s from "./ListOption.module.css.js";
package/dist/components/ProgressBar/ProgressBar.module.css.js CHANGED
@@ -4,8 +4,7 @@ const indeterminate = "kbq-progressbar-indeterminate-80b42e";
4
4
  const s = {
5
5
  base,
6
6
  fill,
7
- indeterminate,
8
- "progress-bar-animation": "kbq-progressbar-progress-bar-animation-6e2ae1"
7
+ indeterminate
9
8
  };
10
9
  export {
11
10
  base,
package/dist/components/ProgressSpinner/ProgressSpinner.module.css.js CHANGED
@@ -6,8 +6,7 @@ const s = {
6
6
  base,
7
7
  spin,
8
8
  circle,
9
- indeterminate,
10
- "progress-spin-animation": "kbq-progressspinner-progress-spin-animation-82d376"
9
+ indeterminate
11
10
  };
12
11
  export {
13
12
  base,
package/dist/components/RadioGroup/components/Radio/Radio.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { forwardRef } from "react";
3
- import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
3
+ import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
4
4
  import { Radio as Radio$1 } from "@koobiq/react-primitives";
5
5
  import s from "./Radio.module.css.js";
6
6
  import { useRadioGroupState } from "../../RadioContext.js";
package/dist/components/SkeletonBlock/SkeletonBlock.module.css.js CHANGED
@@ -2,7 +2,6 @@ const base = "kbq-skeletonblock-e98401";
2
2
  const hasChildren = "kbq-skeletonblock-hasChildren-88ab53";
3
3
  const s = {
4
4
  base,
5
- "skeleton-wave": "kbq-skeletonblock-skeleton-wave-3094a0",
6
5
  hasChildren
7
6
  };
8
7
  export {
package/dist/components/SkeletonTypography/utils.js CHANGED
@@ -4,10 +4,13 @@ const getRowWidth = (idx, rows = 0) => {
4
4
  return "50%";
5
5
  }
6
6
  switch (idx % 3) {
7
+ // The first, fourth etc.
7
8
  case 0:
8
9
  return "95%";
10
+ // The second, fifth etc.
9
11
  case 1:
10
12
  return "100%";
13
+ // The third, sixth etc.
11
14
  case 2:
12
15
  return "90%";
13
16
  }
package/dist/components/Toggle/Toggle.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsxs, jsx } from "react/jsx-runtime";
3
3
  import { forwardRef } from "react";
4
- import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
4
+ import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
5
5
  import { Toggle as Toggle$1 } from "@koobiq/react-primitives";
6
6
  import s from "./Toggle.module.css.js";
7
7
  const Toggle = forwardRef(
package/dist/components/Tooltip/Tooltip.d.ts CHANGED
@@ -17,4 +17,5 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
17
17
  trigger?: "focus";
18
18
  id?: string;
19
19
  className?: string;
20
+ portalContainer?: Element;
20
21
  } & import("@koobiq/react-core").DataAttributeProps & import("react").RefAttributes<HTMLDivElement>>;
package/dist/components/Tooltip/Tooltip.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
3
3
  import { forwardRef, useRef } from "react";
4
- import { useDOMRef, useBoolean, FocusableProvider, mergeProps, clsx } from "@koobiq/react-core";
4
+ import { useDOMRef, useMultiRef, useBoolean, FocusableProvider, clsx, mergeProps } from "@koobiq/react-core";
5
5
  import { useTooltipTriggerState, useTooltipTrigger, useOverlayPosition, useTooltip, Overlay } from "@koobiq/react-primitives";
6
6
  import { Transition } from "react-transition-group";
7
7
  import { utilClasses } from "../../styles/utility.js";
@@ -23,6 +23,7 @@ const Tooltip = forwardRef((props, ref) => {
23
23
  open: openProp,
24
24
  offset: offsetProp,
25
25
  arrowBoundaryOffset,
26
+ portalContainer,
26
27
  ...other
27
28
  } = props;
28
29
  const showArrow = !hideArrow;
@@ -38,6 +39,7 @@ const Tooltip = forwardRef((props, ref) => {
38
39
  });
39
40
  const domRef = useDOMRef(ref);
40
41
  const controlRef = useRef(null);
42
+ const controlRefCallback = useMultiRef([controlRef]);
41
43
  const { triggerProps, tooltipProps } = useTooltipTrigger(
42
44
  {
43
45
  delay,
@@ -67,7 +69,7 @@ const Tooltip = forwardRef((props, ref) => {
67
69
  const { tooltipProps: localTooltipProps } = useTooltip(overlayProps, state);
68
70
  return /* @__PURE__ */ jsxs(Fragment, { children: [
69
71
  /* @__PURE__ */ jsx(FocusableProvider, { ...triggerProps, ref: controlRef, children: control?.({
70
- ref: controlRef,
72
+ ref: controlRefCallback,
71
73
  ...triggerProps
72
74
  }) }),
73
75
  /* @__PURE__ */ jsx(
@@ -80,7 +82,7 @@ const Tooltip = forwardRef((props, ref) => {
80
82
  nodeRef: domRef,
81
83
  unmountOnExit: true,
82
84
  appear: true,
83
- children: (transition) => /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsxs(
85
+ children: (transition) => /* @__PURE__ */ jsx(Overlay, { portalContainer, children: /* @__PURE__ */ jsxs(
84
86
  "div",
85
87
  {
86
88
  ...mergeProps(localTooltipProps, tooltipProps),
package/dist/components/Tooltip/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import type { ReactNode, ComponentRef, Ref, ReactElement, HTMLAttributes, RefObject } from 'react';
1
+ import type { ReactNode, RefObject, ComponentRef, ReactElement, DOMAttributes } from 'react';
2
2
  import type { DataAttributeProps } from '@koobiq/react-core';
3
- export type TooltipPropControl = (props: HTMLAttributes<HTMLButtonElement> & {
4
- ref?: Ref<HTMLButtonElement>;
3
+ export type TooltipPropControl = (props: DOMAttributes<HTMLElement> & {
4
+ ref: ((node: HTMLElement | null) => void) | null;
5
5
  }) => ReactElement;
6
6
  export declare const tooltipPropPlacement: readonly ["bottom", "bottom start", "bottom end", "top", "top start", "top end", "start", "start top", "start bottom", "end", "end top", "end bottom"];
7
7
  export declare const tooltipPropVariant: readonly ["contrast", "contrast-fade", "error", "warning", "theme"];
@@ -77,5 +77,10 @@ export type TooltipProps = {
77
77
  id?: string;
78
78
  /** Additional CSS-classes. */
79
79
  className?: string;
80
+ /**
81
+ * The container element in which the component portal will be placed.
82
+ * @default document.body
83
+ */
84
+ portalContainer?: Element;
80
85
  } & DataAttributeProps;
81
86
  export type TooltipRef = ComponentRef<'div'>;
package/dist/styles/utility.js CHANGED
@@ -68,7 +68,6 @@ const typography = {
68
68
  inherit: s.inherit
69
69
  };
70
70
  const utilClasses = {
71
- hideVisually: s["hide-visually"],
72
71
  color,
73
72
  typography
74
73
  };
package/dist/styles/utility.module.css.js CHANGED
@@ -3,7 +3,6 @@ const title = "kbq-utility-title-49d974";
3
3
  const subheading = "kbq-utility-subheading-ec6b60";
4
4
  const inherit = "kbq-utility-inherit-6b72bf";
5
5
  const s = {
6
- "hide-visually": "kbq-utility-hide-visually-75f743",
7
6
  "foreground-white": "kbq-utility-foreground-white-f552a0",
8
7
  "foreground-white-secondary": "kbq-utility-foreground-white-secondary-893462",
9
8
  "foreground-theme": "kbq-utility-foreground-theme-cb49d7",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@koobiq/react-components",
3
- "version": "0.0.1-beta.2",
3
+ "version": "0.0.1-beta.4",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {
@@ -19,13 +19,13 @@
19
19
  },
20
20
  "sideEffects": false,
21
21
  "dependencies": {
22
- "@koobiq/design-tokens": "^3.11.2",
22
+ "@koobiq/design-tokens": "^3.12.1",
23
23
  "@types/react-transition-group": "^4.4.12",
24
24
  "react-transition-group": "^4.4.5",
25
- "@koobiq/logger": "0.0.1-beta.2",
26
- "@koobiq/react-icons": "0.0.1-beta.2",
27
- "@koobiq/react-primitives": "0.0.1-beta.2",
28
- "@koobiq/react-core": "0.0.1-beta.2"
25
+ "@koobiq/react-primitives": "0.0.1-beta.4",
26
+ "@koobiq/react-core": "0.0.1-beta.4",
27
+ "@koobiq/react-icons": "0.0.1-beta.4",
28
+ "@koobiq/logger": "0.0.1-beta.4"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "@koobiq/design-tokens": "^3.11.2",