@salt-ds/lab 1.0.0-alpha.73 → 1.0.0-alpha.74
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/CHANGELOG.md +26 -0
- package/css/salt-lab.css +331 -1
- package/dist-cjs/collapsible/Collapsible.js +47 -0
- package/dist-cjs/collapsible/Collapsible.js.map +1 -0
- package/dist-cjs/collapsible/CollapsibleContext.js +23 -0
- package/dist-cjs/collapsible/CollapsibleContext.js.map +1 -0
- package/dist-cjs/collapsible/CollapsiblePanel.css.js +6 -0
- package/dist-cjs/collapsible/CollapsiblePanel.css.js.map +1 -0
- package/dist-cjs/collapsible/CollapsiblePanel.js +42 -0
- package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -0
- package/dist-cjs/collapsible/CollapsibleTrigger.js +36 -0
- package/dist-cjs/collapsible/CollapsibleTrigger.js.map +1 -0
- package/dist-cjs/index.js +36 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/table/TBody.js +32 -0
- package/dist-cjs/table/TBody.js.map +1 -0
- package/dist-cjs/table/TD.js +30 -0
- package/dist-cjs/table/TD.js.map +1 -0
- package/dist-cjs/table/TFoot.js +45 -0
- package/dist-cjs/table/TFoot.js.map +1 -0
- package/dist-cjs/table/TH.js +30 -0
- package/dist-cjs/table/TH.js.map +1 -0
- package/dist-cjs/table/THead.js +45 -0
- package/dist-cjs/table/THead.js.map +1 -0
- package/dist-cjs/table/TR.js +30 -0
- package/dist-cjs/table/TR.js.map +1 -0
- package/dist-cjs/table/Table.css.js +6 -0
- package/dist-cjs/table/Table.css.js.map +1 -0
- package/dist-cjs/table/Table.js +47 -0
- package/dist-cjs/table/Table.js.map +1 -0
- package/dist-cjs/vertical-navigation/SubMenuContext.js +34 -0
- package/dist-cjs/vertical-navigation/SubMenuContext.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigation.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigation.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigation.js +34 -0
- package/dist-cjs/vertical-navigation/VerticalNavigation.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItem.js +48 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItem.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js +83 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js +29 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js +24 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js +69 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.js +35 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.js.map +1 -0
- package/dist-es/collapsible/Collapsible.js +45 -0
- package/dist-es/collapsible/Collapsible.js.map +1 -0
- package/dist-es/collapsible/CollapsibleContext.js +20 -0
- package/dist-es/collapsible/CollapsibleContext.js.map +1 -0
- package/dist-es/collapsible/CollapsiblePanel.css.js +4 -0
- package/dist-es/collapsible/CollapsiblePanel.css.js.map +1 -0
- package/dist-es/collapsible/CollapsiblePanel.js +40 -0
- package/dist-es/collapsible/CollapsiblePanel.js.map +1 -0
- package/dist-es/collapsible/CollapsibleTrigger.js +34 -0
- package/dist-es/collapsible/CollapsibleTrigger.js.map +1 -0
- package/dist-es/index.js +17 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/table/TBody.js +30 -0
- package/dist-es/table/TBody.js.map +1 -0
- package/dist-es/table/TD.js +28 -0
- package/dist-es/table/TD.js.map +1 -0
- package/dist-es/table/TFoot.js +43 -0
- package/dist-es/table/TFoot.js.map +1 -0
- package/dist-es/table/TH.js +28 -0
- package/dist-es/table/TH.js.map +1 -0
- package/dist-es/table/THead.js +43 -0
- package/dist-es/table/THead.js.map +1 -0
- package/dist-es/table/TR.js +28 -0
- package/dist-es/table/TR.js.map +1 -0
- package/dist-es/table/Table.css.js +4 -0
- package/dist-es/table/Table.css.js.map +1 -0
- package/dist-es/table/Table.js +44 -0
- package/dist-es/table/Table.js.map +1 -0
- package/dist-es/vertical-navigation/SubMenuContext.js +30 -0
- package/dist-es/vertical-navigation/SubMenuContext.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigation.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigation.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigation.js +32 -0
- package/dist-es/vertical-navigation/VerticalNavigation.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItem.js +45 -0
- package/dist-es/vertical-navigation/VerticalNavigationItem.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.js +81 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemExpansionIcon.js +27 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.js +22 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.js +67 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.js +33 -0
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.js.map +1 -0
- package/dist-types/collapsible/Collapsible.d.ts +16 -0
- package/dist-types/collapsible/CollapsibleContext.d.ts +9 -0
- package/dist-types/collapsible/CollapsiblePanel.d.ts +4 -0
- package/dist-types/collapsible/CollapsibleTrigger.d.ts +5 -0
- package/dist-types/collapsible/index.d.ts +3 -0
- package/dist-types/index.d.ts +3 -0
- package/dist-types/table/TBody.d.ts +4 -0
- package/dist-types/table/TD.d.ts +4 -0
- package/dist-types/table/TFoot.d.ts +20 -0
- package/dist-types/table/TH.d.ts +4 -0
- package/dist-types/table/THead.d.ts +20 -0
- package/dist-types/table/TR.d.ts +4 -0
- package/dist-types/table/Table.d.ts +20 -0
- package/dist-types/table/index.d.ts +7 -0
- package/dist-types/vertical-navigation/SubMenuContext.d.ts +14 -0
- package/dist-types/vertical-navigation/VerticalNavigation.d.ts +5 -0
- package/dist-types/vertical-navigation/VerticalNavigationItem.d.ts +12 -0
- package/dist-types/vertical-navigation/VerticalNavigationItemContent.d.ts +4 -0
- package/dist-types/vertical-navigation/VerticalNavigationItemExpansionIcon.d.ts +2 -0
- package/dist-types/vertical-navigation/VerticalNavigationItemLabel.d.ts +4 -0
- package/dist-types/vertical-navigation/VerticalNavigationItemTrigger.d.ts +6 -0
- package/dist-types/vertical-navigation/VerticalNavigationSubMenu.d.ts +4 -0
- package/dist-types/vertical-navigation/index.d.ts +7 -0
- package/package.json +2 -2
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var clsx = require('clsx');
|
|
6
|
+
var CollapsibleContext = require('../collapsible/CollapsibleContext.js');
|
|
7
|
+
|
|
8
|
+
const withBaseName = core.makePrefixer("saltVerticalNavigationItemExpansionIcon");
|
|
9
|
+
const VerticalNavigationItemExpansionIcon = (props) => {
|
|
10
|
+
const { className, ...rest } = props;
|
|
11
|
+
const { CollapseIcon, ExpandIcon } = core.useIcon();
|
|
12
|
+
const iconExpansionMap = {
|
|
13
|
+
expanded: CollapseIcon,
|
|
14
|
+
collapsed: ExpandIcon
|
|
15
|
+
};
|
|
16
|
+
const { open } = CollapsibleContext.useCollapsibleContext();
|
|
17
|
+
const Icon = iconExpansionMap[open ? "expanded" : "collapsed"];
|
|
18
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
|
+
Icon,
|
|
20
|
+
{
|
|
21
|
+
className: clsx.clsx(withBaseName(), className),
|
|
22
|
+
"aria-hidden": "true",
|
|
23
|
+
...rest
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
exports.VerticalNavigationItemExpansionIcon = VerticalNavigationItemExpansionIcon;
|
|
29
|
+
//# sourceMappingURL=VerticalNavigationItemExpansionIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationItemExpansionIcon.js","sources":["../src/vertical-navigation/VerticalNavigationItemExpansionIcon.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { useCollapsibleContext } from \"../collapsible/CollapsibleContext\";\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItemExpansionIcon\");\n\nexport const VerticalNavigationItemExpansionIcon = (props: IconProps) => {\n const { className, ...rest } = props;\n const { CollapseIcon, ExpandIcon } = useIcon();\n const iconExpansionMap = {\n expanded: CollapseIcon,\n collapsed: ExpandIcon,\n };\n\n const { open } = useCollapsibleContext();\n\n const Icon = iconExpansionMap[open ? \"expanded\" : \"collapsed\"];\n return (\n <Icon\n className={clsx(withBaseName(), className)}\n aria-hidden=\"true\"\n {...rest}\n />\n );\n};\n"],"names":["makePrefixer","useIcon","useCollapsibleContext","jsx","clsx"],"mappings":";;;;;;;AAKA,MAAM,YAAA,GAAeA,kBAAa,yCAAyC,CAAA;AAE9D,MAAA,mCAAA,GAAsC,CAAC,KAAqB,KAAA;AACvE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,YAAQ,EAAA;AAC7C,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,QAAU,EAAA,YAAA;AAAA,IACV,SAAW,EAAA;AAAA,GACb;AAEA,EAAM,MAAA,EAAE,IAAK,EAAA,GAAIC,wCAAsB,EAAA;AAEvC,EAAA,MAAM,IAAO,GAAA,gBAAA,CAAiB,IAAO,GAAA,UAAA,GAAa,WAAW,CAAA;AAC7D,EACE,uBAAAC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,aAAY,EAAA,MAAA;AAAA,MACX,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationItemLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var VerticalNavigationItemLabel$1 = require('./VerticalNavigationItemLabel.css.js');
|
|
10
|
+
|
|
11
|
+
const withBaseName = core.makePrefixer("saltVerticalNavigationItemLabel");
|
|
12
|
+
const VerticalNavigationItemLabel = react.forwardRef(function VerticalNavigationItemLabel2(props, ref) {
|
|
13
|
+
const { children, className, ...rest } = props;
|
|
14
|
+
const targetWindow = window.useWindow();
|
|
15
|
+
styles.useComponentCssInjection({
|
|
16
|
+
testId: "salt-vertical-navigation-item-label",
|
|
17
|
+
css: VerticalNavigationItemLabel$1,
|
|
18
|
+
window: targetWindow
|
|
19
|
+
});
|
|
20
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children });
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
exports.VerticalNavigationItemLabel = VerticalNavigationItemLabel;
|
|
24
|
+
//# sourceMappingURL=VerticalNavigationItemLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationItemLabel.js","sources":["../src/vertical-navigation/VerticalNavigationItemLabel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport verticalNavigationItemLabelCss from \"./VerticalNavigationItemLabel.css\";\n\nexport interface VerticalNavigationItemLabelProps\n extends ComponentPropsWithoutRef<\"span\"> {}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItemLabel\");\n\nexport const VerticalNavigationItemLabel = forwardRef<\n HTMLSpanElement,\n VerticalNavigationItemLabelProps\n>(function VerticalNavigationItemLabel(props, ref) {\n const { children, className, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-vertical-navigation-item-label\",\n css: verticalNavigationItemLabelCss,\n window: targetWindow,\n });\n\n return (\n <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </span>\n );\n});\n"],"names":["makePrefixer","forwardRef","VerticalNavigationItemLabel","useWindow","useComponentCssInjection","verticalNavigationItemLabelCss","jsx","clsx"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,iCAAiC,CAAA;AAE5D,MAAM,2BAA8B,GAAAC,gBAAA,CAGzC,SAASC,4BAAAA,CAA4B,OAAO,GAAK,EAAA;AACjD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qCAAA;AAAA,IACR,GAAK,EAAAC,6BAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAAW,GAAG,IAAA,EAC7D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltVerticalNavigationItemTrigger {\n all: unset;\n padding: var(--salt-spacing-75) 0;\n display: flex;\n gap: var(--salt-spacing-100);\n width: 100%;\n}\n\n.saltVerticalNavigationItemTrigger::before {\n content: \"\";\n display: block;\n width: 100%;\n position: absolute;\n height: 100%;\n left: 0;\n top: 0;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=VerticalNavigationItemTrigger.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationItemTrigger.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var VerticalNavigationItem = require('./VerticalNavigationItem.js');
|
|
10
|
+
var VerticalNavigationItemTrigger$1 = require('./VerticalNavigationItemTrigger.css.js');
|
|
11
|
+
|
|
12
|
+
function ItemAction(props) {
|
|
13
|
+
return core.renderProps("a", props);
|
|
14
|
+
}
|
|
15
|
+
const withBaseName = core.makePrefixer("saltVerticalNavigationItemTrigger");
|
|
16
|
+
const VerticalNavigationItemTrigger = react.forwardRef(function VerticalNavigationItemTrigger2(props, ref) {
|
|
17
|
+
const {
|
|
18
|
+
className,
|
|
19
|
+
children,
|
|
20
|
+
render,
|
|
21
|
+
href,
|
|
22
|
+
onFocus,
|
|
23
|
+
onBlur,
|
|
24
|
+
onMouseDown,
|
|
25
|
+
...rest
|
|
26
|
+
} = props;
|
|
27
|
+
const targetWindow = window.useWindow();
|
|
28
|
+
styles.useComponentCssInjection({
|
|
29
|
+
testId: "salt-vertical-navigation-item-trigger",
|
|
30
|
+
css: VerticalNavigationItemTrigger$1,
|
|
31
|
+
window: targetWindow
|
|
32
|
+
});
|
|
33
|
+
const isLink = href != null;
|
|
34
|
+
const { active, setFocusVisible } = VerticalNavigationItem.useVerticalNavigationItem();
|
|
35
|
+
const wasMouseDownRef = react.useRef(false);
|
|
36
|
+
const handleFocus = (event) => {
|
|
37
|
+
if (!wasMouseDownRef.current) {
|
|
38
|
+
setFocusVisible(true);
|
|
39
|
+
}
|
|
40
|
+
wasMouseDownRef.current = false;
|
|
41
|
+
onFocus == null ? void 0 : onFocus(event);
|
|
42
|
+
};
|
|
43
|
+
const handleBlur = (event) => {
|
|
44
|
+
setFocusVisible(false);
|
|
45
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
46
|
+
};
|
|
47
|
+
const handleMouseDown = (event) => {
|
|
48
|
+
wasMouseDownRef.current = true;
|
|
49
|
+
onMouseDown == null ? void 0 : onMouseDown(event);
|
|
50
|
+
};
|
|
51
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
52
|
+
ItemAction,
|
|
53
|
+
{
|
|
54
|
+
className: clsx.clsx(withBaseName(), className),
|
|
55
|
+
href,
|
|
56
|
+
"aria-current": active ? "page" : void 0,
|
|
57
|
+
render: render ?? (isLink ? void 0 : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" })),
|
|
58
|
+
ref,
|
|
59
|
+
onFocus: handleFocus,
|
|
60
|
+
onBlur: handleBlur,
|
|
61
|
+
onMouseDown: handleMouseDown,
|
|
62
|
+
...rest,
|
|
63
|
+
children
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
exports.VerticalNavigationItemTrigger = VerticalNavigationItemTrigger;
|
|
69
|
+
//# sourceMappingURL=VerticalNavigationItemTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationItemTrigger.js","sources":["../src/vertical-navigation/VerticalNavigationItemTrigger.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type MouseEvent,\n useRef,\n} from \"react\";\nimport { useVerticalNavigationItem } from \"./VerticalNavigationItem\";\nimport verticalNavigationItemTriggerCss from \"./VerticalNavigationItemTrigger.css\";\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know the exact type here\nfunction ItemAction(props: ComponentPropsWithoutRef<any>) {\n return renderProps(\"a\", props);\n}\n\nexport interface VerticalNavigationItemTriggerProps\n extends ComponentPropsWithoutRef<\"a\"> {\n render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItemTrigger\");\n\nexport const VerticalNavigationItemTrigger = forwardRef<\n HTMLAnchorElement,\n VerticalNavigationItemTriggerProps\n>(function VerticalNavigationItemTrigger(props, ref) {\n const {\n className,\n children,\n render,\n href,\n onFocus,\n onBlur,\n onMouseDown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-vertical-navigation-item-trigger\",\n css: verticalNavigationItemTriggerCss,\n window: targetWindow,\n });\n\n const isLink = href != null;\n const { active, setFocusVisible } = useVerticalNavigationItem();\n\n const wasMouseDownRef = useRef(false);\n\n const handleFocus = (event: FocusEvent<never>) => {\n if (!wasMouseDownRef.current) {\n setFocusVisible(true);\n }\n wasMouseDownRef.current = false;\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<never>) => {\n setFocusVisible(false);\n onBlur?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<never>) => {\n wasMouseDownRef.current = true;\n onMouseDown?.(event);\n };\n\n return (\n <ItemAction\n className={clsx(withBaseName(), className)}\n href={href}\n aria-current={active ? \"page\" : undefined}\n render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n ref={ref}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onMouseDown={handleMouseDown}\n {...rest}\n >\n {children}\n </ItemAction>\n );\n});\n"],"names":["renderProps","makePrefixer","forwardRef","VerticalNavigationItemTrigger","useWindow","useComponentCssInjection","verticalNavigationItemTriggerCss","useVerticalNavigationItem","useRef","jsx","clsx"],"mappings":";;;;;;;;;;;AAeA,SAAS,WAAW,KAAsC,EAAA;AACxD,EAAO,OAAAA,gBAAA,CAAY,KAAK,KAAK,CAAA;AAC/B;AAOA,MAAM,YAAA,GAAeC,kBAAa,mCAAmC,CAAA;AAE9D,MAAM,6BAAgC,GAAAC,gBAAA,CAG3C,SAASC,8BAAAA,CAA8B,OAAO,GAAK,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uCAAA;AAAA,IACR,GAAK,EAAAC,+BAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAS,IAAQ,IAAA,IAAA;AACvB,EAAA,MAAM,EAAE,MAAA,EAAQ,eAAgB,EAAA,GAAIC,gDAA0B,EAAA;AAE9D,EAAM,MAAA,eAAA,GAAkBC,aAAO,KAAK,CAAA;AAEpC,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6B,KAAA;AAChD,IAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC5B,MAAA,eAAA,CAAgB,IAAI,CAAA;AAAA;AAEtB,IAAA,eAAA,CAAgB,OAAU,GAAA,KAAA;AAC1B,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAA6B,KAAA;AAC/C,IAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,IAAS,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAA6B,KAAA;AACpD,IAAA,eAAA,CAAgB,OAAU,GAAA,IAAA;AAC1B,IAAc,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,KAAA,CAAA;AAAA,GAChB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAA;AAAA,MACA,cAAA,EAAc,SAAS,MAAS,GAAA,MAAA;AAAA,MAChC,QAAQ,MAAW,KAAA,MAAA,GAAS,yBAAaD,cAAA,CAAA,QAAA,EAAA,EAAO,MAAK,QAAS,EAAA,CAAA,CAAA;AAAA,MAC9D,GAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,MACR,WAAa,EAAA,eAAA;AAAA,MACZ,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltVerticalNavigationSubMenu {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-fixed-100);\n list-style: none;\n padding: var(--salt-spacing-fixed-100) 0 0;\n margin: 0;\n}\n\n.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=VerticalNavigationSubMenu.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationSubMenu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var SubMenuContext = require('./SubMenuContext.js');
|
|
10
|
+
var VerticalNavigationSubMenu$1 = require('./VerticalNavigationSubMenu.css.js');
|
|
11
|
+
|
|
12
|
+
const withBaseName = core.makePrefixer("saltVerticalNavigationSubMenu");
|
|
13
|
+
const VerticalNavigationSubMenu = react.forwardRef(function VerticalNavigationSubMenu2(props, ref) {
|
|
14
|
+
const { children, className, ...rest } = props;
|
|
15
|
+
const targetWindow = window.useWindow();
|
|
16
|
+
styles.useComponentCssInjection({
|
|
17
|
+
testId: "salt-vertical-navigation-sub-menu",
|
|
18
|
+
css: VerticalNavigationSubMenu$1,
|
|
19
|
+
window: targetWindow
|
|
20
|
+
});
|
|
21
|
+
const [directIcons, setDirectIcons] = react.useState([]);
|
|
22
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SubMenuContext.SubMenuProvider, { directIcons, setDirectIcons, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
23
|
+
"ul",
|
|
24
|
+
{
|
|
25
|
+
ref,
|
|
26
|
+
className: clsx.clsx(withBaseName(), className),
|
|
27
|
+
"data-has-direct-icons": directIcons.length > 0,
|
|
28
|
+
...rest,
|
|
29
|
+
children
|
|
30
|
+
}
|
|
31
|
+
) });
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
exports.VerticalNavigationSubMenu = VerticalNavigationSubMenu;
|
|
35
|
+
//# sourceMappingURL=VerticalNavigationSubMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationSubMenu.js","sources":["../src/vertical-navigation/VerticalNavigationSubMenu.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useState } from \"react\";\nimport { SubMenuProvider } from \"./SubMenuContext\";\nimport verticalNavigationSubMenuCss from \"./VerticalNavigationSubMenu.css\";\n\nexport interface VerticalNavigationSubMenuProps\n extends ComponentPropsWithoutRef<\"ul\"> {}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationSubMenu\");\n\nexport const VerticalNavigationSubMenu = forwardRef<\n HTMLUListElement,\n VerticalNavigationSubMenuProps\n>(function VerticalNavigationSubMenu(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-vertical-navigation-sub-menu\",\n css: verticalNavigationSubMenuCss,\n window: targetWindow,\n });\n\n const [directIcons, setDirectIcons] = useState<string[]>([]);\n\n return (\n <SubMenuProvider directIcons={directIcons} setDirectIcons={setDirectIcons}>\n <ul\n ref={ref}\n className={clsx(withBaseName(), className)}\n data-has-direct-icons={directIcons.length > 0}\n {...rest}\n >\n {children}\n </ul>\n </SubMenuProvider>\n );\n});\n"],"names":["makePrefixer","forwardRef","VerticalNavigationSubMenu","useWindow","useComponentCssInjection","verticalNavigationSubMenuCss","useState","jsx","SubMenuProvider","clsx"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,+BAA+B,CAAA;AAE1D,MAAM,yBAA4B,GAAAC,gBAAA,CAGvC,SAASC,0BAAAA,CAA0B,OAAO,GAAK,EAAA;AAC/C,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mCAAA;AAAA,IACR,GAAK,EAAAC,2BAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAC,cAAA,CAAmB,EAAE,CAAA;AAE3D,EACE,uBAAAC,cAAA,CAACC,8BAAgB,EAAA,EAAA,WAAA,EAA0B,cACzC,EAAA,QAAA,kBAAAD,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAE,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,uBAAA,EAAuB,YAAY,MAAS,GAAA,CAAA;AAAA,MAC3C,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer, useControlled } from '@salt-ds/core';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { forwardRef, useState, useCallback, useMemo } from 'react';
|
|
5
|
+
import { CollapsibleContext } from './CollapsibleContext.js';
|
|
6
|
+
|
|
7
|
+
const withBaseName = makePrefixer("saltCollapsible");
|
|
8
|
+
const Collapsible = forwardRef(
|
|
9
|
+
function Collapsible2(props, ref) {
|
|
10
|
+
const {
|
|
11
|
+
className,
|
|
12
|
+
open: openProp,
|
|
13
|
+
defaultOpen,
|
|
14
|
+
onOpenChange,
|
|
15
|
+
...rest
|
|
16
|
+
} = props;
|
|
17
|
+
const [open, setOpenState] = useControlled({
|
|
18
|
+
default: Boolean(defaultOpen),
|
|
19
|
+
controlled: openProp,
|
|
20
|
+
name: "Collapsible",
|
|
21
|
+
state: "open"
|
|
22
|
+
});
|
|
23
|
+
const [panelId, setPanelId] = useState(void 0);
|
|
24
|
+
const setOpen = useCallback(
|
|
25
|
+
(event, newOpen) => {
|
|
26
|
+
setOpenState(newOpen);
|
|
27
|
+
onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
|
|
28
|
+
},
|
|
29
|
+
[onOpenChange]
|
|
30
|
+
);
|
|
31
|
+
const contextValue = useMemo(
|
|
32
|
+
() => ({
|
|
33
|
+
open,
|
|
34
|
+
setOpen,
|
|
35
|
+
panelId,
|
|
36
|
+
setPanelId
|
|
37
|
+
}),
|
|
38
|
+
[open, setOpen, panelId]
|
|
39
|
+
);
|
|
40
|
+
return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...rest }) });
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
export { Collapsible };
|
|
45
|
+
//# sourceMappingURL=Collapsible.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.js","sources":["../src/collapsible/Collapsible.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { CollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n /**\n * Whether the accordion is open.\n */\n open?: boolean;\n /**\n * Whether the accordion is open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback fired when the accordion is opened or closed.\n */\n onOpenChange?: (\n event: SyntheticEvent<HTMLButtonElement>,\n open: boolean,\n ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsible\");\n\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n function Collapsible(props, ref) {\n const {\n className,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...rest\n } = props;\n\n const [open, setOpenState] = useControlled({\n default: Boolean(defaultOpen),\n controlled: openProp,\n name: \"Collapsible\",\n state: \"open\",\n });\n\n const [panelId, setPanelId] = useState<string | undefined>(undefined);\n\n const setOpen = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>, newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(event, newOpen);\n },\n [onOpenChange],\n );\n\n const contextValue = useMemo(\n () => ({\n open,\n setOpen,\n panelId,\n setPanelId,\n }),\n [open, setOpen, panelId],\n );\n\n return (\n <CollapsibleContext.Provider value={contextValue}>\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n </CollapsibleContext.Provider>\n );\n },\n);\n"],"names":["Collapsible"],"mappings":";;;;;;AA+BA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAE5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,WAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,CAAC,IAAA,EAAM,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,MACzC,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,UAAY,EAAA,QAAA;AAAA,MACZ,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA6B,MAAS,CAAA;AAEpE,IAAA,MAAM,OAAU,GAAA,WAAA;AAAA,MACd,CAAC,OAA0C,OAAqB,KAAA;AAC9D,QAAA,YAAA,CAAa,OAAO,CAAA;AACpB,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAO,EAAA,OAAA,CAAA;AAAA,OACxB;AAAA,MACA,CAAC,YAAY;AAAA,KACf;AAEA,IAAA,MAAM,YAAe,GAAA,OAAA;AAAA,MACnB,OAAO;AAAA,QACL,IAAA;AAAA,QACA,OAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,IAAM,EAAA,OAAA,EAAS,OAAO;AAAA,KACzB;AAEA,IAAA,2BACG,kBAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,cAClC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,IAAA,CAAK,cAAgB,EAAA,SAAS,GAAG,GAAW,EAAA,GAAG,MAAM,CACvE,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { createContext } from '@salt-ds/core';
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
|
|
4
|
+
const CollapsibleContext = createContext(
|
|
5
|
+
"CollapsibleContext",
|
|
6
|
+
{
|
|
7
|
+
open: false,
|
|
8
|
+
setOpen: () => {
|
|
9
|
+
},
|
|
10
|
+
panelId: void 0,
|
|
11
|
+
setPanelId: () => {
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
function useCollapsibleContext() {
|
|
16
|
+
return useContext(CollapsibleContext);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { CollapsibleContext, useCollapsibleContext };
|
|
20
|
+
//# sourceMappingURL=CollapsibleContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContext.js","sources":["../src/collapsible/CollapsibleContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { type SyntheticEvent, useContext } from \"react\";\n\nexport type CollapsibleContextValue = {\n open: boolean;\n setOpen: (event: SyntheticEvent<HTMLButtonElement>, open: boolean) => void;\n panelId?: string;\n setPanelId?: (panelId: string) => void;\n};\n\nexport const CollapsibleContext = createContext<CollapsibleContextValue>(\n \"CollapsibleContext\",\n {\n open: false,\n setOpen: () => {},\n panelId: undefined,\n setPanelId: () => {},\n },\n);\n\nexport function useCollapsibleContext() {\n return useContext(CollapsibleContext);\n}\n"],"names":[],"mappings":";;;AAUO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,IAAM,EAAA,KAAA;AAAA,IACN,SAAS,MAAM;AAAA,KAAC;AAAA,IAChB,OAAS,EAAA,MAAA;AAAA,IACT,YAAY,MAAM;AAAA;AAAC;AAEvB;AAEO,SAAS,qBAAwB,GAAA;AACtC,EAAA,OAAO,WAAW,kBAAkB,CAAA;AACtC;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltCollapsiblePanel {\n display: grid;\n transition:\n grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n opacity var(--salt-duration-perceptible) ease-in-out,\n visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n grid-template-rows: 1fr;\n opacity: 1;\n visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n overflow: hidden;\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=CollapsiblePanel.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsiblePanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer, useId } from '@salt-ds/core';
|
|
3
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
+
import { useWindow } from '@salt-ds/window';
|
|
5
|
+
import { clsx } from 'clsx';
|
|
6
|
+
import { useEffect } from 'react';
|
|
7
|
+
import { useCollapsibleContext } from './CollapsibleContext.js';
|
|
8
|
+
import css_248z from './CollapsiblePanel.css.js';
|
|
9
|
+
|
|
10
|
+
const withBaseName = makePrefixer("saltCollapsiblePanel");
|
|
11
|
+
const CollapsiblePanel = (props) => {
|
|
12
|
+
const { children, className, id: idProp, ...rest } = props;
|
|
13
|
+
const targetWindow = useWindow();
|
|
14
|
+
useComponentCssInjection({
|
|
15
|
+
testId: "salt-collapsible-panel",
|
|
16
|
+
css: css_248z,
|
|
17
|
+
window: targetWindow
|
|
18
|
+
});
|
|
19
|
+
const id = useId(idProp);
|
|
20
|
+
const { open, setPanelId } = useCollapsibleContext();
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (id) {
|
|
23
|
+
setPanelId == null ? void 0 : setPanelId(id);
|
|
24
|
+
}
|
|
25
|
+
}, [id, setPanelId]);
|
|
26
|
+
return /* @__PURE__ */ jsx(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
className: clsx(withBaseName(), className),
|
|
30
|
+
id,
|
|
31
|
+
"aria-hidden": !open ? "true" : void 0,
|
|
32
|
+
hidden: !open,
|
|
33
|
+
...rest,
|
|
34
|
+
children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children })
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export { CollapsiblePanel };
|
|
40
|
+
//# sourceMappingURL=CollapsiblePanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect } from \"react\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps\n extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = (props: CollapsiblePanelProps) => {\n const { children, className, id: idProp, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-collapsible-panel\",\n css: collapsiblePanelCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n const { open, setPanelId } = useCollapsibleContext();\n\n useEffect(() => {\n if (id) {\n setPanelId?.(id);\n }\n }, [id, setPanelId]);\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n id={id}\n aria-hidden={!open ? \"true\" : undefined}\n hidden={!open}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>{children}</div>\n </div>\n );\n};\n"],"names":["collapsiblePanelCss"],"mappings":";;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAE3C,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,IAAI,MAAQ,EAAA,GAAG,MAAS,GAAA,KAAA;AAErD,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,UAAW,EAAA,GAAI,qBAAsB,EAAA;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAI,EAAA;AACN,MAAa,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAA,EAAA,CAAA;AAAA;AACf,GACC,EAAA,CAAC,EAAI,EAAA,UAAU,CAAC,CAAA;AAEnB,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA;AAAA,MACA,aAAA,EAAa,CAAC,IAAA,GAAO,MAAS,GAAA,MAAA;AAAA,MAC9B,QAAQ,CAAC,IAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAS,EAAA;AAAA;AAAA,GACnD;AAEJ;;;;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer, mergeProps } from '@salt-ds/core';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { forwardRef, isValidElement, cloneElement } from 'react';
|
|
5
|
+
import { useCollapsibleContext } from './CollapsibleContext.js';
|
|
6
|
+
|
|
7
|
+
const withBaseName = makePrefixer("saltCollapsibleTrigger");
|
|
8
|
+
const CollapsibleTrigger = forwardRef(function CollapsibleTrigger2(props, ref) {
|
|
9
|
+
const { children, className, onClick} = props;
|
|
10
|
+
const { open, setOpen, panelId } = useCollapsibleContext();
|
|
11
|
+
const handleClick = (event) => {
|
|
12
|
+
setOpen(event, !open);
|
|
13
|
+
onClick == null ? void 0 : onClick(event);
|
|
14
|
+
};
|
|
15
|
+
if (!children || !isValidElement(children)) {
|
|
16
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
17
|
+
}
|
|
18
|
+
return cloneElement(children, {
|
|
19
|
+
...mergeProps(
|
|
20
|
+
{
|
|
21
|
+
className: clsx(withBaseName(), className),
|
|
22
|
+
type: "button",
|
|
23
|
+
"aria-expanded": open,
|
|
24
|
+
"aria-controls": panelId,
|
|
25
|
+
onClick: handleClick
|
|
26
|
+
},
|
|
27
|
+
children.props
|
|
28
|
+
),
|
|
29
|
+
ref
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
export { CollapsibleTrigger };
|
|
34
|
+
//# sourceMappingURL=CollapsibleTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleTrigger.js","sources":["../src/collapsible/CollapsibleTrigger.tsx"],"sourcesContent":["import { makePrefixer, mergeProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n cloneElement,\n forwardRef,\n isValidElement,\n type MouseEvent,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleTriggerProps\n extends ComponentPropsWithoutRef<\"button\"> {\n children: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsibleTrigger\");\n\nexport const CollapsibleTrigger = forwardRef<\n HTMLButtonElement,\n CollapsibleTriggerProps\n>(function CollapsibleTrigger(props, ref) {\n const { children, className, onClick, ...rest } = props;\n\n const { open, setOpen, panelId } = useCollapsibleContext();\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n setOpen(event, !open);\n onClick?.(event);\n };\n\n if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n // Should we log or throw error?\n return <>{children}</>;\n }\n\n return cloneElement(children, {\n ...mergeProps(\n {\n className: clsx(withBaseName(), className),\n type: \"button\",\n \"aria-expanded\": open,\n \"aria-controls\": panelId,\n onClick: handleClick,\n },\n children.props,\n ),\n ref,\n });\n});\n"],"names":["CollapsibleTrigger"],"mappings":";;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAqB,GAAA,UAAA,CAGhC,SAASA,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,OAAiB,CAAI,GAAA,KAAA;AAElD,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAY,qBAAsB,EAAA;AAEzD,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAQ,OAAA,CAAA,KAAA,EAAO,CAAC,IAAI,CAAA;AACpB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAG,EAAA;AAElE,IAAA,uCAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EAAA,OAAO,aAAa,QAAU,EAAA;AAAA,IAC5B,GAAG,UAAA;AAAA,MACD;AAAA,QACE,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAM,EAAA,QAAA;AAAA,QACN,eAAiB,EAAA,IAAA;AAAA,QACjB,eAAiB,EAAA,OAAA;AAAA,QACjB,OAAS,EAAA;AAAA,OACX;AAAA,MACA,QAAS,CAAA;AAAA,KACX;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;;;;"}
|
package/dist-es/index.js
CHANGED
|
@@ -11,6 +11,9 @@ export { useCalendar } from './calendar/useCalendar.js';
|
|
|
11
11
|
export { useCalendarDay } from './calendar/useCalendarDay.js';
|
|
12
12
|
export { isDateRangeSelection, useCalendarSelection, useCalendarSelectionDay } from './calendar/useCalendarSelection.js';
|
|
13
13
|
export { CascadingMenu } from './cascading-menu/CascadingMenu.js';
|
|
14
|
+
export { Collapsible } from './collapsible/Collapsible.js';
|
|
15
|
+
export { CollapsiblePanel } from './collapsible/CollapsiblePanel.js';
|
|
16
|
+
export { CollapsibleTrigger } from './collapsible/CollapsibleTrigger.js';
|
|
14
17
|
export { Color } from './color-chooser/Color.js';
|
|
15
18
|
export { ColorChooser } from './color-chooser/ColorChooser.js';
|
|
16
19
|
export { convertColorMapValueToHex, getColorNameByHexValue, getHexValue, hexValueWithoutAlpha, isValidHex } from './color-chooser/ColorHelpers.js';
|
|
@@ -125,6 +128,13 @@ export { StaticListItemContent } from './static-list/StaticListItemContent.js';
|
|
|
125
128
|
export { SystemStatus } from './system-status/SystemStatus.js';
|
|
126
129
|
export { SystemStatusActions } from './system-status/SystemStatusActions.js';
|
|
127
130
|
export { SystemStatusContent } from './system-status/SystemStatusContent.js';
|
|
131
|
+
export { Table, withTableBaseName } from './table/Table.js';
|
|
132
|
+
export { TBody } from './table/TBody.js';
|
|
133
|
+
export { TD } from './table/TD.js';
|
|
134
|
+
export { TFoot } from './table/TFoot.js';
|
|
135
|
+
export { TH } from './table/TH.js';
|
|
136
|
+
export { THead } from './table/THead.js';
|
|
137
|
+
export { TR } from './table/TR.js';
|
|
128
138
|
export { Tab } from './tabs/Tab.js';
|
|
129
139
|
export { TabActivationIndicator } from './tabs/TabActivationIndicator.js';
|
|
130
140
|
export { TabPanel } from './tabs/TabPanel.js';
|
|
@@ -148,6 +158,13 @@ export { ToolbarButton } from './toolbar/ToolbarButton.js';
|
|
|
148
158
|
export { Tooltray } from './toolbar/Tooltray.js';
|
|
149
159
|
export { ToolbarField } from './toolbar/toolbar-field/ToolbarField.js';
|
|
150
160
|
export { Tree } from './tree/Tree.js';
|
|
161
|
+
export { VerticalNavigation } from './vertical-navigation/VerticalNavigation.js';
|
|
162
|
+
export { VerticalNavigationItem, useVerticalNavigationItem } from './vertical-navigation/VerticalNavigationItem.js';
|
|
163
|
+
export { VerticalNavigationItemContent } from './vertical-navigation/VerticalNavigationItemContent.js';
|
|
164
|
+
export { VerticalNavigationItemExpansionIcon } from './vertical-navigation/VerticalNavigationItemExpansionIcon.js';
|
|
165
|
+
export { VerticalNavigationItemLabel } from './vertical-navigation/VerticalNavigationItemLabel.js';
|
|
166
|
+
export { VerticalNavigationItemTrigger } from './vertical-navigation/VerticalNavigationItemTrigger.js';
|
|
167
|
+
export { VerticalNavigationSubMenu } from './vertical-navigation/VerticalNavigationSubMenu.js';
|
|
151
168
|
export { ElectronWindow } from './window/ElectronWindow.js';
|
|
152
169
|
export { Window, WindowContext, isDesktop, useWindow } from './window/WindowContext.js';
|
|
153
170
|
//# sourceMappingURL=index.js.map
|
package/dist-es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
|
+
import { useWindow } from '@salt-ds/window';
|
|
4
|
+
import { clsx } from 'clsx';
|
|
5
|
+
import { forwardRef } from 'react';
|
|
6
|
+
import { withTableBaseName } from './Table.js';
|
|
7
|
+
import css_248z from './Table.css.js';
|
|
8
|
+
|
|
9
|
+
const TBody = forwardRef(
|
|
10
|
+
function TBody2({ children, className, ...rest }, ref) {
|
|
11
|
+
const targetWindow = useWindow();
|
|
12
|
+
useComponentCssInjection({
|
|
13
|
+
testId: "salt-table-tbody",
|
|
14
|
+
css: css_248z,
|
|
15
|
+
window: targetWindow
|
|
16
|
+
});
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
"tbody",
|
|
19
|
+
{
|
|
20
|
+
ref,
|
|
21
|
+
className: clsx(withTableBaseName("tbody"), className),
|
|
22
|
+
...rest,
|
|
23
|
+
children
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
export { TBody };
|
|
30
|
+
//# sourceMappingURL=TBody.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TBody.js","sources":["../src/table/TBody.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TBodyProps extends ComponentPropsWithoutRef<\"tbody\"> {}\n\nexport const TBody = forwardRef<HTMLTableSectionElement, TBodyProps>(\n function TBody({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-tbody\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <tbody\n ref={ref}\n className={clsx(withTableBaseName(\"tbody\"), className)}\n {...rest}\n >\n {children}\n </tbody>\n );\n },\n);\n"],"names":["TBody","tableCss"],"mappings":";;;;;;;;AAUO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,SAASA,OAAM,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACpD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,iBAAkB,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,QACpD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
|
+
import { useWindow } from '@salt-ds/window';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { forwardRef } from 'react';
|
|
6
|
+
import { withTableBaseName } from './Table.js';
|
|
7
|
+
import css_248z from './Table.css.js';
|
|
8
|
+
|
|
9
|
+
const TD = forwardRef(function TD2({ children, className, ...rest }, ref) {
|
|
10
|
+
const targetWindow = useWindow();
|
|
11
|
+
useComponentCssInjection({
|
|
12
|
+
testId: "salt-table-td",
|
|
13
|
+
css: css_248z,
|
|
14
|
+
window: targetWindow
|
|
15
|
+
});
|
|
16
|
+
return /* @__PURE__ */ jsx(
|
|
17
|
+
"td",
|
|
18
|
+
{
|
|
19
|
+
ref,
|
|
20
|
+
className: clsx(withTableBaseName("td"), className),
|
|
21
|
+
...rest,
|
|
22
|
+
children
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
export { TD };
|
|
28
|
+
//# sourceMappingURL=TD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TD.js","sources":["../src/table/TD.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TDProps extends ComponentPropsWithoutRef<\"td\"> {}\n\nexport const TD = forwardRef<HTMLTableCellElement, TDProps>(function TD(\n { children, className, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-td\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <td\n ref={ref}\n className={clsx(withTableBaseName(\"td\"), className)}\n {...rest}\n >\n {children}\n </td>\n );\n});\n"],"names":["TD","tableCss"],"mappings":";;;;;;;;AAUa,MAAA,EAAA,GAAK,UAA0C,CAAA,SAASA,GACnE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,iBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
|
+
import { useWindow } from '@salt-ds/window';
|
|
4
|
+
import { clsx } from 'clsx';
|
|
5
|
+
import { forwardRef } from 'react';
|
|
6
|
+
import { withTableBaseName } from './Table.js';
|
|
7
|
+
import css_248z from './Table.css.js';
|
|
8
|
+
|
|
9
|
+
const TFoot = forwardRef(
|
|
10
|
+
function TFoot2({
|
|
11
|
+
children,
|
|
12
|
+
className,
|
|
13
|
+
sticky = false,
|
|
14
|
+
variant,
|
|
15
|
+
divider = "primary",
|
|
16
|
+
...rest
|
|
17
|
+
}, ref) {
|
|
18
|
+
const targetWindow = useWindow();
|
|
19
|
+
useComponentCssInjection({
|
|
20
|
+
testId: "salt-table-tfoot",
|
|
21
|
+
css: css_248z,
|
|
22
|
+
window: targetWindow
|
|
23
|
+
});
|
|
24
|
+
return /* @__PURE__ */ jsx(
|
|
25
|
+
"tfoot",
|
|
26
|
+
{
|
|
27
|
+
ref,
|
|
28
|
+
className: clsx(
|
|
29
|
+
withTableBaseName("tfoot"),
|
|
30
|
+
{ [withTableBaseName(`tfoot-${variant}`)]: variant },
|
|
31
|
+
{ [withTableBaseName("tfoot-sticky")]: sticky },
|
|
32
|
+
{ [withTableBaseName(`tfoot-divider-${divider}`)]: divider },
|
|
33
|
+
className
|
|
34
|
+
),
|
|
35
|
+
...rest,
|
|
36
|
+
children
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
|
|
42
|
+
export { TFoot };
|
|
43
|
+
//# sourceMappingURL=TFoot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TFoot.js","sources":["../src/table/TFoot.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TFootProps extends ComponentPropsWithoutRef<\"tfoot\"> {\n /**\n * If footer is positioned with sticky styling.\n * @default false\n */\n sticky?: boolean;\n /**\n * Divider styling variant. Defaults to \"primary\";\n * @default primary\n */\n divider?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n /**\n * Styling variant for footer.\n * If undefined, will match variant of parent Table component's variant.\n * @default undefined\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const TFoot = forwardRef<HTMLTableSectionElement, TFootProps>(\n function TFoot(\n {\n children,\n className,\n sticky = false,\n variant,\n divider = \"primary\",\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-tfoot\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <tfoot\n ref={ref}\n className={clsx(\n withTableBaseName(\"tfoot\"),\n { [withTableBaseName(`tfoot-${variant}`)]: variant },\n { [withTableBaseName(\"tfoot-sticky\")]: sticky },\n { [withTableBaseName(`tfoot-divider-${divider}`)]: divider },\n className,\n )}\n {...rest}\n >\n {children}\n </tfoot>\n );\n },\n);\n"],"names":["TFoot","tableCss"],"mappings":";;;;;;;;AA2BO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,SAASA,MACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,kBAAkB,OAAO,CAAA;AAAA,UACzB,EAAE,CAAC,iBAAkB,CAAA,CAAA,MAAA,EAAS,OAAO,CAAE,CAAA,CAAC,GAAG,OAAQ,EAAA;AAAA,UACnD,EAAE,CAAC,iBAAA,CAAkB,cAAc,CAAC,GAAG,MAAO,EAAA;AAAA,UAC9C,EAAE,CAAC,iBAAkB,CAAA,CAAA,cAAA,EAAiB,OAAO,CAAE,CAAA,CAAC,GAAG,OAAQ,EAAA;AAAA,UAC3D;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
|
+
import { useWindow } from '@salt-ds/window';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { forwardRef } from 'react';
|
|
6
|
+
import { withTableBaseName } from './Table.js';
|
|
7
|
+
import css_248z from './Table.css.js';
|
|
8
|
+
|
|
9
|
+
const TH = forwardRef(function TH2({ children, className, ...rest }, ref) {
|
|
10
|
+
const targetWindow = useWindow();
|
|
11
|
+
useComponentCssInjection({
|
|
12
|
+
testId: "salt-table-th",
|
|
13
|
+
css: css_248z,
|
|
14
|
+
window: targetWindow
|
|
15
|
+
});
|
|
16
|
+
return /* @__PURE__ */ jsx(
|
|
17
|
+
"th",
|
|
18
|
+
{
|
|
19
|
+
ref,
|
|
20
|
+
className: clsx(withTableBaseName("th"), className),
|
|
21
|
+
...rest,
|
|
22
|
+
children
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
export { TH };
|
|
28
|
+
//# sourceMappingURL=TH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TH.js","sources":["../src/table/TH.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface THProps extends ComponentPropsWithoutRef<\"th\"> {}\n\nexport const TH = forwardRef<HTMLTableCellElement, THProps>(function TH(\n { children, className, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-th\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <th\n ref={ref}\n className={clsx(withTableBaseName(\"th\"), className)}\n {...rest}\n >\n {children}\n </th>\n );\n});\n"],"names":["TH","tableCss"],"mappings":";;;;;;;;AAUa,MAAA,EAAA,GAAK,UAA0C,CAAA,SAASA,GACnE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,iBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|