@geneui/components 3.0.0-next-253ae89-07032025 → 3.0.0-next-41d59b3-12032025
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.
- package/Checkbox.js +2 -2
- package/GeneUIProvider.js +4 -1340
- package/Info.js +2 -1
- package/KeyValue.js +2 -1
- package/Label.js +2 -2
- package/Pill.js +2 -2
- package/Popover.js +3 -2
- package/ProgressBar.js +2 -2
- package/QRCode.js +1165 -0
- package/Tag.js +2 -2
- package/Text.js +2 -2
- package/Tooltip.js +2 -1
- package/components/molecules/QRCode/QRCode.d.ts +38 -0
- package/components/molecules/QRCode/index.d.ts +1 -0
- package/components/providers/GeneUIProvider/GeneUIProvider.d.ts +2 -1
- package/hooks/index.d.ts +1 -0
- package/hooks/useBreakpoint/index.d.ts +1 -0
- package/hooks/useBreakpoint/useBreakpoint.d.ts +3 -0
- package/hooks/useDeviceInfo/useDeviceInfo.d.ts +3 -2
- package/hooks/useWindowSize/useWindowSize.d.ts +3 -2
- package/index-2eadf6a2.js +1383 -0
- package/{index-24d8893c.js → index-4acd505b.js} +1 -1
- package/index.d.ts +1 -0
- package/index.js +13 -21
- package/package.json +2 -1
- package/types/index.d.ts +4 -1
- package/useEllipsisDetection-f7d4feff.js +28 -0
- package/useEllipsisDetection-e545ae62.js +0 -23
|
@@ -3,7 +3,7 @@ import { u as useFloating, p as platform, o as offset, f as flip, a as arrow, s
|
|
|
3
3
|
import { S as SvgClose } from './Close-e8302008.js';
|
|
4
4
|
import { S as SvgInfoOutline } from './InfoOutline-dd2e89d9.js';
|
|
5
5
|
import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
6
|
-
import { GeneUIDesignSystemContext } from './
|
|
6
|
+
import { a as GeneUIDesignSystemContext } from './index-2eadf6a2.js';
|
|
7
7
|
import Button from './Button.js';
|
|
8
8
|
|
|
9
9
|
var css_248z = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2))}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge{width:72rem}.popover_size_xLarge .popover__body{height:15.4rem}.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_large{width:48rem}.popover_size_medium{width:36rem}.popover_size_large .popover__body,.popover_size_medium .popover__body{height:17.2rem}.popover_size_large .popover__footer,.popover_size_medium .popover__footer{height:5.6rem}.popover_size_small{width:24rem}.popover_size_small .popover__body{height:8.8rem}.popover_size_small .popover__footer{height:5.6rem}.popover_size_mobile{min-width:32rem;width:100%}.popover_size_mobile .popover__body{height:17.2rem}.popover_size_mobile .popover__footer{height:6.4rem}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);height:4.8rem;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1;overflow:hidden}.popover__title_icon{flex:0 0 auto}.popover__title_text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.popover__close{flex:0 0 auto}.popover__body{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;overflow-y:auto;width:100%}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);justify-content:space-between;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footer_buttons{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footer_buttons{margin-inline-start:auto}";
|
package/index.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export { default as Tooltip } from "./components/molecules/Tooltip";
|
|
|
15
15
|
export { default as ProgressBar } from "./components/molecules/ProgressBar";
|
|
16
16
|
export { Steps, Step, IStepProps, IStepsProps } from "./components/molecules/Steps";
|
|
17
17
|
export { default as Tag, ITagProps } from "./components/molecules/Tag";
|
|
18
|
+
export { default as QRCode } from "./components/molecules/QRCode";
|
|
18
19
|
export { KeyValue, Key, Value, IKeyValueProps, IKeyProps, IValueProps } from "./components/molecules/KeyValue";
|
|
19
20
|
export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
|
|
20
21
|
export { default as useDebounce } from "./hooks/useDebounceCallback";
|
package/index.js
CHANGED
|
@@ -7,7 +7,7 @@ export { default as Divider } from './Divider.js';
|
|
|
7
7
|
export { default as Info } from './Info.js';
|
|
8
8
|
export { default as Button } from './Button.js';
|
|
9
9
|
export { default as Text } from './Text.js';
|
|
10
|
-
export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-
|
|
10
|
+
export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-4acd505b.js';
|
|
11
11
|
export { default as Badge } from './Badge.js';
|
|
12
12
|
export { default as Scrollbar } from './Scrollbar.js';
|
|
13
13
|
export { Col, Grid, Row } from './Grid.js';
|
|
@@ -15,11 +15,12 @@ export { default as Tooltip } from './Tooltip.js';
|
|
|
15
15
|
export { default as ProgressBar } from './ProgressBar.js';
|
|
16
16
|
export { Step, Steps } from './Steps.js';
|
|
17
17
|
export { default as Tag } from './Tag.js';
|
|
18
|
+
export { default as QRCode } from './QRCode.js';
|
|
18
19
|
export { Key, KeyValue, Value } from './KeyValue.js';
|
|
19
|
-
export { GeneUIDesignSystemContext,
|
|
20
|
+
export { a as GeneUIDesignSystemContext, G as GeneUIProvider, u as useWindowSize } from './index-2eadf6a2.js';
|
|
20
21
|
export { u as useDebounce } from './useDebounceCallback-999deae7.js';
|
|
21
|
-
export { u as useEllipsisDetection } from './useEllipsisDetection-
|
|
22
|
-
import {
|
|
22
|
+
export { u as useEllipsisDetection } from './useEllipsisDetection-f7d4feff.js';
|
|
23
|
+
import { useMemo } from 'react';
|
|
23
24
|
import './index-ce02421b.js';
|
|
24
25
|
import './ArrowLeft-b88e2ba8.js';
|
|
25
26
|
import './style-inject.es-746bb8ed.js';
|
|
@@ -31,22 +32,6 @@ import 'react-dom';
|
|
|
31
32
|
import './Close-e8302008.js';
|
|
32
33
|
import 'prop-types';
|
|
33
34
|
|
|
34
|
-
const useWindowSize = () => {
|
|
35
|
-
const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
|
|
36
|
-
const handleSize = () => {
|
|
37
|
-
setWindowSize({
|
|
38
|
-
width: window.innerWidth,
|
|
39
|
-
height: window.innerHeight
|
|
40
|
-
});
|
|
41
|
-
};
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
handleSize();
|
|
44
|
-
window.addEventListener("resize", handleSize);
|
|
45
|
-
return () => window.removeEventListener("resize", handleSize);
|
|
46
|
-
}, []);
|
|
47
|
-
return windowSize;
|
|
48
|
-
};
|
|
49
|
-
|
|
50
35
|
// Map of OS detection patterns
|
|
51
36
|
const osPatterns = [
|
|
52
37
|
["Windows", /\b(windows nt|win)\b/i],
|
|
@@ -62,6 +47,7 @@ const useDeviceInfo = () => {
|
|
|
62
47
|
return {
|
|
63
48
|
isMobile: false,
|
|
64
49
|
isDesktop: false,
|
|
50
|
+
isTouch: false,
|
|
65
51
|
os: "Unknown",
|
|
66
52
|
isWindows: false,
|
|
67
53
|
isMacOS: false,
|
|
@@ -80,9 +66,15 @@ const useDeviceInfo = () => {
|
|
|
80
66
|
const isIOS = detectedOS === "iOS";
|
|
81
67
|
const isMobile = isAndroid || isIOS;
|
|
82
68
|
const isDesktop = isWindows || isMacOS || isLinux;
|
|
69
|
+
// Detect touch device
|
|
70
|
+
const isTouch = "ontouchstart" in window ||
|
|
71
|
+
navigator.maxTouchPoints > 0 ||
|
|
72
|
+
(window.matchMedia && window.matchMedia("(pointer: coarse)").matches) ||
|
|
73
|
+
false;
|
|
83
74
|
return {
|
|
84
75
|
isMobile,
|
|
85
76
|
isDesktop,
|
|
77
|
+
isTouch,
|
|
86
78
|
os: detectedOS,
|
|
87
79
|
isWindows,
|
|
88
80
|
isMacOS,
|
|
@@ -93,4 +85,4 @@ const useDeviceInfo = () => {
|
|
|
93
85
|
}, []);
|
|
94
86
|
};
|
|
95
87
|
|
|
96
|
-
export { useDeviceInfo
|
|
88
|
+
export { useDeviceInfo };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geneui/components",
|
|
3
3
|
"description": "The Gene UI components library designed for BI tools",
|
|
4
|
-
"version": "3.0.0-next-
|
|
4
|
+
"version": "3.0.0-next-41d59b3-12032025",
|
|
5
5
|
"author": "SoftConstruct",
|
|
6
6
|
"homepage": "https://github.com/softconstruct/gene-ui-components#readme",
|
|
7
7
|
"repository": {
|
|
@@ -175,6 +175,7 @@
|
|
|
175
175
|
"@geneui/icons": "^1.0.4",
|
|
176
176
|
"@geneui/tokens": "^1.0.0",
|
|
177
177
|
"classnames": "^2.3.2",
|
|
178
|
+
"qrcode.react": "^4.2.0",
|
|
178
179
|
"react-is": "^17.0.2",
|
|
179
180
|
"react-scrollbars-custom": "^4.1.1"
|
|
180
181
|
},
|
package/types/index.d.ts
CHANGED
|
@@ -1 +1,4 @@
|
|
|
1
|
-
export type
|
|
1
|
+
export type OSTypes = "iOS" | "Android" | "Windows" | "macOS" | "Linux" | "Unknown";
|
|
2
|
+
export type DeviceTypes = "mobile" | "tablet" | "desktop";
|
|
3
|
+
export type ThemesTypes = "light" | "dark";
|
|
4
|
+
export type BreakpointsTypes = Record<DeviceTypes, number>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
import { u as useWindowSize } from './index-2eadf6a2.js';
|
|
3
|
+
|
|
4
|
+
const EQUAL_HEIGHT_DIFF = 3;
|
|
5
|
+
const useEllipsisDetection = (ref, externalDependencies = []) => {
|
|
6
|
+
var _a, _b, _c, _d;
|
|
7
|
+
const [isTruncated, setIsTruncated] = useState(false);
|
|
8
|
+
const { width } = useWindowSize();
|
|
9
|
+
const handleResize = () => {
|
|
10
|
+
if (!ref.current)
|
|
11
|
+
return;
|
|
12
|
+
const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
|
|
13
|
+
setIsTruncated(scrollWidth > clientWidth || scrollHeight > clientHeight + EQUAL_HEIGHT_DIFF);
|
|
14
|
+
};
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
handleResize();
|
|
17
|
+
}, [
|
|
18
|
+
width,
|
|
19
|
+
...externalDependencies,
|
|
20
|
+
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollWidth,
|
|
21
|
+
(_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth,
|
|
22
|
+
(_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.scrollHeight,
|
|
23
|
+
(_d = ref === null || ref === void 0 ? void 0 : ref.current) === null || _d === void 0 ? void 0 : _d.clientHeight
|
|
24
|
+
]);
|
|
25
|
+
return isTruncated;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { useEllipsisDetection as u };
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
import { u as useDebouncedCallback } from './useDebounceCallback-999deae7.js';
|
|
3
|
-
|
|
4
|
-
const EQUAL_HEIGHT_DIFF = 3;
|
|
5
|
-
const useEllipsisDetection = (ref, externalDependencies = []) => {
|
|
6
|
-
var _a, _b, _c, _d;
|
|
7
|
-
const [isTruncated, setIsTruncated] = useState(false);
|
|
8
|
-
const handleResize = () => {
|
|
9
|
-
if (!ref.current)
|
|
10
|
-
return;
|
|
11
|
-
const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
|
|
12
|
-
setIsTruncated(scrollWidth > clientWidth || scrollHeight > clientHeight + EQUAL_HEIGHT_DIFF);
|
|
13
|
-
};
|
|
14
|
-
useEffect(() => handleResize(), [...externalDependencies]);
|
|
15
|
-
const { debouncedCallback } = useDebouncedCallback(handleResize, 100);
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
window.addEventListener("resize", debouncedCallback);
|
|
18
|
-
return () => window.removeEventListener("resize", debouncedCallback);
|
|
19
|
-
}, [(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollWidth, (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth, (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.scrollHeight, (_d = ref === null || ref === void 0 ? void 0 : ref.current) === null || _d === void 0 ? void 0 : _d.clientHeight]);
|
|
20
|
-
return isTruncated;
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export { useEllipsisDetection as u };
|