@hero-design/rn 8.103.7 → 8.104.0

package/lib/index.js

@@ -6277,7 +6277,8 @@ var getIconTheme = function getIconTheme(theme) {
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    muted: theme.colors.mutedOnDefaultGlobalSurface
+    muted: theme.colors.mutedOnDefaultGlobalSurface,
+    inactive: theme.colors.inactiveOnDefaultGlobalSurface
   };
   var sizes = {
     xxxsmall: theme.fontSizes.small,
@@ -7407,6 +7408,85 @@ var getAppCueTheme = function getAppCueTheme(theme) {
   };
 };
 
+var getFilterTriggerTheme = function getFilterTriggerTheme(theme) {
+  var borderWidths = {
+    wrapper: {
+      filled: theme.borderWidths.medium,
+      outlined: theme.borderWidths.medium,
+      ghost: 0
+    }
+  };
+  var colors = {
+    wrapper: {
+      activeBackground: theme.colors.highlightedSurface,
+      inactiveBackground: theme.colors.neutralGlobalSurface,
+      background: {
+        active: {
+          filled: theme.colors.highlightedSurface,
+          outlined: 'transparent',
+          ghost: 'transparent',
+          filledLabeless: theme.colors.neutralGlobalSurface
+        },
+        inactive: {
+          filled: theme.colors.neutralGlobalSurface,
+          outlined: 'transparent',
+          ghost: 'transparent'
+        }
+      },
+      border: {
+        active: {
+          filled: theme.colors.highlightedSurface,
+          outlined: theme.colors.primaryOutline,
+          ghost: 'transparent',
+          filledLabeless: theme.colors.neutralGlobalSurface
+        },
+        inactive: {
+          filled: theme.colors.neutralGlobalSurface,
+          outlined: theme.colors.secondaryOutline,
+          ghost: 'transparent'
+        }
+      }
+    }
+  };
+  var space = {
+    wrapper: {
+      "default": {
+        paddingHorizontal: theme.space.smallMedium,
+        paddingVertical: theme.space.xsmall
+      },
+      labeless: {
+        paddingHorizontal: theme.space.small,
+        paddingVertical: theme.space.xsmall
+      },
+      itemGap: theme.space.xsmall
+    },
+    badge: {
+      labelessRight: theme.space.xxsmall,
+      labelessBottom: theme.space.xxsmall
+    }
+  };
+  var radii = {
+    wrapper: {
+      "default": theme.radii.xxxlarge,
+      labeless: theme.radii.xlarge
+    }
+  };
+  var sizes = {
+    wrapperHeight: scale(36)
+  };
+  var lineHeights = {
+    text: theme.lineHeights.small
+  };
+  return {
+    colors: colors,
+    space: space,
+    radii: radii,
+    borderWidths: borderWidths,
+    sizes: sizes,
+    lineHeights: lineHeights
+  };
+};
+
 var getTheme = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$2;
