@geneui/components 3.0.0-next-e1ffab5-19022025 → 3.0.0-next-cbf1483-19022025
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/Popover.js +1 -1
- package/Text.js +30 -0
- package/Tooltip.js +16 -4
- package/components/atoms/Text/Text.d.ts +67 -0
- package/components/atoms/Text/index.d.ts +1 -0
- package/components/molecules/KeyValue/KeyValue.d.ts +2 -2
- package/components/molecules/KeyValue/Value.d.ts +3 -0
- package/{index-faa9d19a.js → index-24d8893c.js} +1 -1
- package/index.d.ts +1 -0
- package/index.js +2 -1
- package/package.json +1 -1
- package/types/index.d.ts +0 -0
package/Popover.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-
|
|
1
|
+
export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-24d8893c.js';
|
|
2
2
|
import 'react';
|
|
3
3
|
import './floating-ui.react-0485e4db.js';
|
|
4
4
|
import 'react-dom';
|
package/Text.js
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React__default, { useRef } from 'react';
|
|
2
|
+
import { c as classNames } from './index-ce02421b.js';
|
|
3
|
+
import Tooltip from './Tooltip.js';
|
|
4
|
+
import { u as useEllipsisDetection } from './useEllipsisDetection-e545ae62.js';
|
|
5
|
+
import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
6
|
+
import './floating-ui.react-0485e4db.js';
|
|
7
|
+
import 'react-dom';
|
|
8
|
+
import './GeneUIProvider.js';
|
|
9
|
+
import './useDebounceCallback-999deae7.js';
|
|
10
|
+
|
|
11
|
+
var css_248z = ".text_variant_headingXLargeSemibold{font-family:var(--guit-sem-font-heading-xlarge-semibold-font-family);font-size:var(--guit-sem-font-heading-xlarge-semibold-font-size);font-weight:var(--guit-sem-font-heading-xlarge-semibold-font-weight);line-height:var(--guit-sem-font-heading-xlarge-semibold-line-height)}.text_variant_headingLargeSemibold{font-family:var(--guit-sem-font-heading-large-semibold-font-family);font-size:var(--guit-sem-font-heading-large-semibold-font-size);font-weight:var(--guit-sem-font-heading-large-semibold-font-weight);line-height:var(--guit-sem-font-heading-large-semibold-line-height)}.text_variant_headingMediumSemibold{font-family:var(--guit-sem-font-heading-medium-semibold-font-family);font-size:var(--guit-sem-font-heading-medium-semibold-font-size);font-weight:var(--guit-sem-font-heading-medium-semibold-font-weight);line-height:var(--guit-sem-font-heading-medium-semibold-line-height)}.text_variant_headingSmallSemibold{font-family:var(--guit-sem-font-heading-small-semibold-font-family);font-size:var(--guit-sem-font-heading-small-semibold-font-size);font-weight:var(--guit-sem-font-heading-small-semibold-font-weight);line-height:var(--guit-sem-font-heading-small-semibold-line-height)}.text_variant_headingXSmallSemibold{font-family:var(--guit-sem-font-heading-xsmall-semibold-font-family);font-size:var(--guit-sem-font-heading-xsmall-semibold-font-size);font-weight:var(--guit-sem-font-heading-xsmall-semibold-font-weight);line-height:var(--guit-sem-font-heading-xsmall-semibold-line-height)}.text_variant_subheadingLargeSemibold{font-family:var(--guit-sem-font-subheading-large-semibold-font-family);font-size:var(--guit-sem-font-subheading-large-semibold-font-size);font-weight:var(--guit-sem-font-subheading-large-semibold-font-weight);line-height:var(--guit-sem-font-subheading-large-semibold-line-height)}.text_variant_subheadingMediumSemibold{font-family:var(--guit-sem-font-subheading-medium-semibold-font-family);font-size:var(--guit-sem-font-subheading-medium-semibold-font-size);font-weight:var(--guit-sem-font-subheading-medium-semibold-font-weight);line-height:var(--guit-sem-font-subheading-medium-semibold-line-height)}.text_variant_labelLargeSemibold{font-family:var(--guit-sem-font-label-large-default-semibold-font-family);font-size:var(--guit-sem-font-label-large-default-semibold-font-size);font-weight:var(--guit-sem-font-label-large-default-semibold-font-weight);line-height:var(--guit-sem-font-label-large-default-semibold-line-height)}.text_variant_labelLargeMedium{font-family:var(--guit-sem-font-label-large-default-medium-font-family);font-size:var(--guit-sem-font-label-large-default-medium-font-size);font-weight:var(--guit-sem-font-label-large-default-medium-font-weight);line-height:var(--guit-sem-font-label-large-default-medium-line-height)}.text_variant_labelMediumSemibold{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)}.text_variant_labelMediumMedium{font-family:var(--guit-sem-font-label-medium-default-medium-font-family);font-size:var(--guit-sem-font-label-medium-default-medium-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-medium-line-height)}.text_variant_labelSmallSemibold{font-family:var(--guit-sem-font-label-small-default-semibold-font-family);font-size:var(--guit-sem-font-label-small-default-semibold-font-size);font-weight:var(--guit-sem-font-label-small-default-semibold-font-weight);line-height:var(--guit-sem-font-label-small-default-semibold-line-height)}.text_variant_labelSmallMedium{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.text_variant_bodyLargeMedium_hasSpace,.text_variant_bodyLargeRegular_hasSpace,.text_variant_bodyLargeSemibold_hasSpace{margin-block-end:2.4rem}.text_variant_bodyMediumMedium_hasSpace,.text_variant_bodyMediumRegular_hasSpace,.text_variant_bodyMediumSemibold_hasSpace{margin-block-end:2rem}.text_variant_bodyLargeSemibold{font-family:var(--guit-sem-font-body-large-default-semibold-font-family);font-size:var(--guit-sem-font-body-large-default-semibold-font-size);font-weight:var(--guit-sem-font-body-large-default-semibold-font-weight);line-height:var(--guit-sem-font-body-large-default-semibold-line-height)}.text_variant_bodyLargeMedium{font-family:var(--guit-sem-font-body-large-default-medium-font-family);font-size:var(--guit-sem-font-body-large-default-medium-font-size);font-weight:var(--guit-sem-font-body-large-default-medium-font-weight);line-height:var(--guit-sem-font-body-large-default-medium-line-height)}.text_variant_bodyLargeRegular{font-family:var(--guit-sem-font-body-large-default-regular-font-family);font-size:var(--guit-sem-font-body-large-default-regular-font-size);font-weight:var(--guit-sem-font-body-large-default-regular-font-weight);line-height:var(--guit-sem-font-body-large-default-regular-line-height)}.text_variant_bodyMediumSemibold{font-family:var(--guit-sem-font-body-medium-default-semibold-font-family);font-size:var(--guit-sem-font-body-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-body-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-body-medium-default-semibold-line-height)}.text_variant_bodyMediumMedium{font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}.text_variant_bodyMediumRegular{font-family:var(--guit-sem-font-body-medium-default-regular-font-family);font-size:var(--guit-sem-font-body-medium-default-regular-font-size);font-weight:var(--guit-sem-font-body-medium-default-regular-font-weight);line-height:var(--guit-sem-font-body-medium-default-regular-line-height)}.text_variant_captionLargeMedium_hasSpace,.text_variant_captionLargeRegular_hasSpace,.text_variant_captionLargeSemibold_hasSpace{margin-block-end:1.6rem}.text_variant_captionMediumMedium_hasSpace,.text_variant_captionMediumRegular_hasSpace,.text_variant_captionMediumSemibold_hasSpace{margin-block-end:1.4rem}.text_variant_captionLargeSemibold{font-family:var(--guit-sem-font-caption-large-semibold-font-family);font-size:var(--guit-sem-font-caption-large-semibold-font-size);font-weight:var(--guit-sem-font-caption-large-semibold-font-weight);letter-spacing:var(--guit-sem-font-caption-large-semibold-letter-spacing);line-height:var(--guit-sem-font-caption-large-semibold-line-height)}.text_variant_captionLargeMedium{font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height)}.text_variant_captionLargeRegular{font-family:var(--guit-sem-font-caption-large-regular-font-family);font-size:var(--guit-sem-font-caption-large-regular-font-size);font-weight:var(--guit-sem-font-caption-large-regular-font-weight);letter-spacing:var(--guit-sem-font-caption-large-regular-letter-spacing);line-height:var(--guit-sem-font-caption-large-regular-line-height)}.text_variant_captionMediumSemibold{font-family:var(--guit-sem-font-caption-medium-semibold-font-family);font-size:var(--guit-sem-font-caption-medium-semibold-font-size);font-weight:var(--guit-sem-font-caption-medium-semibold-font-weight);letter-spacing:var(--guit-sem-font-caption-medium-semibold-letter-spacing);line-height:var(--guit-sem-font-caption-medium-semibold-line-height)}.text_variant_captionMediumMedium{font-family:var(--guit-sem-font-caption-medium-medium-font-family);font-size:var(--guit-sem-font-caption-medium-medium-font-size);font-weight:var(--guit-sem-font-caption-medium-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-medium-medium-letter-spacing);line-height:var(--guit-sem-font-caption-medium-medium-line-height)}.text_variant_captionMediumRegular{font-family:var(--guit-sem-font-caption-medium-regular-font-family);font-size:var(--guit-sem-font-caption-medium-regular-font-size);font-weight:var(--guit-sem-font-caption-medium-regular-font-weight);letter-spacing:var(--guit-sem-font-caption-medium-regular-letter-spacing);line-height:var(--guit-sem-font-caption-medium-regular-line-height)}.text_alignment_start{text-align:start}.text_alignment_center{text-align:center}.text_alignment_end{text-align:end}.text_case_uppercase{text-transform:uppercase}.text_decoration_underline{text-decoration:underline}.text_decoration_lineThrough{text-decoration:line-through}";
|
|
12
|
+
styleInject(css_248z);
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Text component which has predefined tokens
|
|
16
|
+
*/
|
|
17
|
+
const Text = ({ className, variant = "bodyMediumMedium", children, as, alignment = "start", truncate = false, withTooltip = true }) => {
|
|
18
|
+
const textRef = useRef(null);
|
|
19
|
+
const isTruncated = useEllipsisDetection(textRef);
|
|
20
|
+
const Component = as;
|
|
21
|
+
const computedClassNames = classNames("text", {
|
|
22
|
+
[`text_variant_${variant}`]: variant,
|
|
23
|
+
[`text_alignment_${alignment}`]: alignment,
|
|
24
|
+
"ellipsis-text": truncate
|
|
25
|
+
}, className);
|
|
26
|
+
return (React__default.createElement(Tooltip, { text: children, isVisible: isTruncated && withTooltip },
|
|
27
|
+
React__default.createElement(Component, { ref: textRef, className: computedClassNames }, children)));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { Text as default };
|
package/Tooltip.js
CHANGED
|
@@ -275,7 +275,7 @@ function requireReactIs_development () {
|
|
|
275
275
|
}
|
|
276
276
|
} (reactIs));
|
|
277
277
|
|
|
278
|
-
var css_248z = ".tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-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-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),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-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height);max-width:24rem;min-width:var(--guit-sem-dimension-width-3xlarge);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium)}.tooltip_position_top .tooltip__arrow{transform:rotate(0deg)}.tooltip_position_bottom .tooltip__arrow{transform:rotate(180deg)}.tooltip_position_left .tooltip__arrow{transform:rotate(-90deg)}.tooltip_position_right .tooltip__arrow{transform:rotate(90deg)}.tooltip_color_default{background-color:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__icon,.tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}.tooltip_color_inverse{background-color:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__icon,.tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}.tooltip__arrow{position:absolute}.tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}.tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;overflow:hidden;word-break:break-word}.tooltip__icon{flex:0 0 auto}";
|
|
278
|
+
var css_248z = ".tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-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-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),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-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height);max-width:24rem;min-width:var(--guit-sem-dimension-width-3xlarge);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium)}.tooltip_position_top .tooltip__arrow{transform:rotate(0deg)}.tooltip_position_bottom .tooltip__arrow{transform:rotate(180deg)}.tooltip_position_left .tooltip__arrow{transform:rotate(-90deg)}.tooltip_position_right .tooltip__arrow{transform:rotate(90deg)}.tooltip_color_default{background-color:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__icon,.tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}.tooltip_color_inverse{background-color:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__icon,.tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}.tooltip__arrow{align-items:center;display:flex;height:.4rem;justify-content:center;position:absolute;width:1.2rem}.tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}.tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;overflow:hidden;word-break:break-word}.tooltip__icon{flex:0 0 auto}";
|
|
279
279
|
styleInject(css_248z);
|
|
280
280
|
|
|
281
281
|
const positions = [
|
|
@@ -355,6 +355,7 @@ A tooltip is a small, elevated surface that appears to provide contextual inform
|
|
|
355
355
|
Tooltips should be used to offer helpful plaintext information, not to communicate system feedback. Use a popover instead if you need to deliver structured information or enable interactions.
|
|
356
356
|
*/
|
|
357
357
|
const Tooltip = ({ children, position = "top-right", text, customPosition, alwaysShow, padding = 10, isVisible = true, appearance = "default", Icon }) => {
|
|
358
|
+
var _a;
|
|
358
359
|
const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
|
|
359
360
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
360
361
|
const arrowRef = useRef(null);
|
|
@@ -413,17 +414,28 @@ const Tooltip = ({ children, position = "top-right", text, customPosition, alway
|
|
|
413
414
|
const getCorrectPosition = arrowPosition
|
|
414
415
|
? { [arrowPosition]: offsetFromEdge }
|
|
415
416
|
: { insetInlineStart: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.x };
|
|
417
|
+
let arrowRegardingPosition = 0;
|
|
418
|
+
if ((_a = arrowRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) {
|
|
419
|
+
if (staticSide.match("top")) {
|
|
420
|
+
arrowRegardingPosition = -arrowRef.current.offsetHeight;
|
|
421
|
+
}
|
|
422
|
+
else if (staticSide === "bottom") {
|
|
423
|
+
arrowRegardingPosition = -arrowRef.current.offsetWidth + 8;
|
|
424
|
+
}
|
|
425
|
+
else {
|
|
426
|
+
arrowRegardingPosition = -arrowRef.current.offsetWidth + 4;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
416
429
|
return (React__default.createElement(React__default.Fragment, null,
|
|
417
430
|
component,
|
|
418
431
|
isVisible && (alwaysShow || isPopoverOpen) && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
|
|
419
432
|
React__default.createElement("div", Object.assign({ className: `tooltip tooltip_color_${appearance} tooltip_position_${currentDirection}`, ref: refs.setFloating, style: floatingStyles }, getFloatingProps()),
|
|
420
|
-
React__default.createElement("div", { className: "tooltip__arrow", ref: arrowRef, style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current ? `${
|
|
433
|
+
React__default.createElement("div", { className: "tooltip__arrow", ref: arrowRef, style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current ? `${arrowRegardingPosition}px` : 0 }) },
|
|
421
434
|
React__default.createElement("svg", { width: "12", height: "4", viewBox: "0 0 12 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
422
435
|
React__default.createElement("path", { className: "tooltip__arrowPath", d: "M6 4L0 0L12 0L6 4Z" }))),
|
|
423
436
|
React__default.createElement("div", { className: "tooltip__textWrapper" },
|
|
424
437
|
React__default.createElement("p", { className: "tooltip__text" }, text)),
|
|
425
|
-
Icon &&
|
|
426
|
-
React__default.createElement(Icon, { size: 16 }))))))));
|
|
438
|
+
Icon && React__default.createElement(Icon, { size: 16, className: "tooltip__icon" }))))));
|
|
427
439
|
};
|
|
428
440
|
|
|
429
441
|
export { Tooltip as default };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import "./Text.scss";
|
|
3
|
+
interface ITextProps {
|
|
4
|
+
/**
|
|
5
|
+
* Additional class for the parent element.
|
|
6
|
+
* This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
|
|
7
|
+
*/
|
|
8
|
+
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* The HTML tag with which text will be rendered.<br/>
|
|
11
|
+
* Possible values: `h1 | h2 | h3 | h4 | h5 | h6 | p | span`
|
|
12
|
+
*/
|
|
13
|
+
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
|
|
14
|
+
/**
|
|
15
|
+
* Style variants.<br>
|
|
16
|
+
* Will affect on `font-family` ,`font-size` ,`font-weight` and `line-height`.<br/>
|
|
17
|
+
* Possible values: `headingXLargeSemibold |`
|
|
18
|
+
<br/> `headingLargeSemibold |`
|
|
19
|
+
<br/> `headingMediumSemibold |`
|
|
20
|
+
<br/> `headingSmallSemibold |`
|
|
21
|
+
<br/> `headingXSmallSemibold |`
|
|
22
|
+
<br/> `subheadingLargeSemibold |`
|
|
23
|
+
<br/> `subheadingMediumSemibold |`
|
|
24
|
+
<br/> `labelLargeSemibold |`
|
|
25
|
+
<br/> `labelLargeMedium |`
|
|
26
|
+
<br/> `labelMediumSemibold |`
|
|
27
|
+
<br/> `labelMediumMedium |`
|
|
28
|
+
<br/> `labelSmallSemibold |`
|
|
29
|
+
<br/> `labelSmallMedium |`
|
|
30
|
+
<br/> `bodyLargeSemibold |`
|
|
31
|
+
<br/> `bodyLargeMedium |`
|
|
32
|
+
<br/> `bodyLargeRegular |`
|
|
33
|
+
<br/> `bodyMediumSemibold |`
|
|
34
|
+
<br/> `bodyMediumMedium |`
|
|
35
|
+
<br/> `bodyMediumRegular |`
|
|
36
|
+
<br/> `captionLargeSemibold |`
|
|
37
|
+
<br/> `captionLargeMedium |`
|
|
38
|
+
<br/> `captionLargeRegular |`
|
|
39
|
+
<br/> `captionMediumMedium |`
|
|
40
|
+
<br/> `captionMediumRegular`
|
|
41
|
+
*/
|
|
42
|
+
variant?: "headingXLargeSemibold" | "headingLargeSemibold" | "headingMediumSemibold" | "headingSmallSemibold" | "headingXSmallSemibold" | "subheadingLargeSemibold" | "subheadingMediumSemibold" | "labelLargeSemibold" | "labelLargeMedium" | "labelMediumSemibold" | "labelMediumMedium" | "labelSmallSemibold" | "labelSmallMedium" | "bodyLargeSemibold" | "bodyLargeMedium" | "bodyLargeRegular" | "bodyMediumSemibold" | "bodyMediumMedium" | "bodyMediumRegular" | "captionLargeSemibold" | "captionLargeMedium" | "captionLargeRegular" | "captionMediumSemibold" | "captionMediumMedium" | "captionMediumRegular";
|
|
43
|
+
/**
|
|
44
|
+
* Text alignment<br>
|
|
45
|
+
* Possible values: `left | center | right`
|
|
46
|
+
*/
|
|
47
|
+
alignment?: "start" | "center" | "end";
|
|
48
|
+
/**
|
|
49
|
+
* Text content
|
|
50
|
+
*/
|
|
51
|
+
children: string;
|
|
52
|
+
/**
|
|
53
|
+
* If true, the text will be truncated with ellipsis when it overflows.
|
|
54
|
+
* This is typically used to limit text to a single line or prevent overflow.
|
|
55
|
+
*/
|
|
56
|
+
truncate?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* If true, a tooltip will be displayed when the text is truncated and hovered.
|
|
59
|
+
* The tooltip will show the full text content when it's truncated.
|
|
60
|
+
*/
|
|
61
|
+
withTooltip?: boolean;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Text component which has predefined tokens
|
|
65
|
+
*/
|
|
66
|
+
declare const Text: FC<ITextProps>;
|
|
67
|
+
export { ITextProps, Text as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ITextProps, default } from "./Text";
|
|
@@ -30,9 +30,9 @@ interface IKeyValueProps extends IKeyValueContextProps {
|
|
|
30
30
|
*/
|
|
31
31
|
children: [ReactElement<IKeyProps>, ReactElement<IValueProps>];
|
|
32
32
|
}
|
|
33
|
-
declare const KeyValueContext: React.Context<IKeyValueContextProps>;
|
|
33
|
+
export declare const KeyValueContext: React.Context<IKeyValueContextProps>;
|
|
34
34
|
/**
|
|
35
35
|
* Key Value components present data in a key-value format, typically used to display information obtained from other components. A common use case is setting up a Key Value component to show detailed information from a selected table row.
|
|
36
36
|
*/
|
|
37
37
|
declare const KeyValue: FC<IKeyValueProps>;
|
|
38
|
-
export { IKeyValueProps,
|
|
38
|
+
export { IKeyValueProps, KeyValue as default };
|
|
@@ -307,7 +307,7 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
|
|
|
307
307
|
leastOverlap = Infinity;
|
|
308
308
|
};
|
|
309
309
|
}, [popoverOpened, refs.floating.current, placement, alwaysShow, position, currentPosition]);
|
|
310
|
-
const arrowOffsetFromEdge =
|
|
310
|
+
const arrowOffsetFromEdge = 5;
|
|
311
311
|
return (React__default.createElement(React__default.Fragment, null, isShowPopover && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
|
|
312
312
|
React__default.createElement("div", Object.assign({ style: styles, className: `popover popover_size_${size} popover_position_${currentDirection}`, ref: refs.setFloating }, getFloatingProps()),
|
|
313
313
|
size !== "mobile" && (React__default.createElement("div", { ref: arrowRef, className: "popover__arrow", style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current
|
package/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export { default as Pill, IPillProps } from "./components/atoms/Pill";
|
|
|
6
6
|
export { default as Divider, IDividerProps } from "./components/atoms/Divider";
|
|
7
7
|
export { default as Info, IInfoProps } from "./components/atoms/Info";
|
|
8
8
|
export { default as Button, IButtonProps } from "./components/atoms/Button";
|
|
9
|
+
export { default as Text, ITextProps } from "./components/atoms/Text";
|
|
9
10
|
export { Popover, PopoverBody, PopoverFooter, PopoverFooterActions, IPopoverProps } from "./components/atoms/Popover";
|
|
10
11
|
export { default as Badge, IBadgeProps } from "./components/atoms/Badge";
|
|
11
12
|
export { default as Scrollbar, IScrollbarProps } from "./components/atoms/Scrollbar";
|
package/index.js
CHANGED
|
@@ -6,7 +6,8 @@ export { default as Pill } from './Pill.js';
|
|
|
6
6
|
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
|
-
export {
|
|
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-24d8893c.js';
|
|
10
11
|
export { default as Badge } from './Badge.js';
|
|
11
12
|
export { default as Scrollbar } from './Scrollbar.js';
|
|
12
13
|
export { Col, Grid, Row } from './Grid.js';
|
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-cbf1483-19022025",
|
|
5
5
|
"author": "SoftConstruct",
|
|
6
6
|
"homepage": "https://github.com/softconstruct/gene-ui-components#readme",
|
|
7
7
|
"repository": {
|
package/types/index.d.ts
DELETED
|
File without changes
|