@hyphen/hyphen-components 7.0.0 → 7.2.0

package/dist/hyphen-components.esm.js

@@ -256,6 +256,7 @@ Component, props, getDefault) {
 var styles$z = {"box-transition":"Box-module_box-transition__eQx8C"};
 
 var _excluded$R = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "textTransform", "textWrap", "wrap", "whiteSpace", "width", "wordBreak", "zIndex"];
+var AUTO_FONT_COLOR_BACKGROUNDS = ['success', 'warning', 'danger', 'info'];
 /**
  * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
  * elements.
@@ -357,6 +358,10 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var maxWidthCss = getDimensionCss('mw', maxWidth);
   var minHeightCss = getDimensionCss('minh', minHeight);
   var minWidthCss = getDimensionCss('minw', minWidth);
+  // `inverse` background uses a matching `inverse` font color instead of the
+  // generic auto-mapped colors in AUTO_FONT_COLOR_BACKGROUNDS, so it is
+  // intentionally handled separately here.
+  var finalColor = color != null ? color : background === 'inverse' ? 'inverse' : AUTO_FONT_COLOR_BACKGROUNDS.includes(background) ? 'grey' : undefined;
   var isFlexBox = typeof display === 'string' && display.includes('flex');
   var flexDirectionClasses = isFlexBox ? generateResponsiveClasses('flex-direction', direction) : null;
   var cssPropertyMap = {
@@ -399,7 +404,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var boxClasses = classNames.apply(void 0, [className, cssShorthandToClasses('m', margin), cssShorthandToClasses('p', padding), cssShorthandToClasses('br', radius), cssShorthandToClasses('g', gap), cssShorthandToClasses('cg', columnGap), cssShorthandToClasses('rg', rowGap), heightCss.classes, maxHeightCss.classes, minHeightCss.classes, maxWidthCss.classes, minWidthCss.classes, widthCss.classes, flexDirectionClasses, generateResponsiveClasses('display', display), generateResponsiveClasses('justify-content', justifyContent), generateResponsiveClasses('align-items', alignItems), generateResponsiveClasses('align-content', alignContent), generateResponsiveClasses('align-self', alignSelf), generateResponsiveClasses('font-family', fontFamily), generateResponsiveClasses('font-size', fontSize), generateResponsiveClasses('overflow', overflow), generateResponsiveClasses('shadow', shadow), generateResponsiveClasses('flex', flex), cssShorthandToClasses('bw', borderWidth), generateResponsiveClasses('font-weight', fontWeight), generateResponsiveClasses('text-align', textAlign), generateResponsiveClasses('transform', textTransform), generateResponsiveClasses('text-wrap', textWrap), generateResponsiveClasses('position', position), generateResponsiveClasses('z-index', zIndex), generateResponsiveClasses('whitespace', whiteSpace), generateResponsiveClasses('break', wordBreak)].concat(hoverClasses != null ? hoverClasses : [], focusClasses != null ? focusClasses : [], [(_ref3 = {
     'flex-wrap': isFlexBox && wrap,
     'flex-nowrap': isFlexBox && wrap === false
-  }, _ref3["background-color-" + background] = background, _ref3["font-color-" + color] = color, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$z['box-transition']] = hover || focus, _ref3)]));
+  }, _ref3["background-color-" + background] = background, _ref3["font-color-" + finalColor] = finalColor, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$z['box-transition']] = hover || focus, _ref3)]));
   var boxStyles = _extends({}, style, heightCss.styles, maxHeightCss.styles, maxWidthCss.styles, widthCss.styles, minHeightCss.styles, minWidthCss.styles);
   /**
    * Creates an object that maps the flex direction to either `right` or `bottom`
@@ -2643,9 +2648,10 @@ var SelectInputNative = function SelectInputNative(_ref) {
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var placeholderOption = {
     value: '',
-    label: placeholder
+    label: placeholder,
+    disabled: true
   };
-  var optionsWithPlaceholder = [_extends({}, placeholderOption)].concat(options);
+  var optionsWithPlaceholder = [placeholderOption].concat(options);
   var responsiveClasses = generateResponsiveClasses('size', size);
   var selectWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$g['select-input-native-wrapper']].concat(responsiveClasses.map(function (className) {
     return styles$g[className];
@@ -2675,11 +2681,12 @@ var SelectInputNative = function SelectInputNative(_ref) {
     id: id,
     required: isRequired
   }, optionsWithPlaceholder.map(function (option) {
+    var _option$disabled;
     return React__default.createElement(Box, {
       as: "option",
       key: option.value,
       value: option.value,
-      disabled: option.value === '',
+      disabled: (_option$disabled = option.disabled) != null ? _option$disabled : false,
       hidden: option.value === '',
       color: option.value === '' ? 'disabled' : 'base'
     }, option.label);