@hero-design/rn 8.103.7 → 8.104.1-alpha.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3293) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:4176) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -15,9 +15,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 13.2s
+created lib/index.js, es/index.js in 1m 11.4s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 20s
+created ., . in 20.6s

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hero-design/rn
 
+## 8.104.1-alpha.0
+
+### Patch Changes
+
+- [#3497](https://github.com/Thinkei/hero-design/pull/3497) [`e92d1dab57316441e7b5054debe823328e1a1083`](https://github.com/Thinkei/hero-design/commit/e92d1dab57316441e7b5054debe823328e1a1083) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [Font] replace playful font to Saiga
+
+## 8.104.0
+
+### Minor Changes
+
+- [#4097](https://github.com/Thinkei/hero-design/pull/4097) [`1a70cbc2bc27c426c6d9ee94206fb7915ef9aa32`](https://github.com/Thinkei/hero-design/commit/1a70cbc2bc27c426c6d9ee94206fb7915ef9aa32) Thanks [@ttkien](https://github.com/ttkien)! - [FilterTrigger] Add component
+
+- [#4097](https://github.com/Thinkei/hero-design/pull/4097) [`1a70cbc2bc27c426c6d9ee94206fb7915ef9aa32`](https://github.com/Thinkei/hero-design/commit/1a70cbc2bc27c426c6d9ee94206fb7915ef9aa32) Thanks [@ttkien](https://github.com/ttkien)! - [Icon] Add inactive intent
+
+### Patch Changes
+
+- [#4097](https://github.com/Thinkei/hero-design/pull/4097) [`1a70cbc2bc27c426c6d9ee94206fb7915ef9aa32`](https://github.com/Thinkei/hero-design/commit/1a70cbc2bc27c426c6d9ee94206fb7915ef9aa32) Thanks [@ttkien](https://github.com/ttkien)! - [Toolbar] Fix TextInput layout on Toolbar message
+
 ## 8.103.7
 
 ### Patch Changes

package/es/index.js

@@ -6248,7 +6248,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,
@@ -7378,6 +7379,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;
@@ -7410,6 +7490,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),
@@ -7615,7 +7696,7 @@ var FONTWEIGHT_MAP$2 = {
   regular: 'regular',
   'semi-bold': 'semiBold'
 };
-var StyledText$3 = index$b(Text$1)(function (_ref) {
+var StyledText$4 = index$b(Text$1)(function (_ref) {
   var themeFontSize = _ref.themeFontSize,
     themeFontWeight = _ref.themeFontWeight,
     themeIntent = _ref.themeIntent,
@@ -7647,7 +7728,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__default.createElement(StyledText$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -8377,7 +8458,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,
@@ -9104,7 +9186,7 @@ var StyledTextWrapper$1 = index$b(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({
@@ -9159,7 +9241,7 @@ var Avatar = function Avatar(_ref) {
     themeIntent: intent,
     themeSize: size,
     style: style
-  }, (source === undefined || hasImageError) && /*#__PURE__*/React__default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__default.createElement(StyledText$2, {
+  }, (source === undefined || hasImageError) && /*#__PURE__*/React__default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__default.createElement(StyledText$3, {
     themeSize: size
   }, title)), source !== undefined && /*#__PURE__*/React__default.createElement(StyledImage$1, {
     resizeMode: "cover",
@@ -9684,7 +9766,7 @@ var StyledView$2 = index$b(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 {
@@ -9874,7 +9956,7 @@ var Badge = function Badge(_ref) {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
-  }) : /*#__PURE__*/React__default.createElement(StyledText$1, {
+  }) : /*#__PURE__*/React__default.createElement(StyledText$2, {
     themeSize: size
   }, content));
 };
@@ -23671,7 +23753,7 @@ var StyledContent = index$b(View)(function (_ref2) {
     alignItems: 'center'
   };
 });
-var StyledBadge$1 = index$b(View)(function (_ref3) {
+var StyledBadge$2 = index$b(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     right: theme.__hd__.mapPin.space.iconRight,
@@ -23759,7 +23841,7 @@ var MapPin = function MapPin(_ref) {
     icon: icon,
     size: "xsmall",
     testID: testID ? "".concat(testID, "-icon") : undefined
-  })), badgeIcon && /*#__PURE__*/React__default.createElement(StyledBadge$1, {
+  })), badgeIcon && /*#__PURE__*/React__default.createElement(StyledBadge$2, {
     testID: testID ? "".concat(testID, "-badge") : undefined
   }, /*#__PURE__*/React__default.createElement(StyledBadgeIcon, {
     icon: badgeIcon,
@@ -26699,7 +26781,7 @@ var StyledView = index$b(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 {
@@ -26725,7 +26807,7 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }), typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledText, {
+  }), typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
   }, content) : content);
@@ -27016,8 +27098,7 @@ var StyledInputContainer$1 = index$b(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(TextInput$1)(function (_ref9) {
@@ -46577,7 +46658,7 @@ var StyledHandlerContainer = index$b(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',
@@ -46779,12 +46860,12 @@ var renderBadge = function renderBadge(props) {
   var content = props.content,
     icon = props.icon,
     rest = _objectWithoutProperties(props, _excluded$1);
-  if (content) return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
+  if (content) return /*#__PURE__*/React__default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     content: content,
     size: "small"
   }, rest));
-  if (icon) return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
+  if (icon) return /*#__PURE__*/React__default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     icon: icon,
     size: "small"
@@ -46894,4 +46975,120 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
-export { Accordion, Alert, AppCue, Attachment, index$a as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$9 as Carousel, Chart, Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$b as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+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(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__default.createElement(StyledFilterWrapper, {
+    testID: testID,
+    style: style,
+    themeActive: active,
+    themeVariant: variant,
+    onPress: onPress,
+    themeHasLabel: !!label
+  }, label ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledText, {
+    variant: typographyVariant
+  }, label), shouldShowBadge && /*#__PURE__*/React__default.createElement(Badge$1, {
+    content: filterCount,
+    size: "small"
+  }), suffix && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: suffix,
+    size: "xxxsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, suffix && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: suffix,
+    size: "xsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  }), shouldShowBadge && /*#__PURE__*/React__default.createElement(StyledBadge, {
+    content: filterCount,
+    size: "small",
+    themeHasLabel: !!label
+  })));
+};
+
+export { Accordion, Alert, AppCue, Attachment, index$a as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$9 as Carousel, Chart, Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$b as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };