@7shifts/sous-chef 3.87.2-beta.0 → 3.87.2-beta.1
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/hooks/useBackgroundColorCheck.d.ts +15 -0
- package/dist/index.css +3 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +60 -5
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +60 -5
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6364,7 +6364,54 @@ var LINK_TARGET = {
|
|
|
6364
6364
|
BLANK: '_blank'
|
|
6365
6365
|
};
|
|
6366
6366
|
|
|
6367
|
-
var styles$1g = {"link":"_EiQ4c"};
|
|
6367
|
+
var styles$1g = {"link":"_EiQ4c","link--contrast":"_weJDR"};
|
|
6368
|
+
|
|
6369
|
+
/**
|
|
6370
|
+
* This hook checks the background color of the container element
|
|
6371
|
+
* and determines if it's dark or light. It climbs up the DOM tree
|
|
6372
|
+
* to find the first ancestor with a non-transparent background color.
|
|
6373
|
+
*
|
|
6374
|
+
* NOTE: Use this hook only when necessary, as it involves DOM access
|
|
6375
|
+
* and may impact performance.
|
|
6376
|
+
*/
|
|
6377
|
+
var useContainerBackgroundColorCheck = function useContainerBackgroundColorCheck(_ref) {
|
|
6378
|
+
var ref = _ref.ref,
|
|
6379
|
+
shouldCheck = _ref.shouldCheck;
|
|
6380
|
+
var _useState = React.useState(),
|
|
6381
|
+
background = _useState[0],
|
|
6382
|
+
setBackground = _useState[1];
|
|
6383
|
+
// Walk up the DOM tree to find the first ancestor with a
|
|
6384
|
+
// non-transparent background color. Fallback to body color.
|
|
6385
|
+
var getEffectiveBackgroundColor = function getEffectiveBackgroundColor(el) {
|
|
6386
|
+
var node = el == null ? void 0 : el.parentElement;
|
|
6387
|
+
while (node) {
|
|
6388
|
+
var bg = window.getComputedStyle(node).getPropertyValue('background-color');
|
|
6389
|
+
// "transparent" or rgba(..., 0) should be ignored
|
|
6390
|
+
var isTransparent = bg === 'transparent' || /rgba\([^)]*,\s*0\)/.test(bg);
|
|
6391
|
+
if (!isTransparent) {
|
|
6392
|
+
return bg;
|
|
6393
|
+
}
|
|
6394
|
+
// Stop climbing at <body> and use its color
|
|
6395
|
+
if (node.tagName.toLowerCase() === 'body') {
|
|
6396
|
+
break;
|
|
6397
|
+
}
|
|
6398
|
+
node = node.parentElement;
|
|
6399
|
+
}
|
|
6400
|
+
var bodyBg = window.getComputedStyle(document.body).getPropertyValue('background-color');
|
|
6401
|
+
return bodyBg;
|
|
6402
|
+
};
|
|
6403
|
+
React.useLayoutEffect(function () {
|
|
6404
|
+
var element = ref.current;
|
|
6405
|
+
if (!shouldCheck || !element) {
|
|
6406
|
+
return;
|
|
6407
|
+
}
|
|
6408
|
+
var bg = getEffectiveBackgroundColor(element);
|
|
6409
|
+
var rgb = bg.replace(/^rgba?\(|\s+|\)$/g, '').split(',').slice(0, 3).map(Number);
|
|
6410
|
+
var luminance = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
|
|
6411
|
+
setBackground(luminance < 128 ? 'dark' : 'light');
|
|
6412
|
+
}, [ref, shouldCheck]);
|
|
6413
|
+
return background;
|
|
6414
|
+
};
|
|
6368
6415
|
|
|
6369
6416
|
var _excluded$t = ["href", "target", "theme", "onClick", "children"];
|
|
6370
6417
|
var Link = function Link(_ref) {
|
|
@@ -6372,19 +6419,27 @@ var Link = function Link(_ref) {
|
|
|
6372
6419
|
var href = _ref.href,
|
|
6373
6420
|
_ref$target = _ref.target,
|
|
6374
6421
|
target = _ref$target === void 0 ? LINK_TARGET.BLANK : _ref$target,
|
|
6375
|
-
|
|
6376
|
-
theme = _ref$theme === void 0 ? LINK_THEME.PRIMARY : _ref$theme,
|
|
6422
|
+
theme = _ref.theme,
|
|
6377
6423
|
onClick = _ref.onClick,
|
|
6378
6424
|
children = _ref.children,
|
|
6379
6425
|
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
|
|
6380
6426
|
var _getDataProps = getDataProps(otherProps),
|
|
6381
6427
|
dataProps = _getDataProps.dataProps;
|
|
6428
|
+
var ref = React__default["default"].useRef(null);
|
|
6429
|
+
var background = useContainerBackgroundColorCheck({
|
|
6430
|
+
ref: ref,
|
|
6431
|
+
// It only needs to check the background when theme is not provided
|
|
6432
|
+
shouldCheck: !theme
|
|
6433
|
+
});
|
|
6434
|
+
// If there is no theme provided, determine it based on the container background
|
|
6435
|
+
var currentTheme = theme || (background === 'dark' ? LINK_THEME.CONTRAST : LINK_THEME.PRIMARY);
|
|
6382
6436
|
return React__default["default"].createElement("a", _extends({}, dataProps, {
|
|
6383
|
-
className: classnames__default["default"](styles$1g['link'], (_classNames = {}, _classNames[styles$1g['link--primary']] =
|
|
6437
|
+
className: classnames__default["default"](styles$1g['link'], (_classNames = {}, _classNames[styles$1g['link--primary']] = currentTheme === LINK_THEME.PRIMARY, _classNames[styles$1g['link--contrast']] = currentTheme === LINK_THEME.CONTRAST, _classNames)),
|
|
6384
6438
|
href: href,
|
|
6385
6439
|
target: target,
|
|
6386
6440
|
onClick: onClick,
|
|
6387
|
-
rel: target === LINK_TARGET.BLANK ? 'noopener noreferrer' : ''
|
|
6441
|
+
rel: target === LINK_TARGET.BLANK ? 'noopener noreferrer' : '',
|
|
6442
|
+
ref: ref
|
|
6388
6443
|
}), children);
|
|
6389
6444
|
};
|
|
6390
6445
|
|