@salt-ds/lab 1.0.0-alpha.72 → 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 +36 -0
- package/css/salt-lab.css +332 -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/static-list/StaticList.css.js +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/static-list/StaticList.css.js +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
package/dist-cjs/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,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var Table$1 = require('./Table.js');
|
|
9
|
+
var Table = require('./Table.css.js');
|
|
10
|
+
|
|
11
|
+
const TBody = react.forwardRef(
|
|
12
|
+
function TBody2({ children, className, ...rest }, ref) {
|
|
13
|
+
const targetWindow = window.useWindow();
|
|
14
|
+
styles.useComponentCssInjection({
|
|
15
|
+
testId: "salt-table-tbody",
|
|
16
|
+
css: Table,
|
|
17
|
+
window: targetWindow
|
|
18
|
+
});
|
|
19
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
20
|
+
"tbody",
|
|
21
|
+
{
|
|
22
|
+
ref,
|
|
23
|
+
className: clsx.clsx(Table$1.withTableBaseName("tbody"), className),
|
|
24
|
+
...rest,
|
|
25
|
+
children
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
exports.TBody = TBody;
|
|
32
|
+
//# 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":["forwardRef","TBody","useWindow","useComponentCssInjection","tableCss","jsx","clsx","withTableBaseName"],"mappings":";;;;;;;;;;AAUO,MAAM,KAAQ,GAAAA,gBAAA;AAAA,EACnB,SAASC,OAAM,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACpD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,KAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA,CAAKC,yBAAkB,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,QACpD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var Table$1 = require('./Table.js');
|
|
9
|
+
var Table = require('./Table.css.js');
|
|
10
|
+
|
|
11
|
+
const TD = react.forwardRef(function TD2({ children, className, ...rest }, ref) {
|
|
12
|
+
const targetWindow = window.useWindow();
|
|
13
|
+
styles.useComponentCssInjection({
|
|
14
|
+
testId: "salt-table-td",
|
|
15
|
+
css: Table,
|
|
16
|
+
window: targetWindow
|
|
17
|
+
});
|
|
18
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
|
+
"td",
|
|
20
|
+
{
|
|
21
|
+
ref,
|
|
22
|
+
className: clsx(Table$1.withTableBaseName("td"), className),
|
|
23
|
+
...rest,
|
|
24
|
+
children
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
exports.TD = TD;
|
|
30
|
+
//# 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":["forwardRef","TD","useWindow","useComponentCssInjection","tableCss","jsx","withTableBaseName"],"mappings":";;;;;;;;;;AAUa,MAAA,EAAA,GAAKA,gBAA0C,CAAA,SAASC,GACnE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAKC,yBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var Table$1 = require('./Table.js');
|
|
9
|
+
var Table = require('./Table.css.js');
|
|
10
|
+
|
|
11
|
+
const TFoot = react.forwardRef(
|
|
12
|
+
function TFoot2({
|
|
13
|
+
children,
|
|
14
|
+
className,
|
|
15
|
+
sticky = false,
|
|
16
|
+
variant,
|
|
17
|
+
divider = "primary",
|
|
18
|
+
...rest
|
|
19
|
+
}, ref) {
|
|
20
|
+
const targetWindow = window.useWindow();
|
|
21
|
+
styles.useComponentCssInjection({
|
|
22
|
+
testId: "salt-table-tfoot",
|
|
23
|
+
css: Table,
|
|
24
|
+
window: targetWindow
|
|
25
|
+
});
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
+
"tfoot",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
className: clsx.clsx(
|
|
31
|
+
Table$1.withTableBaseName("tfoot"),
|
|
32
|
+
{ [Table$1.withTableBaseName(`tfoot-${variant}`)]: variant },
|
|
33
|
+
{ [Table$1.withTableBaseName("tfoot-sticky")]: sticky },
|
|
34
|
+
{ [Table$1.withTableBaseName(`tfoot-divider-${divider}`)]: divider },
|
|
35
|
+
className
|
|
36
|
+
),
|
|
37
|
+
...rest,
|
|
38
|
+
children
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
exports.TFoot = TFoot;
|
|
45
|
+
//# 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":["forwardRef","TFoot","useWindow","useComponentCssInjection","tableCss","jsx","clsx","withTableBaseName"],"mappings":";;;;;;;;;;AA2BO,MAAM,KAAQ,GAAAA,gBAAA;AAAA,EACnB,SAASC,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,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,KAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA;AAAA,UACTC,0BAAkB,OAAO,CAAA;AAAA,UACzB,EAAE,CAACA,yBAAkB,CAAA,CAAA,MAAA,EAAS,OAAO,CAAE,CAAA,CAAC,GAAG,OAAQ,EAAA;AAAA,UACnD,EAAE,CAACA,yBAAA,CAAkB,cAAc,CAAC,GAAG,MAAO,EAAA;AAAA,UAC9C,EAAE,CAACA,yBAAkB,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,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var Table$1 = require('./Table.js');
|
|
9
|
+
var Table = require('./Table.css.js');
|
|
10
|
+
|
|
11
|
+
const TH = react.forwardRef(function TH2({ children, className, ...rest }, ref) {
|
|
12
|
+
const targetWindow = window.useWindow();
|
|
13
|
+
styles.useComponentCssInjection({
|
|
14
|
+
testId: "salt-table-th",
|
|
15
|
+
css: Table,
|
|
16
|
+
window: targetWindow
|
|
17
|
+
});
|
|
18
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
|
+
"th",
|
|
20
|
+
{
|
|
21
|
+
ref,
|
|
22
|
+
className: clsx(Table$1.withTableBaseName("th"), className),
|
|
23
|
+
...rest,
|
|
24
|
+
children
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
exports.TH = TH;
|
|
30
|
+
//# 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":["forwardRef","TH","useWindow","useComponentCssInjection","tableCss","jsx","withTableBaseName"],"mappings":";;;;;;;;;;AAUa,MAAA,EAAA,GAAKA,gBAA0C,CAAA,SAASC,GACnE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAKC,yBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var Table$1 = require('./Table.js');
|
|
9
|
+
var Table = require('./Table.css.js');
|
|
10
|
+
|
|
11
|
+
const THead = react.forwardRef(
|
|
12
|
+
function THead2({
|
|
13
|
+
children,
|
|
14
|
+
className,
|
|
15
|
+
sticky = false,
|
|
16
|
+
variant,
|
|
17
|
+
divider = "primary",
|
|
18
|
+
...rest
|
|
19
|
+
}, ref) {
|
|
20
|
+
const targetWindow = window.useWindow();
|
|
21
|
+
styles.useComponentCssInjection({
|
|
22
|
+
testId: "salt-table-thead",
|
|
23
|
+
css: Table,
|
|
24
|
+
window: targetWindow
|
|
25
|
+
});
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
+
"thead",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
className: clsx.clsx(
|
|
31
|
+
Table$1.withTableBaseName("thead"),
|
|
32
|
+
{ [Table$1.withTableBaseName(`thead-${variant}`)]: variant },
|
|
33
|
+
{ [Table$1.withTableBaseName("thead-sticky")]: sticky },
|
|
34
|
+
{ [Table$1.withTableBaseName(`thead-divider-${divider}`)]: divider },
|
|
35
|
+
className
|
|
36
|
+
),
|
|
37
|
+
...rest,
|
|
38
|
+
children
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
exports.THead = THead;
|
|
45
|
+
//# sourceMappingURL=THead.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"THead.js","sources":["../src/table/THead.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 THeadProps extends ComponentPropsWithoutRef<\"thead\"> {\n /**\n * If header 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 header.\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 THead = forwardRef<HTMLTableSectionElement, THeadProps>(\n function THead(\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-thead\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <thead\n ref={ref}\n className={clsx(\n withTableBaseName(\"thead\"),\n { [withTableBaseName(`thead-${variant}`)]: variant },\n { [withTableBaseName(\"thead-sticky\")]: sticky },\n { [withTableBaseName(`thead-divider-${divider}`)]: divider },\n className,\n )}\n {...rest}\n >\n {children}\n </thead>\n );\n },\n);\n"],"names":["forwardRef","THead","useWindow","useComponentCssInjection","tableCss","jsx","clsx","withTableBaseName"],"mappings":";;;;;;;;;;AA2BO,MAAM,KAAQ,GAAAA,gBAAA;AAAA,EACnB,SAASC,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,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,KAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA;AAAA,UACTC,0BAAkB,OAAO,CAAA;AAAA,UACzB,EAAE,CAACA,yBAAkB,CAAA,CAAA,MAAA,EAAS,OAAO,CAAE,CAAA,CAAC,GAAG,OAAQ,EAAA;AAAA,UACnD,EAAE,CAACA,yBAAA,CAAkB,cAAc,CAAC,GAAG,MAAO,EAAA;AAAA,UAC9C,EAAE,CAACA,yBAAkB,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,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var Table$1 = require('./Table.js');
|
|
9
|
+
var Table = require('./Table.css.js');
|
|
10
|
+
|
|
11
|
+
const TR = react.forwardRef(function TR2({ children, className, ...rest }, ref) {
|
|
12
|
+
const targetWindow = window.useWindow();
|
|
13
|
+
styles.useComponentCssInjection({
|
|
14
|
+
testId: "salt-table-tr",
|
|
15
|
+
css: Table,
|
|
16
|
+
window: targetWindow
|
|
17
|
+
});
|
|
18
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
|
+
"tr",
|
|
20
|
+
{
|
|
21
|
+
ref,
|
|
22
|
+
className: clsx(Table$1.withTableBaseName("tr"), className),
|
|
23
|
+
...rest,
|
|
24
|
+
children
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
exports.TR = TR;
|
|
30
|
+
//# sourceMappingURL=TR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TR.js","sources":["../src/table/TR.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 TRProps extends ComponentPropsWithoutRef<\"tr\"> {}\n\nexport const TR = forwardRef<HTMLTableRowElement, TRProps>(function TR(\n { children, className, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-tr\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <tr\n ref={ref}\n className={clsx(withTableBaseName(\"tr\"), className)}\n {...rest}\n >\n {children}\n </tr>\n );\n});\n"],"names":["forwardRef","TR","useWindow","useComponentCssInjection","tableCss","jsx","withTableBaseName"],"mappings":";;;;;;;;;;AAUa,MAAA,EAAA,GAAKA,gBAAyC,CAAA,SAASC,GAClE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAKC,yBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/* Table: Main css class */\n.saltTable {\n --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n}\n\n.saltTable-primary {\n --table-background: var(--salt-container-primary-background);\n}\n\n.saltTable-secondary {\n --table-background: var(--salt-container-secondary-background);\n}\n\n.saltTable-tertiary {\n --table-background: var(--salt-container-tertiary-background);\n}\n\n.saltTable-divider-primary {\n --table-divider-color: var(--salt-separable-primary-borderColor);\n}\n\n.saltTable-divider-secondary {\n --table-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltTable-divider-tertiary {\n --table-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\n/* Zebra styling */\ntable.saltTable-zebra-primary tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable-zebra-secondary tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable {\n border-spacing: 0;\n border-radius: var(--salt-palette-corner, 0);\n border-collapse: collapse;\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n table-layout: fixed;\n width: 100%;\n}\n\n/* THead */\ntable.saltTable thead {\n border-start-start-radius: var(--salt-palette-corner);\n border-start-end-radius: var(--salt-palette-corner);\n color: var(--salt-content-secondary-foreground);\n height: var(--table-header-height);\n min-height: var(--table-header-height);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n line-height: var(--salt-text-label-lineHeight);\n white-space: nowrap;\n}\n\ntable.saltTable thead.saltTable-thead-sticky {\n position: sticky;\n top: 0;\n}\n\ntable.saltTable thead.saltTable-thead-primary tr {\n background: var(--salt-container-primary-background);\n}\n\ntable.saltTable thead.saltTable-thead-secondary tr {\n background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable thead.saltTable-thead-tertiary tr {\n background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable thead.saltTable-thead tr {\n border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable thead.saltTable-thead-divider-primary {\n --table-header-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-secondary {\n --table-header-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-tertiary {\n --table-header-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-none {\n --table-header-divider-color: transparent;\n}\n\n/* TFoot */\ntable.saltTable tfoot {\n border-end-start-radius: var(--salt-palette-corner);\n border-end-end-radius: var(--salt-palette-corner);\n color: var(--salt-content-primary-foreground);\n height: var(--table-footer-height);\n min-height: var(--table-footer-height);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-weight: var(--salt-text-fontWeight-strong);\n white-space: nowrap;\n}\n\ntable.saltTable tfoot.saltTable-tfoot-sticky {\n position: sticky;\n bottom: 0;\n}\n\ntable.saltTable tfoot.saltTable-tfoot tr {\n border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-primary tr {\n background: var(--salt-container-primary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-secondary tr {\n background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-tertiary tr {\n background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-primary tr {\n --table-footer-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-secondary tr {\n --table-footer-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {\n --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-none tr {\n --table-footer-divider-color: transparent;\n}\n\n/* TH */\ntable.saltTable th {\n overflow: hidden;\n padding: var(--salt-spacing-100);\n position: relative;\n text-align: start;\n}\n\n.table.saltTable th[scope=\"row\"] {\n font-weight: var(--salt-text-fontWeight-strong);\n line-height: var(--salt-text-lineHeight);\n}\n\ntable.saltTable th + th::before {\n --table-th-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-fixed-100));\n background: var(--salt-separable-tertiary-borderColor);\n content: \"\";\n position: absolute;\n z-index: 1;\n display: block;\n width: var(--salt-size-border);\n height: var(--table-th-separator-height);\n top: calc(50% - var(--table-th-separator-height) * 0.5);\n left: 0;\n}\n\n/* TR */\ntable.saltTable tr {\n background: var(--table-background);\n height: var(--table-row-height);\n min-height: var(--table-row-height);\n}\n\ntable.saltTable tbody tr:not(:last-child) {\n border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable-divider-none tbody tr {\n --table-divider-color: transparent;\n}\n\n/* TD */\ntable.saltTable td {\n height: 100%;\n padding: var(--salt-spacing-100);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Table.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,47 @@
|
|
|
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 Table$1 = require('./Table.css.js');
|
|
10
|
+
|
|
11
|
+
const withTableBaseName = core.makePrefixer("saltTable");
|
|
12
|
+
const Table = react.forwardRef(function Table2({
|
|
13
|
+
children,
|
|
14
|
+
className,
|
|
15
|
+
variant = "primary",
|
|
16
|
+
divider = "tertiary",
|
|
17
|
+
zebra,
|
|
18
|
+
...rest
|
|
19
|
+
}, ref) {
|
|
20
|
+
const targetWindow = window.useWindow();
|
|
21
|
+
styles.useComponentCssInjection({
|
|
22
|
+
testId: "salt-table",
|
|
23
|
+
css: Table$1,
|
|
24
|
+
window: targetWindow
|
|
25
|
+
});
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
+
"table",
|
|
28
|
+
{
|
|
29
|
+
className: clsx.clsx(
|
|
30
|
+
withTableBaseName(),
|
|
31
|
+
{
|
|
32
|
+
[withTableBaseName(variant)]: variant,
|
|
33
|
+
[withTableBaseName(`zebra-${zebra}`)]: zebra,
|
|
34
|
+
[withTableBaseName(`divider-${divider}`)]: divider
|
|
35
|
+
},
|
|
36
|
+
className
|
|
37
|
+
),
|
|
38
|
+
ref,
|
|
39
|
+
...rest,
|
|
40
|
+
children
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
exports.Table = Table;
|
|
46
|
+
exports.withTableBaseName = withTableBaseName;
|
|
47
|
+
//# sourceMappingURL=Table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../src/table/Table.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\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TableProps extends ComponentPropsWithoutRef<\"table\"> {\n /**\n * Styling variant. Defaults to \"primary\".\n * @default primary\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Divider styling variant. Defaults to \"tertiary\";\n * @default secondary\n */\n divider?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n /**\n * Zebra styling. Applies variant to every other row.\n * @default undefined\n */\n zebra?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const withTableBaseName = makePrefixer(\"saltTable\");\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n {\n children,\n className,\n variant = \"primary\",\n divider = \"tertiary\",\n zebra,\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <table\n className={clsx(\n withTableBaseName(),\n {\n [withTableBaseName(variant)]: variant,\n [withTableBaseName(`zebra-${zebra}`)]: zebra,\n [withTableBaseName(`divider-${divider}`)]: divider,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </table>\n );\n});\n"],"names":["makePrefixer","forwardRef","Table","useWindow","useComponentCssInjection","tableCss","jsx","clsx"],"mappings":";;;;;;;;;;AA0Ba,MAAA,iBAAA,GAAoBA,kBAAa,WAAW;AAE5C,MAAA,KAAA,GAAQC,gBAAyC,CAAA,SAASC,MACrE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,OAAU,GAAA,UAAA;AAAA,EACV,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,iBAAkB,EAAA;AAAA,QAClB;AAAA,UACE,CAAC,iBAAA,CAAkB,OAAO,CAAC,GAAG,OAAA;AAAA,UAC9B,CAAC,iBAAkB,CAAA,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAC,GAAG,KAAA;AAAA,UACvC,CAAC,iBAAkB,CAAA,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE,CAAC,GAAG;AAAA,SAC7C;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
|
|
7
|
+
const SubMenuContext = core.createContext(
|
|
8
|
+
"SubMenuContext",
|
|
9
|
+
{ depth: -1, iconPaddingCount: 0 }
|
|
10
|
+
);
|
|
11
|
+
const useSubMenuContext = () => {
|
|
12
|
+
return react.useContext(SubMenuContext);
|
|
13
|
+
};
|
|
14
|
+
function SubMenuProvider({
|
|
15
|
+
children,
|
|
16
|
+
directIcons,
|
|
17
|
+
setDirectIcons
|
|
18
|
+
}) {
|
|
19
|
+
const { depth, iconPaddingCount } = useSubMenuContext();
|
|
20
|
+
const context = react.useMemo(
|
|
21
|
+
() => ({
|
|
22
|
+
depth: depth + 1,
|
|
23
|
+
iconPaddingCount: iconPaddingCount + (directIcons.length > 0 ? 1 : 0),
|
|
24
|
+
setDirectIcons
|
|
25
|
+
}),
|
|
26
|
+
[depth, iconPaddingCount, directIcons, setDirectIcons]
|
|
27
|
+
);
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SubMenuContext.Provider, { value: context, children });
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
exports.SubMenuContext = SubMenuContext;
|
|
32
|
+
exports.SubMenuProvider = SubMenuProvider;
|
|
33
|
+
exports.useSubMenuContext = useSubMenuContext;
|
|
34
|
+
//# sourceMappingURL=SubMenuContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SubMenuContext.js","sources":["../src/vertical-navigation/SubMenuContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n type Dispatch,\n type ReactNode,\n type SetStateAction,\n useContext,\n useMemo,\n} from \"react\";\n\ntype SubMenuContextValue = {\n depth: number;\n iconPaddingCount: number;\n setDirectIcons?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport const SubMenuContext = createContext<SubMenuContextValue>(\n \"SubMenuContext\",\n { depth: -1, iconPaddingCount: 0 },\n);\n\nexport const useSubMenuContext = () => {\n return useContext(SubMenuContext);\n};\n\nexport function SubMenuProvider({\n children,\n directIcons,\n setDirectIcons,\n}: {\n children: ReactNode;\n directIcons: string[];\n setDirectIcons?: Dispatch<SetStateAction<string[]>>;\n}) {\n const { depth, iconPaddingCount } = useSubMenuContext();\n\n const context = useMemo(\n () => ({\n depth: depth + 1,\n iconPaddingCount: iconPaddingCount + (directIcons.length > 0 ? 1 : 0),\n setDirectIcons,\n }),\n [depth, iconPaddingCount, directIcons, setDirectIcons],\n );\n\n return (\n <SubMenuContext.Provider value={context}>\n {children}\n </SubMenuContext.Provider>\n );\n}\n"],"names":["createContext","useContext","useMemo"],"mappings":";;;;;;AAeO,MAAM,cAAiB,GAAAA,kBAAA;AAAA,EAC5B,gBAAA;AAAA,EACA,EAAE,KAAA,EAAO,EAAI,EAAA,gBAAA,EAAkB,CAAE;AACnC;AAEO,MAAM,oBAAoB,MAAM;AACrC,EAAA,OAAOC,iBAAW,cAAc,CAAA;AAClC;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAIG,EAAA;AACD,EAAA,MAAM,EAAE,KAAA,EAAO,gBAAiB,EAAA,GAAI,iBAAkB,EAAA;AAEtD,EAAA,MAAM,OAAU,GAAAC,aAAA;AAAA,IACd,OAAO;AAAA,MACL,OAAO,KAAQ,GAAA,CAAA;AAAA,MACf,gBAAkB,EAAA,gBAAA,IAAoB,WAAY,CAAA,MAAA,GAAS,IAAI,CAAI,GAAA,CAAA,CAAA;AAAA,MACnE;AAAA,KACF,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,gBAAkB,EAAA,WAAA,EAAa,cAAc;AAAA,GACvD;AAEA,EAAA,sCACG,cAAe,CAAA,QAAA,EAAf,EAAwB,KAAA,EAAO,SAC7B,QACH,EAAA,CAAA;AAEJ;;;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltVerticalNavigation {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-fixed-100);\n list-style: none;\n padding: 0;\n margin: 0;\n position: relative;\n}\n\n.saltVerticalNavigation > .saltDivider-horizontal,\n.saltVerticalNavigationSubMenu > .saltDivider-horizontal,\n.saltVerticalNavigationItem > .saltDivider-horizontal {\n margin-bottom: calc(var(--salt-size-fixed-100) * -1);\n}\n\n.saltVerticalNavigation[data-has-direct-icons=\"false\"] .saltCollapsiblePanel-inner {\n margin-bottom: calc(var(--salt-size-fixed-100) * -1);\n}\n\n.saltVerticalNavigation[data-has-direct-icons=\"false\"] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n/* Only show border at the top-level */\n\n.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner,\n.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=\"true\"] .saltCollapsiblePanel-inner {\n margin-bottom: 0;\n}\n\n.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu,\n.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=\"true\"] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {\n border-bottom: none;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=VerticalNavigation.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigation.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
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 VerticalNavigation$1 = require('./VerticalNavigation.css.js');
|
|
11
|
+
|
|
12
|
+
const withBaseName = core.makePrefixer("saltVerticalNavigation");
|
|
13
|
+
const VerticalNavigation = react.forwardRef(function VerticalNavigation2(props, ref) {
|
|
14
|
+
const { appearance = "indicator", className, ...rest } = props;
|
|
15
|
+
const targetWindow = window.useWindow();
|
|
16
|
+
styles.useComponentCssInjection({
|
|
17
|
+
testId: "salt-vertical-navigation",
|
|
18
|
+
css: VerticalNavigation$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
|
+
"ol",
|
|
24
|
+
{
|
|
25
|
+
ref,
|
|
26
|
+
className: clsx.clsx(withBaseName(), withBaseName(appearance), className),
|
|
27
|
+
"data-has-direct-icons": directIcons.length > 0,
|
|
28
|
+
...rest
|
|
29
|
+
}
|
|
30
|
+
) });
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
exports.VerticalNavigation = VerticalNavigation;
|
|
34
|
+
//# sourceMappingURL=VerticalNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigation.js","sources":["../src/vertical-navigation/VerticalNavigation.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 verticalNavigationCss from \"./VerticalNavigation.css\";\n\nexport interface VerticalNavigationProps\n extends ComponentPropsWithoutRef<\"ol\"> {\n appearance?: \"indicator\" | \"bordered\";\n}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigation\");\n\nexport const VerticalNavigation = forwardRef<\n HTMLOListElement,\n VerticalNavigationProps\n>(function VerticalNavigation(props, ref) {\n const { appearance = \"indicator\", className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-vertical-navigation\",\n css: verticalNavigationCss,\n window: targetWindow,\n });\n\n const [directIcons, setDirectIcons] = useState<string[]>([]);\n\n return (\n <SubMenuProvider directIcons={directIcons} setDirectIcons={setDirectIcons}>\n <ol\n ref={ref}\n className={clsx(withBaseName(), withBaseName(appearance), className)}\n data-has-direct-icons={directIcons.length > 0}\n {...rest}\n />\n </SubMenuProvider>\n );\n});\n"],"names":["makePrefixer","forwardRef","VerticalNavigation","useWindow","useComponentCssInjection","verticalNavigationCss","useState","jsx","SubMenuProvider","clsx"],"mappings":";;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAqB,GAAAC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAA,MAAM,EAAE,UAAa,GAAA,WAAA,EAAa,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,oBAAA;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,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,UAAU,GAAG,SAAS,CAAA;AAAA,MACnE,uBAAA,EAAuB,YAAY,MAAS,GAAA,CAAA;AAAA,MAC3C,GAAG;AAAA;AAAA,GAER,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
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 react = require('react');
|
|
7
|
+
var SubMenuContext = require('./SubMenuContext.js');
|
|
8
|
+
|
|
9
|
+
const withBaseName = core.makePrefixer("saltVerticalNavigationItem");
|
|
10
|
+
const VerticalNavigationItemContext = core.createContext(
|
|
11
|
+
"saltVerticalNavigationItemContext",
|
|
12
|
+
{
|
|
13
|
+
active: false,
|
|
14
|
+
focusVisible: false,
|
|
15
|
+
setFocusVisible: () => {
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
function useVerticalNavigationItem() {
|
|
20
|
+
return react.useContext(VerticalNavigationItemContext);
|
|
21
|
+
}
|
|
22
|
+
const VerticalNavigationItem = react.forwardRef(function VerticalNavigationItem2(props, ref) {
|
|
23
|
+
const { children, className, active = false, style, ...rest } = props;
|
|
24
|
+
const { depth } = SubMenuContext.useSubMenuContext();
|
|
25
|
+
const [focusVisible, setFocusVisible] = react.useState(false);
|
|
26
|
+
const context = react.useMemo(
|
|
27
|
+
() => ({
|
|
28
|
+
active,
|
|
29
|
+
focusVisible,
|
|
30
|
+
setFocusVisible
|
|
31
|
+
}),
|
|
32
|
+
[active, focusVisible]
|
|
33
|
+
);
|
|
34
|
+
return /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationItemContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
35
|
+
"li",
|
|
36
|
+
{
|
|
37
|
+
ref,
|
|
38
|
+
className: clsx(withBaseName(), className),
|
|
39
|
+
style: { "--verticalNavigationItem-depth": depth, ...style },
|
|
40
|
+
...rest,
|
|
41
|
+
children
|
|
42
|
+
}
|
|
43
|
+
) });
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
exports.VerticalNavigationItem = VerticalNavigationItem;
|
|
47
|
+
exports.useVerticalNavigationItem = useVerticalNavigationItem;
|
|
48
|
+
//# sourceMappingURL=VerticalNavigationItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationItem.js","sources":["../src/vertical-navigation/VerticalNavigationItem.tsx"],"sourcesContent":["import { createContext, makePrefixer } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type Dispatch,\n forwardRef,\n type SetStateAction,\n useContext,\n useMemo,\n useState,\n} from \"react\";\nimport { useSubMenuContext } from \"./SubMenuContext\";\n\nexport interface VerticalNavigationItemProps\n extends ComponentPropsWithoutRef<\"li\"> {\n active?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItem\");\n\ntype VerticalNavigationItemContextType = {\n active: boolean;\n focusVisible: boolean;\n setFocusVisible: Dispatch<SetStateAction<boolean>>;\n};\n\nconst VerticalNavigationItemContext =\n createContext<VerticalNavigationItemContextType>(\n \"saltVerticalNavigationItemContext\",\n {\n active: false,\n focusVisible: false,\n setFocusVisible: () => {},\n },\n );\n\nexport function useVerticalNavigationItem() {\n return useContext(VerticalNavigationItemContext);\n}\n\nexport const VerticalNavigationItem = forwardRef<\n HTMLLIElement,\n VerticalNavigationItemProps\n>(function VerticalNavigationItem(props, ref) {\n const { children, className, active = false, style, ...rest } = props;\n\n const { depth } = useSubMenuContext();\n const [focusVisible, setFocusVisible] = useState(false);\n\n const context = useMemo(\n () => ({\n active,\n focusVisible,\n setFocusVisible,\n }),\n [active, focusVisible],\n );\n\n return (\n <VerticalNavigationItemContext.Provider value={context}>\n <li\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={\n { \"--verticalNavigationItem-depth\": depth, ...style } as CSSProperties\n }\n {...rest}\n >\n {children}\n </li>\n </VerticalNavigationItemContext.Provider>\n );\n});\n"],"names":["makePrefixer","createContext","useContext","forwardRef","VerticalNavigationItem","useSubMenuContext","useState","useMemo","jsx"],"mappings":";;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,4BAA4B,CAAA;AAQ9D,MAAM,6BACJ,GAAAC,kBAAA;AAAA,EACE,mCAAA;AAAA,EACA;AAAA,IACE,MAAQ,EAAA,KAAA;AAAA,IACR,YAAc,EAAA,KAAA;AAAA,IACd,iBAAiB,MAAM;AAAA;AAAC;AAE5B,CAAA;AAEK,SAAS,yBAA4B,GAAA;AAC1C,EAAA,OAAOC,iBAAW,6BAA6B,CAAA;AACjD;AAEO,MAAM,sBAAyB,GAAAC,gBAAA,CAGpC,SAASC,uBAAAA,CAAuB,OAAO,GAAK,EAAA;AAC5C,EAAM,MAAA,EAAE,UAAU,SAAW,EAAA,MAAA,GAAS,OAAO,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEhE,EAAM,MAAA,EAAE,KAAM,EAAA,GAAIC,gCAAkB,EAAA;AACpC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEtD,EAAA,MAAM,OAAU,GAAAC,aAAA;AAAA,IACd,OAAO;AAAA,MACL,MAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,QAAQ,YAAY;AAAA,GACvB;AAEA,EAAA,uBACGC,cAAA,CAAA,6BAAA,CAA8B,QAA9B,EAAA,EAAuC,OAAO,OAC7C,EAAA,QAAA,kBAAAA,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KACE,EAAA,EAAE,gCAAkC,EAAA,KAAA,EAAO,GAAG,KAAM,EAAA;AAAA,MAErD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n white-space: pre;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-h4-fontWeight);\n font-family: var(--salt-text-h4-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-h4-lineHeight);\n font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n left: var(--salt-spacing-50);\n content: \"\";\n position: absolute;\n height: var(--salt-size-base);\n border-radius: var(--salt-palette-corner-strongest);\n width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n background: var(--salt-navigable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n font-weight: var(--salt-text-h4-fontWeight);\n}\n\n@supports selector(:has(*)) {\n .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n background: linear-gradient(var(--salt-navigable-background-hover), var(--salt-navigable-background-hover)) var(--salt-navigable-accent-background-active);\n }\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=VerticalNavigationItemContent.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationItemContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,83 @@
|
|
|
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 VerticalNavigationItem = require('./VerticalNavigationItem.js');
|
|
11
|
+
var VerticalNavigationItemContent$1 = require('./VerticalNavigationItemContent.css.js');
|
|
12
|
+
|
|
13
|
+
const withBaseName = core.makePrefixer("saltVerticalNavigationItemContent");
|
|
14
|
+
const VerticalNavigationItemContent = react.forwardRef(function VerticalNavigationItemContent2(props, ref) {
|
|
15
|
+
const { children, className, style, ...rest } = props;
|
|
16
|
+
const targetWindow = window.useWindow();
|
|
17
|
+
styles.useComponentCssInjection({
|
|
18
|
+
testId: "salt-vertical-navigation-item-content",
|
|
19
|
+
css: VerticalNavigationItemContent$1,
|
|
20
|
+
window: targetWindow
|
|
21
|
+
});
|
|
22
|
+
const containerRef = react.useRef(null);
|
|
23
|
+
const handleRef = core.useForkRef(ref, containerRef);
|
|
24
|
+
const { active, focusVisible } = VerticalNavigationItem.useVerticalNavigationItem();
|
|
25
|
+
const { setDirectIcons, iconPaddingCount } = SubMenuContext.useSubMenuContext();
|
|
26
|
+
const [hasIcon, setHasIcon] = react.useState(false);
|
|
27
|
+
const iconId = core.useId();
|
|
28
|
+
react.useEffect(() => {
|
|
29
|
+
const checkForIcons = () => {
|
|
30
|
+
var _a;
|
|
31
|
+
const iconElement = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
|
|
32
|
+
".saltIcon ~ .saltVerticalNavigationItemLabel"
|
|
33
|
+
);
|
|
34
|
+
setHasIcon(Boolean(iconElement));
|
|
35
|
+
if (iconElement && iconId && setDirectIcons) {
|
|
36
|
+
setDirectIcons((icons) => {
|
|
37
|
+
if (!icons.includes(iconId)) {
|
|
38
|
+
return icons.concat(iconId);
|
|
39
|
+
}
|
|
40
|
+
return icons;
|
|
41
|
+
});
|
|
42
|
+
} else if (!iconElement && iconId && setDirectIcons) {
|
|
43
|
+
setDirectIcons((icons) => icons.filter((id) => id !== iconId));
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const mutationObserver = new MutationObserver(() => {
|
|
47
|
+
checkForIcons();
|
|
48
|
+
});
|
|
49
|
+
checkForIcons();
|
|
50
|
+
if (containerRef.current) {
|
|
51
|
+
mutationObserver.observe(containerRef.current, {
|
|
52
|
+
childList: true,
|
|
53
|
+
subtree: true
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
return () => {
|
|
57
|
+
mutationObserver.disconnect();
|
|
58
|
+
};
|
|
59
|
+
}, [iconId, setDirectIcons]);
|
|
60
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
61
|
+
"span",
|
|
62
|
+
{
|
|
63
|
+
ref: handleRef,
|
|
64
|
+
className: clsx.clsx(
|
|
65
|
+
withBaseName(),
|
|
66
|
+
{
|
|
67
|
+
[withBaseName("active")]: active,
|
|
68
|
+
[withBaseName("focused")]: focusVisible
|
|
69
|
+
},
|
|
70
|
+
className
|
|
71
|
+
),
|
|
72
|
+
style: {
|
|
73
|
+
"--saltVerticalNavigationItem-iconPaddingMultiplier": hasIcon ? iconPaddingCount - 1 : iconPaddingCount,
|
|
74
|
+
...style
|
|
75
|
+
},
|
|
76
|
+
...rest,
|
|
77
|
+
children
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
exports.VerticalNavigationItemContent = VerticalNavigationItemContent;
|
|
83
|
+
//# sourceMappingURL=VerticalNavigationItemContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalNavigationItemContent.js","sources":["../src/vertical-navigation/VerticalNavigationItemContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } 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 CSSProperties,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useSubMenuContext } from \"./SubMenuContext\";\nimport { useVerticalNavigationItem } from \"./VerticalNavigationItem\";\nimport verticalNavigationItemContentCss from \"./VerticalNavigationItemContent.css\";\n\nexport interface VerticalNavigationItemContentProps\n extends ComponentPropsWithoutRef<\"span\"> {}\n\nconst withBaseName = makePrefixer(\"saltVerticalNavigationItemContent\");\n\nexport const VerticalNavigationItemContent = forwardRef<\n HTMLSpanElement,\n VerticalNavigationItemContentProps\n>(function VerticalNavigationItemContent(props, ref) {\n const { children, className, style, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-vertical-navigation-item-content\",\n css: verticalNavigationItemContentCss,\n window: targetWindow,\n });\n\n const containerRef = useRef<HTMLSpanElement>(null);\n const handleRef = useForkRef(ref, containerRef);\n\n const { active, focusVisible } = useVerticalNavigationItem();\n const { setDirectIcons, iconPaddingCount } = useSubMenuContext();\n const [hasIcon, setHasIcon] = useState(false);\n\n const iconId = useId();\n\n useEffect(() => {\n const checkForIcons = () => {\n const iconElement = containerRef.current?.querySelector<HTMLElement>(\n \".saltIcon ~ .saltVerticalNavigationItemLabel\",\n );\n\n setHasIcon(Boolean(iconElement));\n if (iconElement && iconId && setDirectIcons) {\n setDirectIcons((icons) => {\n if (!icons.includes(iconId)) {\n return icons.concat(iconId);\n }\n return icons;\n });\n } else if (!iconElement && iconId && setDirectIcons) {\n setDirectIcons((icons) => icons.filter((id) => id !== iconId));\n }\n };\n\n const mutationObserver = new MutationObserver(() => {\n checkForIcons();\n });\n checkForIcons();\n\n if (containerRef.current) {\n mutationObserver.observe(containerRef.current, {\n childList: true,\n subtree: true,\n });\n }\n\n return () => {\n mutationObserver.disconnect();\n };\n }, [iconId, setDirectIcons]);\n\n return (\n <span\n ref={handleRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focused\")]: focusVisible,\n },\n className,\n )}\n style={\n {\n \"--saltVerticalNavigationItem-iconPaddingMultiplier\": hasIcon\n ? iconPaddingCount - 1\n : iconPaddingCount,\n ...style,\n } as CSSProperties\n }\n {...rest}\n >\n {children}\n </span>\n );\n});\n"],"names":["makePrefixer","forwardRef","VerticalNavigationItemContent","useWindow","useComponentCssInjection","verticalNavigationItemContentCss","useRef","useForkRef","useVerticalNavigationItem","useSubMenuContext","useState","useId","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,mCAAmC,CAAA;AAE9D,MAAM,6BAAgC,GAAAC,gBAAA,CAG3C,SAASC,8BAAAA,CAA8B,OAAO,GAAK,EAAA;AACnD,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEhD,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,EAAM,MAAA,YAAA,GAAeC,aAAwB,IAAI,CAAA;AACjD,EAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,YAAY,CAAA;AAE9C,EAAA,MAAM,EAAE,MAAA,EAAQ,YAAa,EAAA,GAAIC,gDAA0B,EAAA;AAC3D,EAAA,MAAM,EAAE,cAAA,EAAgB,gBAAiB,EAAA,GAAIC,gCAAkB,EAAA;AAC/D,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,SAASC,UAAM,EAAA;AAErB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAgB,MAAM;AA5ChC,MAAA,IAAA,EAAA;AA6CM,MAAM,MAAA,WAAA,GAAA,CAAc,EAAa,GAAA,YAAA,CAAA,OAAA,KAAb,IAAsB,GAAA,MAAA,GAAA,EAAA,CAAA,aAAA;AAAA,QACxC;AAAA,OAAA;AAGF,MAAW,UAAA,CAAA,OAAA,CAAQ,WAAW,CAAC,CAAA;AAC/B,MAAI,IAAA,WAAA,IAAe,UAAU,cAAgB,EAAA;AAC3C,QAAA,cAAA,CAAe,CAAC,KAAU,KAAA;AACxB,UAAA,IAAI,CAAC,KAAA,CAAM,QAAS,CAAA,MAAM,CAAG,EAAA;AAC3B,YAAO,OAAA,KAAA,CAAM,OAAO,MAAM,CAAA;AAAA;AAE5B,UAAO,OAAA,KAAA;AAAA,SACR,CAAA;AAAA,OACQ,MAAA,IAAA,CAAC,WAAe,IAAA,MAAA,IAAU,cAAgB,EAAA;AACnD,QAAe,cAAA,CAAA,CAAC,UAAU,KAAM,CAAA,MAAA,CAAO,CAAC,EAAO,KAAA,EAAA,KAAO,MAAM,CAAC,CAAA;AAAA;AAC/D,KACF;AAEA,IAAM,MAAA,gBAAA,GAAmB,IAAI,gBAAA,CAAiB,MAAM;AAClD,MAAc,aAAA,EAAA;AAAA,KACf,CAAA;AACD,IAAc,aAAA,EAAA;AAEd,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAiB,gBAAA,CAAA,OAAA,CAAQ,aAAa,OAAS,EAAA;AAAA,QAC7C,SAAW,EAAA,IAAA;AAAA,QACX,OAAS,EAAA;AAAA,OACV,CAAA;AAAA;AAGH,IAAA,OAAO,MAAM;AACX,MAAA,gBAAA,CAAiB,UAAW,EAAA;AAAA,KAC9B;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,cAAc,CAAC,CAAA;AAE3B,EACE,uBAAAC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,SAAA;AAAA,MACL,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,UAC1B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,SAC7B;AAAA,QACA;AAAA,OACF;AAAA,MACA,KACE,EAAA;AAAA,QACE,oDAAA,EAAsD,OAClD,GAAA,gBAAA,GAAmB,CACnB,GAAA,gBAAA;AAAA,QACJ,GAAG;AAAA,OACL;AAAA,MAED,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|