@react-fabric/data 1.0.0-beta.36 → 1.0.0-beta.37
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/{src/histogram/Histogram.module.css → css/_histogram.css} +16 -13
- package/css/styles.css +24 -0
- package/dist/cjs/histogram/Histogram.js +6 -7
- package/dist/cjs/table/Table.js +2 -2
- package/dist/esm/histogram/Histogram.js +7 -8
- package/dist/esm/table/Table.js +2 -2
- package/package.json +17 -6
- package/src/histogram/Histogram.tsx +8 -9
- package/src/table/Table.tsx +3 -3
- package/dist/cjs/histogram/Histogram.module.css +0 -1
- package/dist/esm/histogram/Histogram.module.css +0 -1
|
@@ -21,14 +21,9 @@
|
|
|
21
21
|
* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
22
22
|
*/
|
|
23
23
|
|
|
24
|
-
@layer
|
|
25
|
-
.histogram {
|
|
26
|
-
.histoLabel {
|
|
27
|
-
--tw-gradient-from: var(--color) var(--tw-gradient-from-position);
|
|
28
|
-
--tw-gradient-to: color-mix(in lab, var(--color) 20%, var(--fabric-bg))
|
|
29
|
-
var(--tw-gradient-to-position);
|
|
30
|
-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
31
|
-
|
|
24
|
+
@layer components {
|
|
25
|
+
.fabric-histogram {
|
|
26
|
+
.fabric-histoLabel {
|
|
32
27
|
background-color: color(from var(--color) srgb r g b / 5%);
|
|
33
28
|
|
|
34
29
|
&:hover {
|
|
@@ -36,21 +31,29 @@
|
|
|
36
31
|
}
|
|
37
32
|
|
|
38
33
|
&[data-disabled="true"] {
|
|
39
|
-
--color:
|
|
34
|
+
--color: var(--color-tint-300);
|
|
40
35
|
|
|
41
|
-
color:
|
|
36
|
+
color: var(--color-tint-600);
|
|
42
37
|
}
|
|
43
38
|
}
|
|
44
39
|
|
|
45
|
-
.histoBar {
|
|
40
|
+
.fabric-histoBar {
|
|
41
|
+
--tw-gradient-stops: var(
|
|
42
|
+
--tw-gradient-via-stops,
|
|
43
|
+
var(--tw-gradient-position)
|
|
44
|
+
),
|
|
45
|
+
var(--color) var(--tw-gradient-from-position),
|
|
46
|
+
color-mix(in lab, var(--color) 20%, var(--fabric-bg))
|
|
47
|
+
var(--tw-gradient-to-position);
|
|
48
|
+
|
|
46
49
|
box-shadow: -2px 0 0 var(--color) inset;
|
|
47
50
|
|
|
48
|
-
|
|
51
|
+
@variant rtl {
|
|
49
52
|
box-shadow: 2px 0 0 var(--color) inset;
|
|
50
53
|
}
|
|
51
54
|
}
|
|
52
55
|
|
|
53
|
-
.histoBadge {
|
|
56
|
+
.fabric-histoBadge {
|
|
54
57
|
background-color: color(from var(--color) srgb r g b / 15%);
|
|
55
58
|
}
|
|
56
59
|
}
|
package/css/styles.css
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* React Fabric
|
|
3
|
+
* @version: 1.0.0
|
|
4
|
+
*
|
|
5
|
+
*
|
|
6
|
+
* The MIT License (MIT)
|
|
7
|
+
* Copyright (c) 2025 Adarsh Pastakia
|
|
8
|
+
*
|
|
9
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software
|
|
10
|
+
* and associated documentation files (the "Software"), to deal in the Software without restriction,
|
|
11
|
+
* including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
12
|
+
* and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
|
|
13
|
+
* subject to the following conditions:
|
|
14
|
+
*
|
|
15
|
+
* The above copyright notice and this permission notice shall be included in all copies or substantial
|
|
16
|
+
* portions of the Software.
|
|
17
|
+
*
|
|
18
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
|
19
|
+
* TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
20
|
+
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
21
|
+
* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
@import "./_histogram.css";
|
|
@@ -8,7 +8,6 @@ var utilities = require('@react-fabric/utilities');
|
|
|
8
8
|
var classNames = require('classnames');
|
|
9
9
|
var react = require('react');
|
|
10
10
|
var reactI18next = require('react-i18next');
|
|
11
|
-
var Histogram_module = require('./Histogram.module.css');
|
|
12
11
|
var jsxRuntime = require('react/jsx-runtime');
|
|
13
12
|
|
|
14
13
|
var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
|
|
@@ -20,7 +19,7 @@ var Histogram = function Histogram(_ref) {
|
|
|
20
19
|
items = _ref$items === void 0 ? [] : _ref$items,
|
|
21
20
|
total = _ref.total,
|
|
22
21
|
_ref$color = _ref.color,
|
|
23
|
-
color = _ref$color === void 0 ? "primary" : _ref$color,
|
|
22
|
+
color = _ref$color === void 0 ? "primary-500" : _ref$color,
|
|
24
23
|
_ref$sortBy = _ref.sortBy,
|
|
25
24
|
sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
|
|
26
25
|
emptyTitle = _ref.emptyTitle,
|
|
@@ -39,10 +38,10 @@ var Histogram = function Histogram(_ref) {
|
|
|
39
38
|
return items.sort(utilities.compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
|
|
40
39
|
}, [items, sortBy]);
|
|
41
40
|
return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
|
|
42
|
-
className:
|
|
41
|
+
className: "fabric-histogram from-0% to-100%"
|
|
43
42
|
}, aria), {}, {
|
|
44
43
|
style: {
|
|
45
|
-
"--color": "var(--".concat(color, ")")
|
|
44
|
+
"--color": utilities.isColor(color) ? color : "var(--color-".concat(color, ")")
|
|
46
45
|
},
|
|
47
46
|
children: [sorted.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
|
|
48
47
|
icon: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
|
|
@@ -56,13 +55,13 @@ var Histogram = function Histogram(_ref) {
|
|
|
56
55
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
57
56
|
role: "none",
|
|
58
57
|
"data-disabled": item.count === 0 || item.disabled,
|
|
59
|
-
className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px",
|
|
58
|
+
className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", "fabric-histoLabel", (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
|
|
60
59
|
"data-testid": item.id,
|
|
61
60
|
onClick: function onClick(e) {
|
|
62
61
|
return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
|
|
63
62
|
},
|
|
64
63
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
65
|
-
className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l
|
|
64
|
+
className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l", "fabric-histoBar"),
|
|
66
65
|
style: {
|
|
67
66
|
width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
|
|
68
67
|
}
|
|
@@ -89,7 +88,7 @@ var Histogram = function Histogram(_ref) {
|
|
|
89
88
|
}, "positive")],
|
|
90
89
|
children: item.label
|
|
91
90
|
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
92
|
-
className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none",
|
|
91
|
+
className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge"),
|
|
93
92
|
children: utilities.Format.number(item.count)
|
|
94
93
|
})]
|
|
95
94
|
}, item.id);
|
package/dist/cjs/table/Table.js
CHANGED
|
@@ -125,7 +125,7 @@ var Table = function Table(_ref) {
|
|
|
125
125
|
ref: scrollerRef,
|
|
126
126
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
127
127
|
"data-ref": "tableHeader",
|
|
128
|
-
className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-
|
|
128
|
+
className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-5",
|
|
129
129
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
130
130
|
className: wrapperStart,
|
|
131
131
|
children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
@@ -176,7 +176,7 @@ var Table = function Table(_ref) {
|
|
|
176
176
|
return "__GROUP__" in data ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
177
177
|
ref: measureElement,
|
|
178
178
|
"data-index": index,
|
|
179
|
-
className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1", isActiveSticky(index) && "sticky top-8
|
|
179
|
+
className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-3", isActiveSticky(index) && "sticky top-8"),
|
|
180
180
|
role: "none",
|
|
181
181
|
onClick: function onClick() {
|
|
182
182
|
return toggleGroupExpand(data.key);
|
|
@@ -4,11 +4,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
4
4
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
5
5
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
6
6
|
import { EmptyContent, Icon, ActionLabel, Button, CoreIcons } from '@react-fabric/core';
|
|
7
|
-
import { compareValues, Format } from '@react-fabric/utilities';
|
|
7
|
+
import { compareValues, isColor, Format } from '@react-fabric/utilities';
|
|
8
8
|
import classNames from 'classnames';
|
|
9
9
|
import { useMemo } from 'react';
|
|
10
10
|
import { useTranslation } from 'react-i18next';
|
|
11
|
-
import classes from './Histogram.module.css';
|
|
12
11
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
13
12
|
|
|
14
13
|
var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
|
|
@@ -20,7 +19,7 @@ var Histogram = function Histogram(_ref) {
|
|
|
20
19
|
items = _ref$items === void 0 ? [] : _ref$items,
|
|
21
20
|
total = _ref.total,
|
|
22
21
|
_ref$color = _ref.color,
|
|
23
|
-
color = _ref$color === void 0 ? "primary" : _ref$color,
|
|
22
|
+
color = _ref$color === void 0 ? "primary-500" : _ref$color,
|
|
24
23
|
_ref$sortBy = _ref.sortBy,
|
|
25
24
|
sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
|
|
26
25
|
emptyTitle = _ref.emptyTitle,
|
|
@@ -39,10 +38,10 @@ var Histogram = function Histogram(_ref) {
|
|
|
39
38
|
return items.sort(compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
|
|
40
39
|
}, [items, sortBy]);
|
|
41
40
|
return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
|
|
42
|
-
className:
|
|
41
|
+
className: "fabric-histogram from-0% to-100%"
|
|
43
42
|
}, aria), {}, {
|
|
44
43
|
style: {
|
|
45
|
-
"--color": "var(--".concat(color, ")")
|
|
44
|
+
"--color": isColor(color) ? color : "var(--color-".concat(color, ")")
|
|
46
45
|
},
|
|
47
46
|
children: [sorted.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
|
|
48
47
|
icon: /*#__PURE__*/jsx(Icon, {
|
|
@@ -56,13 +55,13 @@ var Histogram = function Histogram(_ref) {
|
|
|
56
55
|
return /*#__PURE__*/jsxs("div", {
|
|
57
56
|
role: "none",
|
|
58
57
|
"data-disabled": item.count === 0 || item.disabled,
|
|
59
|
-
className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px",
|
|
58
|
+
className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", "fabric-histoLabel", (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
|
|
60
59
|
"data-testid": item.id,
|
|
61
60
|
onClick: function onClick(e) {
|
|
62
61
|
return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
|
|
63
62
|
},
|
|
64
63
|
children: [/*#__PURE__*/jsx("div", {
|
|
65
|
-
className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l
|
|
64
|
+
className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l", "fabric-histoBar"),
|
|
66
65
|
style: {
|
|
67
66
|
width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
|
|
68
67
|
}
|
|
@@ -89,7 +88,7 @@ var Histogram = function Histogram(_ref) {
|
|
|
89
88
|
}, "positive")],
|
|
90
89
|
children: item.label
|
|
91
90
|
}), /*#__PURE__*/jsx("span", {
|
|
92
|
-
className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none",
|
|
91
|
+
className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge"),
|
|
93
92
|
children: Format.number(item.count)
|
|
94
93
|
})]
|
|
95
94
|
}, item.id);
|
package/dist/esm/table/Table.js
CHANGED
|
@@ -125,7 +125,7 @@ var Table = function Table(_ref) {
|
|
|
125
125
|
ref: scrollerRef,
|
|
126
126
|
children: [/*#__PURE__*/jsxs("div", {
|
|
127
127
|
"data-ref": "tableHeader",
|
|
128
|
-
className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-
|
|
128
|
+
className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-5",
|
|
129
129
|
children: [/*#__PURE__*/jsxs("div", {
|
|
130
130
|
className: wrapperStart,
|
|
131
131
|
children: [canExpand && /*#__PURE__*/jsx("div", {
|
|
@@ -176,7 +176,7 @@ var Table = function Table(_ref) {
|
|
|
176
176
|
return "__GROUP__" in data ? /*#__PURE__*/jsxs("div", {
|
|
177
177
|
ref: measureElement,
|
|
178
178
|
"data-index": index,
|
|
179
|
-
className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1", isActiveSticky(index) && "sticky top-8
|
|
179
|
+
className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-3", isActiveSticky(index) && "sticky top-8"),
|
|
180
180
|
role: "none",
|
|
181
181
|
onClick: function onClick() {
|
|
182
182
|
return toggleGroupExpand(data.key);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-fabric/data",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.37",
|
|
4
4
|
"description": "RUF: Data package",
|
|
5
5
|
"author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -11,12 +11,23 @@
|
|
|
11
11
|
"types": "dist/types/index.d.ts",
|
|
12
12
|
"directories": {
|
|
13
13
|
"src": "src",
|
|
14
|
+
"styles": "css",
|
|
14
15
|
"test": "tests"
|
|
15
16
|
},
|
|
16
17
|
"files": [
|
|
18
|
+
"css",
|
|
17
19
|
"src",
|
|
18
20
|
"dist"
|
|
19
21
|
],
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"default": "./dist/esm/index.js",
|
|
25
|
+
"import": "./dist/esm/index.js",
|
|
26
|
+
"require": "./dist/cjs/index.js",
|
|
27
|
+
"types": "./dist/types/index.d.ts"
|
|
28
|
+
},
|
|
29
|
+
"./styles": "./css/styles.css"
|
|
30
|
+
},
|
|
20
31
|
"publishConfig": {
|
|
21
32
|
"access": "public",
|
|
22
33
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,10 +44,10 @@
|
|
|
33
44
|
"watch": "npm-run-all -p watch:rollup watch:dts"
|
|
34
45
|
},
|
|
35
46
|
"dependencies": {
|
|
36
|
-
"@react-fabric/core": "^1.0.0-beta.
|
|
37
|
-
"@react-fabric/date": "^1.0.0-beta.
|
|
38
|
-
"@react-fabric/form": "^1.0.0-beta.
|
|
39
|
-
"@react-fabric/utilities": "^1.0.0-beta.
|
|
47
|
+
"@react-fabric/core": "^1.0.0-beta.37",
|
|
48
|
+
"@react-fabric/date": "^1.0.0-beta.37",
|
|
49
|
+
"@react-fabric/form": "^1.0.0-beta.37",
|
|
50
|
+
"@react-fabric/utilities": "^1.0.0-beta.37",
|
|
40
51
|
"@tanstack/react-virtual": "^3.8.6",
|
|
41
52
|
"classnames": "^2.5.1",
|
|
42
53
|
"color": "^4.2.3",
|
|
@@ -52,5 +63,5 @@
|
|
|
52
63
|
"node": ">=18.12.0",
|
|
53
64
|
"npm": ">=8.19.0"
|
|
54
65
|
},
|
|
55
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "9b737229bf24ebe986540ee2c4b8904ebc4a5a9b"
|
|
56
67
|
}
|
|
@@ -33,11 +33,10 @@ import {
|
|
|
33
33
|
type PaletteType,
|
|
34
34
|
type TestProps,
|
|
35
35
|
} from "@react-fabric/core/dist/types/types";
|
|
36
|
-
import { compareValues, Format } from "@react-fabric/utilities";
|
|
36
|
+
import { compareValues, Format, isColor } from "@react-fabric/utilities";
|
|
37
37
|
import classNames from "classnames";
|
|
38
38
|
import { useMemo } from "react";
|
|
39
39
|
import { useTranslation } from "react-i18next";
|
|
40
|
-
import classes from "./Histogram.module.css";
|
|
41
40
|
|
|
42
41
|
const emptyIcon =
|
|
43
42
|
"M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
|
|
@@ -84,7 +83,7 @@ export interface HistogramProps extends TestProps {
|
|
|
84
83
|
export const Histogram = ({
|
|
85
84
|
items = [],
|
|
86
85
|
total,
|
|
87
|
-
color = "primary",
|
|
86
|
+
color = "primary-500",
|
|
88
87
|
sortBy = "count",
|
|
89
88
|
emptyTitle,
|
|
90
89
|
emptyMessage,
|
|
@@ -105,11 +104,11 @@ export const Histogram = ({
|
|
|
105
104
|
|
|
106
105
|
return (
|
|
107
106
|
<div
|
|
108
|
-
className={
|
|
107
|
+
className={"fabric-histogram from-0% to-100%"}
|
|
109
108
|
{...aria}
|
|
110
109
|
style={
|
|
111
110
|
{
|
|
112
|
-
"--color": `var(
|
|
111
|
+
"--color": isColor(color) ? color : `var(--color-${color})`,
|
|
113
112
|
} as AnyObject
|
|
114
113
|
}
|
|
115
114
|
>
|
|
@@ -127,7 +126,7 @@ export const Histogram = ({
|
|
|
127
126
|
data-disabled={item.count === 0 || item.disabled}
|
|
128
127
|
className={classNames(
|
|
129
128
|
"relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px",
|
|
130
|
-
|
|
129
|
+
"fabric-histoLabel",
|
|
131
130
|
((item.total ?? item.count) === 0 || item.disabled) &&
|
|
132
131
|
"pointer-events-none",
|
|
133
132
|
)}
|
|
@@ -136,8 +135,8 @@ export const Histogram = ({
|
|
|
136
135
|
>
|
|
137
136
|
<div
|
|
138
137
|
className={classNames(
|
|
139
|
-
"absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l
|
|
140
|
-
|
|
138
|
+
"absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l",
|
|
139
|
+
"fabric-histoBar",
|
|
141
140
|
)}
|
|
142
141
|
style={{
|
|
143
142
|
width: `${Math.min(item.count / maxTotal, 1) * 100}%`,
|
|
@@ -171,7 +170,7 @@ export const Histogram = ({
|
|
|
171
170
|
<span
|
|
172
171
|
className={classNames(
|
|
173
172
|
"z-1 rounded-full text-xs font-medium px-2 py-1 leading-none",
|
|
174
|
-
|
|
173
|
+
"fabric-histoBadge",
|
|
175
174
|
)}
|
|
176
175
|
>
|
|
177
176
|
{Format.number(item.count)}
|
package/src/table/Table.tsx
CHANGED
|
@@ -165,7 +165,7 @@ export const Table = <T extends KeyValue = KeyValue>({
|
|
|
165
165
|
>
|
|
166
166
|
<div
|
|
167
167
|
data-ref="tableHeader"
|
|
168
|
-
className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-
|
|
168
|
+
className="bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-5"
|
|
169
169
|
>
|
|
170
170
|
<div className={wrapperStart}>
|
|
171
171
|
{canExpand && <div className="w-6" />}
|
|
@@ -215,8 +215,8 @@ export const Table = <T extends KeyValue = KeyValue>({
|
|
|
215
215
|
ref={measureElement}
|
|
216
216
|
data-index={index}
|
|
217
217
|
className={classNames(
|
|
218
|
-
"px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1",
|
|
219
|
-
isActiveSticky(index) && "sticky top-8
|
|
218
|
+
"px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-3",
|
|
219
|
+
isActiveSticky(index) && "sticky top-8",
|
|
220
220
|
)}
|
|
221
221
|
role="none"
|
|
222
222
|
onClick={() => toggleGroupExpand(data.key)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}
|