201 lines
7.1 KiB
JavaScript
201 lines
7.1 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
splitNavItemClassNames: function() {
|
|
return splitNavItemClassNames;
|
|
},
|
|
useSplitNavItemStyles_unstable: function() {
|
|
return useSplitNavItemStyles_unstable;
|
|
}
|
|
});
|
|
const _react = require("@griffel/react");
|
|
const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
|
|
const splitNavItemClassNames = {
|
|
root: 'fui-SplitNavItem',
|
|
navItem: 'fui-SplitNavItem__navItem',
|
|
actionButton: 'fui-SplitNavItem__actionButton',
|
|
toggleButton: 'fui-SplitNavItem__toggleButton',
|
|
menuButton: 'fui-SplitNavItem__menuButton',
|
|
/**
|
|
* Tooltips don't have a class name prop, so this is just to satisfy the linter.
|
|
*/ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',
|
|
toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',
|
|
menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'
|
|
};
|
|
// Don't use makeResetStyles here because the sub components call it once and
|
|
// This links says that makeResetStyles should only be called once per element
|
|
// https://griffel.js.org/react/api/make-reset-styles/#limitations
|
|
const { actionButton, toggleButton, menuButton } = splitNavItemClassNames;
|
|
const buttonHoverStyles = {
|
|
[`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
|
|
opacity: 1,
|
|
pointerEvents: 'auto'
|
|
}
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/ const useSplitNaveItemStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
baseRoot: {
|
|
mc9l5x: "f22iagw",
|
|
i8kkvl: 0,
|
|
Belr9w4: 0,
|
|
rmohyg: "fx80lhs",
|
|
Bt984gj: "f1q9h2pe",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f19jm9xf",
|
|
fsow6f: "fgusgyc",
|
|
De3pzq: "f1ctqxl6",
|
|
B3o57yi: "fnsygzv",
|
|
Bkqvd7p: "f1e9ux7i",
|
|
Bmy1vo4: "f1xfaukr",
|
|
Jwef8y: "f11oyicx",
|
|
xwko9w: "f8z0t4e",
|
|
mcc9px: "f9ueil3",
|
|
B02v5zz: "f1g2hb8n",
|
|
i4x37a: "fpq6je",
|
|
ecr2s2: "f9fof1w"
|
|
},
|
|
baseNavItem: {
|
|
mc9l5x: "f22iagw",
|
|
B9bfxx9: "f1cxpek8",
|
|
qb2dma: "f1ub7u0d",
|
|
fsow6f: [
|
|
"f1o700av",
|
|
"fes3tcz"
|
|
],
|
|
qhf8xq: "f10pi13n",
|
|
Brf1p80: "f1s9ku6b",
|
|
i8kkvl: 0,
|
|
Belr9w4: 0,
|
|
rmohyg: "f1u2hskj",
|
|
De3pzq: "f3rmtva"
|
|
},
|
|
baseSecondary: {
|
|
Bf4jedk: "f107v6xj",
|
|
Bnt446c: "f1y335lp",
|
|
B1hrpyx: "f12pses1",
|
|
rjzwhg: "fibmr9j",
|
|
Bt984gj: "f1s2louj"
|
|
},
|
|
baseMedium: {
|
|
rjzwhg: "fjtod8q"
|
|
},
|
|
baseLarge: {
|
|
rjzwhg: "f16gijt3"
|
|
},
|
|
hoverAction: {
|
|
abs64n: "fk73vx1",
|
|
Bkecrkj: "f1aehjj5",
|
|
Bn62ygk: 0,
|
|
Cwk7ip: 0,
|
|
B3o57yi: 0,
|
|
Bmy1vo4: 0,
|
|
Bkqvd7p: 0,
|
|
Bi2q7bf: [
|
|
"fr12795",
|
|
"fcl876f"
|
|
],
|
|
Es3by: "f1gqqdtu"
|
|
}
|
|
}, {
|
|
d: [
|
|
".f22iagw{display:flex;}",
|
|
[
|
|
".fx80lhs{gap:unset;}",
|
|
{
|
|
p: -1
|
|
}
|
|
],
|
|
".f1q9h2pe{align-items:stretch;}",
|
|
[
|
|
".f19jm9xf{padding:unset;}",
|
|
{
|
|
p: -1
|
|
}
|
|
],
|
|
".fgusgyc{text-align:unset;}",
|
|
".f1ctqxl6{background-color:var(--colorNeutralBackground4);}",
|
|
".fnsygzv{transition-duration:var(--durationFaster);}",
|
|
".f1e9ux7i{transition-timing-function:var(--curveLinear);}",
|
|
".f1xfaukr{transition-property:background;}",
|
|
".f1cxpek8{text-transform:none;}",
|
|
".f1ub7u0d{align-self:stretch;}",
|
|
".f1o700av{text-align:left;}",
|
|
".fes3tcz{text-align:right;}",
|
|
".f10pi13n{position:relative;}",
|
|
".f1s9ku6b{justify-content:start;}",
|
|
[
|
|
".f1u2hskj{gap:var(--spacingVerticalL);}",
|
|
{
|
|
p: -1
|
|
}
|
|
],
|
|
".f3rmtva{background-color:transparent;}",
|
|
".f107v6xj{min-width:28px;}",
|
|
".f1y335lp{-webkit-padding-end:12px;padding-inline-end:12px;}",
|
|
".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}",
|
|
".fibmr9j{padding-block-start:5px;}",
|
|
".f1s2louj{align-items:start;}",
|
|
".fjtod8q{padding-block-start:9px;}",
|
|
".f16gijt3{padding-block-start:12px;}",
|
|
".fk73vx1{opacity:0;}",
|
|
".f1aehjj5{pointer-events:none;}",
|
|
[
|
|
".fr12795{transition:opacity 150ms cubic-bezier(0.33,0,0.67,1);}",
|
|
{
|
|
p: -1
|
|
}
|
|
],
|
|
[
|
|
".fcl876f{transition:opacity 150ms cubic-bezier(0.33, 0, 0.67, 1);}",
|
|
{
|
|
p: -1
|
|
}
|
|
],
|
|
".f1gqqdtu{will-change:opacity;}"
|
|
],
|
|
h: [
|
|
".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}",
|
|
".f8z0t4e:hover .fui-SplitNavItem__actionButton,.f8z0t4e:hover .fui-SplitNavItem__toggleButton,.f8z0t4e:hover .fui-SplitNavItem__menuButton{opacity:1;}",
|
|
".f9ueil3:hover .fui-SplitNavItem__actionButton,.f9ueil3:hover .fui-SplitNavItem__toggleButton,.f9ueil3:hover .fui-SplitNavItem__menuButton{pointer-events:auto;}"
|
|
],
|
|
w: [
|
|
".f1g2hb8n:focus-within .fui-SplitNavItem__actionButton,.f1g2hb8n:focus-within .fui-SplitNavItem__toggleButton,.f1g2hb8n:focus-within .fui-SplitNavItem__menuButton{opacity:1;}",
|
|
".fpq6je:focus-within .fui-SplitNavItem__actionButton,.fpq6je:focus-within .fui-SplitNavItem__toggleButton,.fpq6je:focus-within .fui-SplitNavItem__menuButton{pointer-events:auto;}"
|
|
],
|
|
a: [
|
|
".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"
|
|
]
|
|
});
|
|
const useSplitNavItemStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const splitNavItemStyles = useSplitNaveItemStyles();
|
|
const sharedRootClassNames = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
|
|
state.root.className = (0, _react.mergeClasses)(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
|
|
if (state.navItem) {
|
|
state.navItem.className = (0, _react.mergeClasses)(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
|
|
}
|
|
if (state.actionButton) {
|
|
state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
|
|
}
|
|
if (state.toggleButton) {
|
|
state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
|
|
}
|
|
if (state.menuButton) {
|
|
state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
|
|
}
|
|
return state;
|
|
};
|