@octopusdeploy/design-system-components
Version:
The design systems component library.
106 lines (105 loc) • 4.76 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.scrollbarStyles = exports.ScrollArea = void 0;
exports.useCurrentScrollArea = useCurrentScrollArea;
exports.useScrollAreaTrail = useScrollAreaTrail;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = __importStar(require("react"));
const uuid_1 = require("uuid");
const ScrollAreaContext = react_1.default.createContext([document.scrollingElement ?? document.documentElement]);
function ScrollAreaProvider({ scrollAreas, children }) {
return (0, jsx_runtime_1.jsx)(ScrollAreaContext.Provider, { value: scrollAreas, children: children });
}
exports.ScrollArea = (0, react_1.forwardRef)(({ children, flex, scrollAreaRef, stableGutter }, ref) => {
const parentScrollArea = useScrollAreaTrail();
const [scrollAreaElement, setScrollAreaElement] = react_1.default.useState(null);
const combinedRef = react_1.default.useRef(null);
react_1.default.useImperativeHandle(scrollAreaRef, () => combinedRef.current);
const scrollAreas = react_1.default.useMemo(() => {
if (!scrollAreaElement) {
return parentScrollArea;
}
return [...parentScrollArea, scrollAreaElement];
}, [parentScrollArea, scrollAreaElement]);
const id = `scroll-${(0, uuid_1.v4)()}`;
return ((0, jsx_runtime_1.jsx)(ScrollAreaProvider, { scrollAreas: scrollAreas, children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(scrollAreaStyles, exports.scrollbarStyles, flex ? flexStyles : blockStyles, { [stableGutterStyles]: stableGutter }), id: id, ref: (el) => {
setScrollAreaElement(el);
combinedRef.current = el;
}, children: children }) }));
});
exports.ScrollArea.displayName = "ScrollArea";
exports.scrollbarStyles = (0, css_1.css)({
"@supports (scrollbar-color: auto)": {
scrollbarColor: `${design_system_tokens_1.themeTokens.color.scrollbar.handle} ${design_system_tokens_1.themeTokens.color.scrollbar.background}`,
},
//Although we may apply some styles globally, we specifically
//need styles such as these locally here to ensure safari behaves.
//This only applies to these non standard selectors.
"@supports selector(::-webkit-scrollbar)": {
"&::-webkit-scrollbar": {
width: "8px",
height: "8px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: `${design_system_tokens_1.themeTokens.color.scrollbar.background}`,
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: design_system_tokens_1.themeTokens.color.scrollbar.handle,
borderRadius: design_system_tokens_1.borderRadius.large, //required for safari
},
},
});
const scrollAreaStyles = (0, css_1.css)({
overflow: "auto",
});
const stableGutterStyles = (0, css_1.css)({
scrollbarGutter: "stable",
});
const flexStyles = (0, css_1.css)({
flex: 1,
});
const blockStyles = (0, css_1.css)({
height: "100%",
});
function useCurrentScrollArea() {
const scrollAreas = useScrollAreaTrail();
return react_1.default.useMemo(() => scrollAreas[scrollAreas.length - 1], [scrollAreas]);
}
function useScrollAreaTrail() {
return react_1.default.useContext(ScrollAreaContext);
}