@@ -7439,6 +7519,7 @@ var getTheme = function getTheme() {
       empty: getEmptyTheme(globalTheme),
       error: getErrorTheme(globalTheme),
       fab: getFABTheme(globalTheme),
+      filterTrigger: getFilterTriggerTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
@@ -7644,7 +7725,7 @@ var FONTWEIGHT_MAP$2 = {
   regular: 'regular',
   'semi-bold': 'semiBold'
 };
-var StyledText$3 = index$b(reactNative.Text)(function (_ref) {
+var StyledText$4 = index$b(reactNative.Text)(function (_ref) {
   var themeFontSize = _ref.themeFontSize,
     themeFontWeight = _ref.themeFontWeight,
     themeIntent = _ref.themeIntent,
@@ -7676,7 +7757,7 @@ var Text = function Text(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$O);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
-  return /*#__PURE__*/React__namespace.default.createElement(StyledText$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -8406,7 +8487,8 @@ var COLOR_INTENTS = {
   warning: 'warning',
   'disabled-text': 'disabledText',
   'text-inverted': 'invertedText',
-  muted: 'muted'
+  muted: 'muted',
+  inactive: 'inactive'
 };
 var StyledHeroIcon = index$b(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
@@ -9133,7 +9215,7 @@ var StyledTextWrapper$1 = index$b(reactNative.View)(function () {
     height: '100%'
   };
 });
-var StyledText$2 = index$b(Typography.Body)(function (_ref2) {
+var StyledText$3 = index$b(Typography.Body)(function (_ref2) {
   var themeSize = _ref2.themeSize,
     theme = _ref2.theme;
   return _objectSpread2({
@@ -9188,7 +9270,7 @@ var Avatar = function Avatar(_ref) {
     themeIntent: intent,
     themeSize: size,
     style: style
-  }, (source === undefined || hasImageError) && /*#__PURE__*/React__namespace.default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
+  }, (source === undefined || hasImageError) && /*#__PURE__*/React__namespace.default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledText$3, {
     themeSize: size
   }, title)), source !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledImage$1, {
     resizeMode: "cover",
@@ -9713,7 +9795,7 @@ var StyledView$2 = index$b(reactNative.Animated.View)(function (_ref) {
     borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : theme.__hd__.badge.colors[themeIntent]
   };
 });
-var StyledText$1 = index$b(Typography.Caption)(function (_ref2) {
+var StyledText$2 = index$b(Typography.Caption)(function (_ref2) {
   var theme = _ref2.theme,
     themeSize = _ref2.themeSize;
   return {
@@ -9903,7 +9985,7 @@ var Badge = function Badge(_ref) {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
-  }) : /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
+  }) : /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
     themeSize: size
   }, content));
 };
@@ -23700,7 +23782,7 @@ var StyledContent = index$b(reactNative.View)(function (_ref2) {
     alignItems: 'center'
   };
 });
-var StyledBadge$1 = index$b(reactNative.View)(function (_ref3) {
+var StyledBadge$2 = index$b(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     right: theme.__hd__.mapPin.space.iconRight,
@@ -23788,7 +23870,7 @@ var MapPin = function MapPin(_ref) {
     icon: icon,
     size: "xsmall",
     testID: testID ? "".concat(testID, "-icon") : undefined
-  })), badgeIcon && /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, {
+  })), badgeIcon && /*#__PURE__*/React__namespace.default.createElement(StyledBadge$2, {
     testID: testID ? "".concat(testID, "-badge") : undefined
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBadgeIcon, {
     icon: badgeIcon,
@@ -26728,7 +26810,7 @@ var StyledView = index$b(reactNative.View)(function (_ref) {
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
   };
 });
-var StyledText = index$b(Typography.Caption)(function (_ref2) {
+var StyledText$1 = index$b(Typography.Caption)(function (_ref2) {
   var themeIntent = _ref2.themeIntent,
     theme = _ref2.theme;
   return {
@@ -26754,7 +26836,7 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText, {
+  }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
   }, content) : content);
@@ -27045,8 +27127,7 @@ var StyledInputContainer$1 = index$b(reactNative.View)(function (_ref8) {
     backgroundColor: theme.__hd__.toolbar.colors.inputContainerBackground,
     borderRadius: theme.__hd__.toolbar.radii.messageContainer,
     height: theme.__hd__.toolbar.sizes.messageInputHeight,
-    paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal,
-    paddingVertical: theme.__hd__.toolbar.space.messageInputPaddingVertical
+    paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal
   };
 });
 var StyledInput$1 = index$b(reactNative.TextInput)(function (_ref9) {
@@ -46606,7 +46687,7 @@ var StyledHandlerContainer = index$b(reactNative.View)(function (_ref5) {
     paddingVertical: theme.__hd__.search.space.inputVerticalPadding
   };
 });
-var StyledBadge = index$b(Badge$1)(function (_ref6) {
+var StyledBadge$1 = index$b(Badge$1)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     position: 'absolute',
@@ -46808,12 +46889,12 @@ var renderBadge = function renderBadge(props) {
   var content = props.content,
     icon = props.icon,
     rest = _objectWithoutProperties(props, _excluded$1);
-  if (content) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge, _extends$1({
+  if (content) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     content: content,
     size: "small"
   }, rest));
-  if (icon) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge, _extends$1({
+  if (icon) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     icon: icon,
     size: "small"
@@ -46923,6 +47004,122 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
+var getBackgroundColor = function getBackgroundColor(theme, themeIsActive, themeHasLabel, themeVariant) {
+  var colors = theme.__hd__.filterTrigger.colors;
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    return colors.wrapper.background.active.filledLabeless;
+  }
+  var state = themeIsActive ? 'active' : 'inactive';
+  return colors.wrapper.background[state][themeVariant];
+};
+var getBorderStyles = function getBorderStyles(theme, themeIsActive, themeHasLabel, themeVariant) {
+  var _theme$__hd__$filterT = theme.__hd__.filterTrigger,
+    colors = _theme$__hd__$filterT.colors,
+    borderWidths = _theme$__hd__$filterT.borderWidths,
+    radii = _theme$__hd__$filterT.radii;
+  var borderColor;
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    borderColor = colors.wrapper.border.active.filledLabeless;
+  } else {
+    var state = themeIsActive ? 'active' : 'inactive';
+    borderColor = colors.wrapper.border[state][themeVariant];
+  }
+  return {
+    borderWidth: borderWidths.wrapper[themeVariant],
+    borderColor: borderColor,
+    borderRadius: themeHasLabel ? radii.wrapper["default"] : radii.wrapper.labeless
+  };
+};
+var getSpacingStyles = function getSpacingStyles(theme, themeHasLabel) {
+  var space = theme.__hd__.filterTrigger.space;
+  var paddingConfig = themeHasLabel ? space.wrapper["default"] : space.wrapper.labeless;
+  return {
+    gap: space.wrapper.itemGap,
+    paddingHorizontal: paddingConfig.paddingHorizontal,
+    paddingVertical: paddingConfig.paddingVertical
+  };
+};
+var StyledFilterWrapper = index$b(reactNative.TouchableOpacity)(function (_ref) {
+  var theme = _ref.theme,
+    themeActive = _ref.themeActive,
+    themeVariant = _ref.themeVariant,
+    themeHasLabel = _ref.themeHasLabel;
+  return _objectSpread2(_objectSpread2({
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    height: theme.__hd__.filterTrigger.sizes.wrapperHeight,
+    backgroundColor: getBackgroundColor(theme, themeActive, themeHasLabel, themeVariant)
+  }, getBorderStyles(theme, themeActive, themeHasLabel, themeVariant)), getSpacingStyles(theme, themeHasLabel));
+});
+var StyledBadge = index$b(Badge$1)(function (_ref2) {
+  var theme = _ref2.theme,
+    themeHasLabel = _ref2.themeHasLabel;
+  return _objectSpread2({
+    position: 'absolute'
+  }, themeHasLabel ? {
+    right: 0,
+    bottom: 0
+  } : {
+    right: -theme.__hd__.filterTrigger.space.badge.labelessRight,
+    bottom: -theme.__hd__.filterTrigger.space.badge.labelessBottom
+  });
+});
+var StyledText = index$b(Typography.Body)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    lineHeight: theme.__hd__.filterTrigger.lineHeights.text,
+    textAlignVertical: 'center',
+    includeFontPadding: false
+  };
+});
+
+var FilterTrigger = function FilterTrigger(_ref) {
+  var label = _ref.label,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$filterCount = _ref.filterCount,
+    filterCount = _ref$filterCount === void 0 ? 0 : _ref$filterCount,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    suffix = _ref.suffix,
+    onPress = _ref.onPress,
+    testID = _ref.testID,
+    style = _ref.style;
+  var shouldShowBadge = filterCount > 0 && active;
+  var iconIntent = active ? 'text' : 'inactive';
+  var typographyVariant = active ? 'small-bold' : 'small';
+  return /*#__PURE__*/React__namespace.default.createElement(StyledFilterWrapper, {
+    testID: testID,
+    style: style,
+    themeActive: active,
+    themeVariant: variant,
+    onPress: onPress,
+    themeHasLabel: !!label
+  }, label ? /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledText, {
+    variant: typographyVariant
+  }, label), shouldShowBadge && /*#__PURE__*/React__namespace.default.createElement(Badge$1, {
+    content: filterCount,
+    size: "small"
+  }), suffix && /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: suffix,
+    size: "xxxsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  })) : /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, suffix && /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: suffix,
+    size: "xsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  }), shouldShowBadge && /*#__PURE__*/React__namespace.default.createElement(StyledBadge, {
+    content: filterCount,
+    size: "small",
+    themeHasLabel: !!label
+  })));
+};
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AppCue = AppCue;
@@ -46947,6 +47144,7 @@ exports.Drawer = index$7;
 exports.Empty = Empty;
 exports.Error = ErrorComponent;
 exports.FAB = FAB;
+exports.FilterTrigger = FilterTrigger;
 exports.FlatListWithFAB = FlatListWithFAB;
 exports.FloatingIsland = FloatingIsland;
 exports.HeroDesignProvider = HeroDesignProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.103.7",
+  "version": "8.104.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/FilterTrigger/StyledFilterTrigger.tsx

@@ -0,0 +1,104 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+import { Theme } from '../../theme';
+import Badge from '../Badge';
+import Typography from '../Typography';
+
+type Variant = 'filled' | 'outlined' | 'ghost';
+
+const getBackgroundColor = (
+  theme: Theme,
+  themeIsActive: boolean,
+  themeHasLabel: boolean,
+  themeVariant: Variant
+): string => {
+  const { colors } = theme.__hd__.filterTrigger;
+
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    return colors.wrapper.background.active.filledLabeless;
+  }
+
+  const state = themeIsActive ? 'active' : 'inactive';
+  return colors.wrapper.background[state][themeVariant];
+};
+
+const getBorderStyles = (
+  theme: Theme,
+  themeIsActive: boolean,
+  themeHasLabel: boolean,
+  themeVariant: Variant
+) => {
+  const { colors, borderWidths, radii } = theme.__hd__.filterTrigger;
+
+  let borderColor: string;
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    borderColor = colors.wrapper.border.active.filledLabeless;
+  } else {
+    const state = themeIsActive ? 'active' : 'inactive';
+    borderColor = colors.wrapper.border[state][themeVariant];
+  }
+
+  return {
+    borderWidth: borderWidths.wrapper[themeVariant],
+    borderColor,
+    borderRadius: themeHasLabel
+      ? radii.wrapper.default
+      : radii.wrapper.labeless,
+  };
+};
+
+const getSpacingStyles = (theme: Theme, themeHasLabel: boolean) => {
+  const { space } = theme.__hd__.filterTrigger;
+  const paddingConfig = themeHasLabel
+    ? space.wrapper.default
+    : space.wrapper.labeless;
+
+  return {
+    gap: space.wrapper.itemGap,
+    paddingHorizontal: paddingConfig.paddingHorizontal,
+    paddingVertical: paddingConfig.paddingVertical,
+  };
+};
+
+export const StyledFilterWrapper = styled(TouchableOpacity)<{
+  themeActive: boolean;
+  themeVariant: Variant;
+  themeHasLabel: boolean;
+}>(({ theme, themeActive, themeVariant, themeHasLabel }) => ({
+  position: 'relative',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  height: theme.__hd__.filterTrigger.sizes.wrapperHeight,
+  backgroundColor: getBackgroundColor(
+    theme,
+    themeActive,
+    themeHasLabel,
+    themeVariant
+  ),
+  ...getBorderStyles(theme, themeActive, themeHasLabel, themeVariant),
+  ...getSpacingStyles(theme, themeHasLabel),
+}));
+
+export const StyledBadge = styled(Badge)<{ themeHasLabel: boolean }>(
+  ({ theme, themeHasLabel }) => ({
+    position: 'absolute',
+
+    ...(themeHasLabel
+      ? {
+          right: 0,
+          bottom: 0,
+        }
+      : {
+          right: -theme.__hd__.filterTrigger.space.badge.labelessRight,
+          bottom: -theme.__hd__.filterTrigger.space.badge.labelessBottom,
+        }),
+  })
+);
+
+export const StyledText = styled(Typography.Body)(({ theme }) => ({
+  lineHeight: theme.__hd__.filterTrigger.lineHeights.text,
+  textAlignVertical: 'center',
+  includeFontPadding: false,
+}));