@salt-ds/lab 1.0.0-alpha.15 → 1.0.0-alpha.17
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/dist-cjs/badge/Badge.css.js +1 -1
- package/dist-cjs/cascading-menu/CascadingMenu.js.map +1 -1
- package/dist-cjs/color-chooser/ColorChooser.js +1 -1
- package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
- package/dist-cjs/color-chooser/GetColorPalettes.js +2 -2
- package/dist-cjs/color-chooser/GetColorPalettes.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
- package/dist-cjs/combo-box-next/ComboBoxNext.css.js +6 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +1 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.js +184 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -0
- package/dist-cjs/combo-box-next/useComboBox.js +145 -0
- package/dist-cjs/combo-box-next/useComboBox.js.map +1 -0
- package/dist-cjs/combo-box-next/useComboboxPortal.js +69 -0
- package/dist-cjs/combo-box-next/useComboboxPortal.js.map +1 -0
- package/dist-cjs/combo-box-next/utils.js +40 -0
- package/dist-cjs/combo-box-next/utils.js.map +1 -0
- package/dist-cjs/dialog/Dialog.css.js +1 -1
- package/dist-cjs/dialog/Dialog.js +58 -59
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.css.js +1 -1
- package/dist-cjs/dialog/DialogActions.js +15 -17
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.css.js +6 -0
- package/dist-cjs/dialog/DialogCloseButton.css.js.map +1 -0
- package/dist-cjs/dialog/DialogCloseButton.js +39 -0
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -0
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/dialog/DialogContent.js +20 -29
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/{internal/DialogContext.js → DialogContext.js} +4 -0
- package/dist-cjs/dialog/DialogContext.js.map +1 -0
- package/dist-cjs/dialog/DialogTitle.css.js +1 -1
- package/dist-cjs/dialog/DialogTitle.js +40 -41
- package/dist-cjs/dialog/DialogTitle.js.map +1 -1
- package/dist-cjs/dialog/useDialog.js +31 -0
- package/dist-cjs/dialog/useDialog.js.map +1 -0
- package/dist-cjs/drawer/Drawer.js +25 -23
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/dropdown-next/DropdownNext.css.js +6 -0
- package/dist-cjs/dropdown-next/DropdownNext.css.js.map +1 -0
- package/dist-cjs/dropdown-next/DropdownNext.js +183 -0
- package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -0
- package/dist-cjs/dropdown-next/useDropdownNext.js +169 -0
- package/dist-cjs/dropdown-next/useDropdownNext.js.map +1 -0
- package/dist-cjs/index.js +15 -6
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list/Highlighter.js +1 -1
- package/dist-cjs/list/Highlighter.js.map +1 -1
- package/dist-cjs/list/keyset.js.map +1 -1
- package/dist-cjs/list-next/ListItemNext.css.js +1 -1
- package/dist-cjs/list-next/ListNext.js +1 -0
- package/dist-cjs/list-next/ListNext.js.map +1 -1
- package/dist-cjs/list-next/useList.js +11 -7
- package/dist-cjs/list-next/useList.js.map +1 -1
- package/dist-cjs/logo/Logo.css.js +1 -1
- package/dist-cjs/logo/LogoImage.css.js +6 -0
- package/dist-cjs/logo/LogoImage.css.js.map +1 -0
- package/dist-cjs/logo/LogoImage.js +9 -0
- package/dist-cjs/logo/LogoImage.js.map +1 -1
- package/dist-cjs/logo/LogoSeparator.css.js +1 -1
- package/dist-cjs/navigation-item/ConditionalWrapper.js +37 -0
- package/dist-cjs/navigation-item/ConditionalWrapper.js.map +1 -0
- package/dist-cjs/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +7 -12
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js +6 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.js +80 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -0
- package/dist-cjs/pill-next/PillNext.css.js +1 -1
- package/dist-cjs/responsive/useDynamicCollapse.js.map +1 -1
- package/dist-cjs/responsive/useOverflowLayout.js.map +1 -1
- package/dist-cjs/tabs/useActivationIndicator.js.map +1 -1
- package/dist-cjs/tabs-next/TabNext.css.js +1 -1
- package/dist-es/badge/Badge.css.js +1 -1
- package/dist-es/cascading-menu/CascadingMenu.js.map +1 -1
- package/dist-es/color-chooser/ColorChooser.js +1 -1
- package/dist-es/color-chooser/ColorChooser.js.map +1 -1
- package/dist-es/color-chooser/GetColorPalettes.js +2 -2
- package/dist-es/color-chooser/GetColorPalettes.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.css.js +4 -0
- package/dist-es/combo-box-next/ComboBoxNext.css.js.map +1 -0
- package/dist-es/combo-box-next/ComboBoxNext.js +180 -0
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -0
- package/dist-es/combo-box-next/useComboBox.js +141 -0
- package/dist-es/combo-box-next/useComboBox.js.map +1 -0
- package/dist-es/combo-box-next/useComboboxPortal.js +65 -0
- package/dist-es/combo-box-next/useComboboxPortal.js.map +1 -0
- package/dist-es/combo-box-next/utils.js +35 -0
- package/dist-es/combo-box-next/utils.js.map +1 -0
- package/dist-es/dialog/Dialog.css.js +1 -1
- package/dist-es/dialog/Dialog.js +58 -59
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.css.js +1 -1
- package/dist-es/dialog/DialogActions.js +15 -17
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.css.js +4 -0
- package/dist-es/dialog/DialogCloseButton.css.js.map +1 -0
- package/dist-es/dialog/DialogCloseButton.js +31 -0
- package/dist-es/dialog/DialogCloseButton.js.map +1 -0
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/dialog/DialogContent.js +20 -29
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogContext.js +9 -0
- package/dist-es/dialog/DialogContext.js.map +1 -0
- package/dist-es/dialog/DialogTitle.css.js +1 -1
- package/dist-es/dialog/DialogTitle.js +37 -42
- package/dist-es/dialog/DialogTitle.js.map +1 -1
- package/dist-es/dialog/useDialog.js +27 -0
- package/dist-es/dialog/useDialog.js.map +1 -0
- package/dist-es/drawer/Drawer.js +26 -24
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/dropdown-next/DropdownNext.css.js +4 -0
- package/dist-es/dropdown-next/DropdownNext.css.js.map +1 -0
- package/dist-es/dropdown-next/DropdownNext.js +179 -0
- package/dist-es/dropdown-next/DropdownNext.js.map +1 -0
- package/dist-es/dropdown-next/useDropdownNext.js +165 -0
- package/dist-es/dropdown-next/useDropdownNext.js.map +1 -0
- package/dist-es/index.js +7 -3
- package/dist-es/index.js.map +1 -1
- package/dist-es/list/Highlighter.js +1 -1
- package/dist-es/list/Highlighter.js.map +1 -1
- package/dist-es/list/keyset.js.map +1 -1
- package/dist-es/list-next/ListItemNext.css.js +1 -1
- package/dist-es/list-next/ListNext.js +1 -0
- package/dist-es/list-next/ListNext.js.map +1 -1
- package/dist-es/list-next/useList.js +11 -7
- package/dist-es/list-next/useList.js.map +1 -1
- package/dist-es/logo/Logo.css.js +1 -1
- package/dist-es/logo/LogoImage.css.js +4 -0
- package/dist-es/logo/LogoImage.css.js.map +1 -0
- package/dist-es/logo/LogoImage.js +9 -0
- package/dist-es/logo/LogoImage.js.map +1 -1
- package/dist-es/logo/LogoSeparator.css.js +1 -1
- package/dist-es/navigation-item/ConditionalWrapper.js +33 -0
- package/dist-es/navigation-item/ConditionalWrapper.js.map +1 -0
- package/dist-es/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +7 -12
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.css.js +4 -0
- package/dist-es/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.js +76 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -0
- package/dist-es/pill-next/PillNext.css.js +1 -1
- package/dist-es/responsive/useDynamicCollapse.js.map +1 -1
- package/dist-es/responsive/useOverflowLayout.js.map +1 -1
- package/dist-es/tabs/useActivationIndicator.js.map +1 -1
- package/dist-es/tabs-next/TabNext.css.js +1 -1
- package/dist-types/combo-box-next/ComboBoxNext.d.ts +83 -0
- package/dist-types/combo-box-next/index.d.ts +1 -0
- package/dist-types/combo-box-next/useComboBox.d.ts +36 -0
- package/dist-types/combo-box-next/useComboboxPortal.d.ts +15 -0
- package/dist-types/combo-box-next/utils.d.ts +8 -0
- package/dist-types/dialog/Dialog.d.ts +17 -12
- package/dist-types/dialog/DialogActions.d.ts +1 -3
- package/dist-types/dialog/DialogCloseButton.d.ts +3 -0
- package/dist-types/dialog/DialogContent.d.ts +1 -3
- package/dist-types/dialog/{internal/DialogContext.d.ts → DialogContext.d.ts} +5 -2
- package/dist-types/dialog/DialogTitle.d.ts +7 -8
- package/dist-types/dialog/index.d.ts +4 -2
- package/dist-types/dialog/useDialog.d.ts +27 -0
- package/dist-types/dropdown-next/DropdownNext.d.ts +49 -0
- package/dist-types/dropdown-next/index.d.ts +1 -0
- package/dist-types/dropdown-next/useDropdownNext.d.ts +31 -0
- package/dist-types/index.d.ts +3 -1
- package/dist-types/list-next/ListNext.d.ts +4 -1
- package/dist-types/list-next/useList.d.ts +6 -4
- package/dist-types/navigation-item/ConditionalWrapper.d.ts +8 -0
- package/dist-types/navigation-item/ExpansionIcon.d.ts +3 -0
- package/dist-types/navigation-item/NavigationItem.d.ts +36 -0
- package/dist-types/navigation-item/index.d.ts +1 -0
- package/package.json +29 -27
- package/dist-cjs/dialog/internal/DialogContext.js.map +0 -1
- package/dist-cjs/nav-item/ExpansionButton.js.map +0 -1
- package/dist-cjs/nav-item/NavItem.css.js +0 -6
- package/dist-cjs/nav-item/NavItem.css.js.map +0 -1
- package/dist-cjs/nav-item/NavItem.js +0 -88
- package/dist-cjs/nav-item/NavItem.js.map +0 -1
- package/dist-es/dialog/internal/DialogContext.js +0 -6
- package/dist-es/dialog/internal/DialogContext.js.map +0 -1
- package/dist-es/nav-item/ExpansionButton.js.map +0 -1
- package/dist-es/nav-item/NavItem.css.js +0 -4
- package/dist-es/nav-item/NavItem.css.js.map +0 -1
- package/dist-es/nav-item/NavItem.js +0 -84
- package/dist-es/nav-item/NavItem.js.map +0 -1
- package/dist-types/nav-item/ExpansionButton.d.ts +0 -3
- package/dist-types/nav-item/NavItem.d.ts +0 -45
- package/dist-types/nav-item/index.d.ts +0 -1
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
var ExpansionButton = require('./ExpansionButton.js');
|
|
10
|
-
var NavItem$1 = require('./NavItem.css.js');
|
|
11
|
-
var window = require('@salt-ds/window');
|
|
12
|
-
var styles = require('@salt-ds/styles');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltNavItem");
|
|
15
|
-
const NavItem = React.forwardRef(
|
|
16
|
-
function NavItem2(props, ref) {
|
|
17
|
-
const {
|
|
18
|
-
active,
|
|
19
|
-
blurSelected,
|
|
20
|
-
children,
|
|
21
|
-
className,
|
|
22
|
-
expanded = false,
|
|
23
|
-
orientation = "horizontal",
|
|
24
|
-
parent,
|
|
25
|
-
level = 0,
|
|
26
|
-
onExpand,
|
|
27
|
-
href,
|
|
28
|
-
IconComponent,
|
|
29
|
-
BadgeComponent,
|
|
30
|
-
style: styleProp,
|
|
31
|
-
...rest
|
|
32
|
-
} = props;
|
|
33
|
-
const targetWindow = window.useWindow();
|
|
34
|
-
styles.useComponentCssInjection({
|
|
35
|
-
testId: "salt-nav-item",
|
|
36
|
-
css: NavItem$1,
|
|
37
|
-
window: targetWindow
|
|
38
|
-
});
|
|
39
|
-
const style = {
|
|
40
|
-
...styleProp,
|
|
41
|
-
"--saltNavItem-level": `${level}`
|
|
42
|
-
};
|
|
43
|
-
const handleExpand = (event) => {
|
|
44
|
-
event.stopPropagation();
|
|
45
|
-
onExpand == null ? void 0 : onExpand(event);
|
|
46
|
-
};
|
|
47
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
48
|
-
className: clsx.clsx(
|
|
49
|
-
withBaseName(),
|
|
50
|
-
{
|
|
51
|
-
[withBaseName("active")]: active,
|
|
52
|
-
[withBaseName("blurSelected")]: blurSelected,
|
|
53
|
-
[withBaseName("nested")]: level !== 0
|
|
54
|
-
},
|
|
55
|
-
withBaseName(orientation),
|
|
56
|
-
className
|
|
57
|
-
),
|
|
58
|
-
ref,
|
|
59
|
-
style,
|
|
60
|
-
...rest,
|
|
61
|
-
children: [
|
|
62
|
-
IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
|
|
63
|
-
"aria-hidden": true,
|
|
64
|
-
className: withBaseName("icon")
|
|
65
|
-
}),
|
|
66
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.Link, {
|
|
67
|
-
className: withBaseName("label"),
|
|
68
|
-
"aria-current": active ? "page" : void 0,
|
|
69
|
-
href,
|
|
70
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
71
|
-
children
|
|
72
|
-
})
|
|
73
|
-
}),
|
|
74
|
-
BadgeComponent,
|
|
75
|
-
parent && /* @__PURE__ */ jsxRuntime.jsx(ExpansionButton.ExpansionButton, {
|
|
76
|
-
"aria-expanded": expanded,
|
|
77
|
-
className: withBaseName("expandButton"),
|
|
78
|
-
expanded,
|
|
79
|
-
onClick: handleExpand,
|
|
80
|
-
orientation
|
|
81
|
-
})
|
|
82
|
-
]
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
exports.NavItem = NavItem;
|
|
88
|
-
//# sourceMappingURL=NavItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n MouseEventHandler,\n MouseEvent,\n ComponentType,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, Link } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ExpansionButton } from \"./ExpansionButton\";\n\nimport navItemCss from \"./NavItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the nav item is active.\n */\n active?: boolean;\n /**\n * Whether the nav item has active children.\n */\n blurSelected?: boolean;\n /**\n * Whether the nav item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the nav item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the nav item is a parent with nested children.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the nav item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n /**\n * Icon component to be displayed next to the nav item label.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * Badge component to be displayed next to the nav item label.\n */\n BadgeComponent?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltNavItem\");\n\nexport const NavItem = forwardRef<HTMLDivElement, NavItemProps>(\n function NavItem(props, ref) {\n const {\n active,\n blurSelected,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n IconComponent,\n BadgeComponent,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-nav-item\",\n css: navItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavItem-level\": `${level}`,\n };\n\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"blurSelected\")]: blurSelected,\n [withBaseName(\"nested\")]: level !== 0,\n },\n withBaseName(orientation),\n className\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n {IconComponent && (\n <IconComponent aria-hidden className={withBaseName(\"icon\")} />\n )}\n <Link\n className={withBaseName(\"label\")}\n aria-current={active ? \"page\" : undefined}\n href={href}\n >\n <span>{children}</span>\n </Link>\n {BadgeComponent}\n {parent && (\n <ExpansionButton\n aria-expanded={expanded}\n className={withBaseName(\"expandButton\")}\n expanded={expanded}\n onClick={handleExpand}\n orientation={orientation}\n />\n )}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","NavItem","useWindow","useComponentCssInjection","navItemCss","jsxs","clsx","jsx","Link","ExpansionButton"],"mappings":";;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,kBAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,uBAAuB,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,UAChC,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,SACtC;AAAA,QACA,aAAa,WAAW,CAAA;AAAA,QACxB,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,aAAA,oBACEC,cAAA,CAAA,aAAA,EAAA;AAAA,UAAc,aAAW,EAAA,IAAA;AAAA,UAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,wBAE7DA,cAAA,CAAAC,SAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,UAChC,IAAA;AAAA,UAEA,QAAC,kBAAAD,cAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA;AAAA,WAAS,CAAA;AAAA,SAClB,CAAA;AAAA,QACC,cAAA;AAAA,QACA,0BACEA,cAAA,CAAAE,+BAAA,EAAA;AAAA,UACC,eAAe,EAAA,QAAA;AAAA,UACf,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACtC,QAAA;AAAA,UACA,OAAS,EAAA,YAAA;AAAA,UACT,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContext.js","sources":["../src/dialog/internal/DialogContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n status?: ValidationStatus;\n dialogId?: string;\n setContentElement?: (node: HTMLDivElement) => void;\n}>({});\n"],"names":[],"mappings":";;AAGa,MAAA,aAAA,GAAgB,aAI1B,CAAA,EAAE;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionButton.js","sources":["../src/nav-item/ExpansionButton.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { Button } from \"@salt-ds/core\";\nimport { NavItemProps } from \"./NavItem\";\n\nconst iconExpansionMap = {\n vertical: {\n expanded: ChevronDownIcon,\n collapsed: ChevronRightIcon,\n },\n horizontal: {\n expanded: ChevronDownIcon,\n collapsed: ChevronDownIcon,\n },\n};\n\nexport function ExpansionButton({\n expanded = false,\n orientation = \"horizontal\",\n ...rest\n}: Pick<NavItemProps, \"expanded\" | \"orientation\"> &\n ComponentPropsWithoutRef<\"button\">) {\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return (\n <Button aria-label=\"expand\" variant=\"secondary\" {...rest}>\n <Icon aria-hidden=\"true\" />\n </Button>\n );\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,gBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,eAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CACsC,EAAA;AACpC,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IAAO,YAAW,EAAA,QAAA;AAAA,IAAS,OAAQ,EAAA,WAAA;AAAA,IAAa,GAAG,IAAA;AAAA,IAClD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,MAAK,aAAY,EAAA,MAAA;AAAA,KAAO,CAAA;AAAA,GAC3B,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "/* Vars applied to root NavItem component */\n.saltNavItem {\n --navItem-color: var(--salt-text-secondary-foreground);\n --navItem-fill: var(--salt-text-secondary-foreground);\n --navItem-bar-inset: var(--salt-spacing-25);\n --navItem-bar-size: calc(var(--salt-size-bar) / 2);\n --navItem-indicator-background: var(--salt-navigable-indicator-active);\n}\n\n/* Vars applied to NavItem component when active or selected */\n.saltNavItem-active,\n.saltNavItem-blurSelected {\n --navItem-color: var(--salt-text-primary-foreground);\n --navItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to root NavItem component */\n.saltNavItem {\n display: flex;\n align-items: center;\n position: relative;\n gap: var(--salt-spacing-100);\n font-weight: var(--salt-text-fontWeight-strong);\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavItem icon */\n.saltNavItem .saltNavItem-icon {\n fill: var(--navItem-fill);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--navItem-bar-inset)) 0 var(--salt-spacing-100) 0;\n margin: 0 var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavItem-vertical {\n min-height: calc(var(--salt-size-base));\n padding-left: calc(var(--salt-spacing-100) + var(--navItem-bar-inset));\n margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavItem label */\n.saltNavItem .saltNavItem-label {\n --link-color-visited: var(--navItem-color);\n --link-color-hover: var(--navItem-color);\n\n text-decoration: none;\n color: var(--navItem-color);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n}\n\n/* Styles applied when level is not 0 */\n.saltNavItem-nested {\n padding-left: calc(var(--salt-spacing-250) + (var(--saltNavItem-level, 0) * var(--salt-spacing-100)));\n}\n\n/* Styles applied to expand button icon */\n.saltNavItem .saltNavItem-expandButton {\n --saltIcon-color: var(--navItem-fill);\n --saltButton-background-hover: none;\n --saltButton-background-active: none;\n}\n\n/* Styles applied to NavItem when focus is visible */\n.saltNavItem:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to activation line */\n.saltNavItem::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavItem-horizontal::after {\n width: 100%;\n height: var(--navItem-bar-size);\n top: var(--navItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavItem-vertical::after {\n width: var(--navItem-bar-size);\n height: 100%;\n left: var(--navItem-bar-inset);\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavItem:hover::after,\n.saltNavItem:focus::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item has active children */\n.saltNavItem.saltNavItem-blurSelected::after,\n.saltNavItem.saltNavItem-blurSelected:hover::after,\n.saltNavItem.saltNavItem-blurSelected:focus::after {\n --navItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavItem.saltNavItem-active::after,\n.saltNavItem.saltNavItem-active:hover::after,\n.saltNavItem.saltNavItem-active:focus::after {\n background: var(--navItem-indicator-background);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=NavItem.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { makePrefixer, Link } from '@salt-ds/core';
|
|
4
|
-
import { clsx } from 'clsx';
|
|
5
|
-
import { ExpansionButton } from './ExpansionButton.js';
|
|
6
|
-
import css_248z from './NavItem.css.js';
|
|
7
|
-
import { useWindow } from '@salt-ds/window';
|
|
8
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltNavItem");
|
|
11
|
-
const NavItem = forwardRef(
|
|
12
|
-
function NavItem2(props, ref) {
|
|
13
|
-
const {
|
|
14
|
-
active,
|
|
15
|
-
blurSelected,
|
|
16
|
-
children,
|
|
17
|
-
className,
|
|
18
|
-
expanded = false,
|
|
19
|
-
orientation = "horizontal",
|
|
20
|
-
parent,
|
|
21
|
-
level = 0,
|
|
22
|
-
onExpand,
|
|
23
|
-
href,
|
|
24
|
-
IconComponent,
|
|
25
|
-
BadgeComponent,
|
|
26
|
-
style: styleProp,
|
|
27
|
-
...rest
|
|
28
|
-
} = props;
|
|
29
|
-
const targetWindow = useWindow();
|
|
30
|
-
useComponentCssInjection({
|
|
31
|
-
testId: "salt-nav-item",
|
|
32
|
-
css: css_248z,
|
|
33
|
-
window: targetWindow
|
|
34
|
-
});
|
|
35
|
-
const style = {
|
|
36
|
-
...styleProp,
|
|
37
|
-
"--saltNavItem-level": `${level}`
|
|
38
|
-
};
|
|
39
|
-
const handleExpand = (event) => {
|
|
40
|
-
event.stopPropagation();
|
|
41
|
-
onExpand == null ? void 0 : onExpand(event);
|
|
42
|
-
};
|
|
43
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
44
|
-
className: clsx(
|
|
45
|
-
withBaseName(),
|
|
46
|
-
{
|
|
47
|
-
[withBaseName("active")]: active,
|
|
48
|
-
[withBaseName("blurSelected")]: blurSelected,
|
|
49
|
-
[withBaseName("nested")]: level !== 0
|
|
50
|
-
},
|
|
51
|
-
withBaseName(orientation),
|
|
52
|
-
className
|
|
53
|
-
),
|
|
54
|
-
ref,
|
|
55
|
-
style,
|
|
56
|
-
...rest,
|
|
57
|
-
children: [
|
|
58
|
-
IconComponent && /* @__PURE__ */ jsx(IconComponent, {
|
|
59
|
-
"aria-hidden": true,
|
|
60
|
-
className: withBaseName("icon")
|
|
61
|
-
}),
|
|
62
|
-
/* @__PURE__ */ jsx(Link, {
|
|
63
|
-
className: withBaseName("label"),
|
|
64
|
-
"aria-current": active ? "page" : void 0,
|
|
65
|
-
href,
|
|
66
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
67
|
-
children
|
|
68
|
-
})
|
|
69
|
-
}),
|
|
70
|
-
BadgeComponent,
|
|
71
|
-
parent && /* @__PURE__ */ jsx(ExpansionButton, {
|
|
72
|
-
"aria-expanded": expanded,
|
|
73
|
-
className: withBaseName("expandButton"),
|
|
74
|
-
expanded,
|
|
75
|
-
onClick: handleExpand,
|
|
76
|
-
orientation
|
|
77
|
-
})
|
|
78
|
-
]
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
);
|
|
82
|
-
|
|
83
|
-
export { NavItem };
|
|
84
|
-
//# sourceMappingURL=NavItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n MouseEventHandler,\n MouseEvent,\n ComponentType,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, Link } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ExpansionButton } from \"./ExpansionButton\";\n\nimport navItemCss from \"./NavItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the nav item is active.\n */\n active?: boolean;\n /**\n * Whether the nav item has active children.\n */\n blurSelected?: boolean;\n /**\n * Whether the nav item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the nav item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the nav item is a parent with nested children.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the nav item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n /**\n * Icon component to be displayed next to the nav item label.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * Badge component to be displayed next to the nav item label.\n */\n BadgeComponent?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltNavItem\");\n\nexport const NavItem = forwardRef<HTMLDivElement, NavItemProps>(\n function NavItem(props, ref) {\n const {\n active,\n blurSelected,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n IconComponent,\n BadgeComponent,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-nav-item\",\n css: navItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavItem-level\": `${level}`,\n };\n\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"blurSelected\")]: blurSelected,\n [withBaseName(\"nested\")]: level !== 0,\n },\n withBaseName(orientation),\n className\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n {IconComponent && (\n <IconComponent aria-hidden className={withBaseName(\"icon\")} />\n )}\n <Link\n className={withBaseName(\"label\")}\n aria-current={active ? \"page\" : undefined}\n href={href}\n >\n <span>{children}</span>\n </Link>\n {BadgeComponent}\n {parent && (\n <ExpansionButton\n aria-expanded={expanded}\n className={withBaseName(\"expandButton\")}\n expanded={expanded}\n onClick={handleExpand}\n orientation={orientation}\n />\n )}\n </div>\n );\n }\n);\n"],"names":["NavItem","navItemCss"],"mappings":";;;;;;;;;AA4DA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,uBAAuB,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,UAChC,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,SACtC;AAAA,QACA,aAAa,WAAW,CAAA;AAAA,QACxB,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,aAAA,oBACE,GAAA,CAAA,aAAA,EAAA;AAAA,UAAc,aAAW,EAAA,IAAA;AAAA,UAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,wBAE7D,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,UAChC,IAAA;AAAA,UAEA,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA;AAAA,WAAS,CAAA;AAAA,SAClB,CAAA;AAAA,QACC,cAAA;AAAA,QACA,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,eAAe,EAAA,QAAA;AAAA,UACf,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACtC,QAAA;AAAA,UACA,OAAS,EAAA,YAAA;AAAA,UACT,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, MouseEventHandler, ComponentType, ReactNode } from "react";
|
|
2
|
-
import { IconProps } from "@salt-ds/icons";
|
|
3
|
-
export interface NavItemProps extends ComponentPropsWithoutRef<"div"> {
|
|
4
|
-
/**
|
|
5
|
-
* Whether the nav item is active.
|
|
6
|
-
*/
|
|
7
|
-
active?: boolean;
|
|
8
|
-
/**
|
|
9
|
-
* Whether the nav item has active children.
|
|
10
|
-
*/
|
|
11
|
-
blurSelected?: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* Whether the nav item is expanded.
|
|
14
|
-
*/
|
|
15
|
-
expanded?: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* Level of nesting.
|
|
18
|
-
*/
|
|
19
|
-
level?: number;
|
|
20
|
-
/**
|
|
21
|
-
* The orientation of the nav item.
|
|
22
|
-
*/
|
|
23
|
-
orientation?: "horizontal" | "vertical";
|
|
24
|
-
/**
|
|
25
|
-
* Whether the nav item is a parent with nested children.
|
|
26
|
-
*/
|
|
27
|
-
parent?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Action to be triggered when the nav item is expanded.
|
|
30
|
-
*/
|
|
31
|
-
onExpand?: MouseEventHandler<HTMLButtonElement>;
|
|
32
|
-
/**
|
|
33
|
-
* Href to be passed to the Link element.
|
|
34
|
-
*/
|
|
35
|
-
href?: string;
|
|
36
|
-
/**
|
|
37
|
-
* Icon component to be displayed next to the nav item label.
|
|
38
|
-
*/
|
|
39
|
-
IconComponent?: ComponentType<IconProps> | null;
|
|
40
|
-
/**
|
|
41
|
-
* Badge component to be displayed next to the nav item label.
|
|
42
|
-
*/
|
|
43
|
-
BadgeComponent?: ReactNode;
|
|
44
|
-
}
|
|
45
|
-
export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./NavItem";
|