@hero-design/rn 8.91.1 → 8.91.4

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3055) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3014) 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...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [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 52.1s
+created lib/index.js, es/index.js in 55s

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @hero-design/rn
 
+## 8.91.4
+
+### Patch Changes
+
+- [#3699](https://github.com/Thinkei/hero-design/pull/3699) [`8e1eb77ac97e7b367b74361717772c7e15a61627`](https://github.com/Thinkei/hero-design/commit/8e1eb77ac97e7b367b74361717772c7e15a61627) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [FAB][bottomsheet] Update color
+
+  - FAB: Update button and backdrop color and shadow
+  - BottomSheet: Remove shadow and update backdrop color
+
+- [#3704](https://github.com/Thinkei/hero-design/pull/3704) [`643421d7d76789a9bb7f65a850d1c754bed52449`](https://github.com/Thinkei/hero-design/commit/643421d7d76789a9bb7f65a850d1c754bed52449) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Calendar.Range] Allow selecting same date
+
+## 8.91.3
+
+### Patch Changes
+
+- [#3696](https://github.com/Thinkei/hero-design/pull/3696) [`769f2738b4d870703ad169290f3cc36305920a28`](https://github.com/Thinkei/hero-design/commit/769f2738b4d870703ad169290f3cc36305920a28) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Update mobile shadow tokens
+
+## 8.91.2
+
+### Patch Changes
+
+- [#3694](https://github.com/Thinkei/hero-design/pull/3694) [`6b5810543df428ac5e4ffb6be8a3a0c820177d23`](https://github.com/Thinkei/hero-design/commit/6b5810543df428ac5e4ffb6be8a3a0c820177d23) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Checkbox][switch] Update color
+
+- [#3695](https://github.com/Thinkei/hero-design/pull/3695) [`5b3d9e000462957834b653bf9f2a3934f39aca6b`](https://github.com/Thinkei/hero-design/commit/5b3d9e000462957834b653bf9f2a3934f39aca6b) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Search.OneLine][textinput] Update placeholder color
+
+- [#3697](https://github.com/Thinkei/hero-design/pull/3697) [`0bb02b0f890e99650c5dce6afc231da2c3507539`](https://github.com/Thinkei/hero-design/commit/0bb02b0f890e99650c5dce6afc231da2c3507539) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [TextInput][richtexteditor] Add element to wrap the label
+
 ## 8.91.1
 
 ### Patch Changes

package/es/index.js

@@ -1910,8 +1910,10 @@ var globalPalette$1 = {
   archived: palette$9.silverChalice,
   mutedArchived: palette$9.silverChaliceLight20,
   archivedSurface: palette$9.cumberlandFog,
-  onArchivedSurface: palette$9.windsorGrey
+  onArchivedSurface: palette$9.windsorGrey,
   // End of Updated 21 / Nov / 22
+  black: '#000000',
+  white: '#ffffff'
 };
 
 var swagBrandSystemPallete$1 = {
@@ -1986,10 +1988,10 @@ var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, glo
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
-  mutedOnDefaultGlobalSurface: palette$3.offBlackLight30,
-  inactiveOnDefaultGlobalSurface: palette$3.offBlackLight50,
+  mutedOnDefaultGlobalSurface: '#4d6265',
+  inactiveOnDefaultGlobalSurface: '#808f91',
   primaryOutline: palette$3.offBlack,
-  inactiveOutline: palette$3.offBlackLight50
+  inactiveOutline: '#808f91'
 });
 
 var swagBrandSystemPallete = {
@@ -2005,9 +2007,12 @@ var swagBrandSystemPallete = {
   decorativeSecondary: '#fdfbff',
   decorativeSecondarySurface: '#f0e6ff'
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
+var swagSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete), {}, {
+  name: 'swagLight'
+});
 
 var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
+  name: 'swagLightJobs',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',
@@ -2124,7 +2129,8 @@ var ehWorkDarkSystemPalette = {
   decorativeSecondary: '#280541',
   decorativeSecondarySurface: '#4c1d95',
   // Theme Mode
-  themeMode: 'dark'
+  themeMode: 'dark',
+  name: 'ehWorkDark'
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -2289,19 +2295,116 @@ var getRadii = function getRadii(baseRadius) {
   };
 };
 
-var getShadows = function getShadows(systemPalette) {
-  return {
-    "default": {
-      shadowOffset: {
-        width: 0,
-        height: 2
-      },
-      shadowColor: systemPalette.primaryOutline,
-      shadowOpacity: 0.12,
-      shadowRadius: 4,
-      elevation: 3
-    }
-  };
+var swagLightShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var swagLightJobsShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagLightJobsSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var ehWorkDarkShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.56,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.24,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var getShadows = function getShadows(palette) {
+  switch (palette.name) {
+    case 'swagLight':
+      return swagLightShadowPalette;
+    case 'swagLightJobs':
+      return swagLightJobsShadowPalette;
+    case 'ehWorkDark':
+      return ehWorkDarkShadowPalette;
+    default:
+      return swagLightShadowPalette;
+  }
 };
 
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
@@ -2563,7 +2666,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.overlayGlobalSurface,
+    backdrop: theme.colors.black,
     floatingHeaderIconBackground: theme.colors.archivedSurface
   };
   var sizes = {
@@ -2580,15 +2683,6 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     floatingInnerPadding: theme.space.small,
     floatingHeaderIconPadding: theme.space.small
   };
-  var shadows = {
-    offset: {
-      width: 0,
-      height: 3
-    },
-    opacity: 0.4,
-    radius: theme.radii.xlarge,
-    elevation: 10
-  };
   var radii = {
     "default": theme.radii.xlarge,
     floating: theme.radii['5xlarge'],
@@ -2596,7 +2690,6 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   };
   return {
     colors: colors,
-    shadows: shadows,
     radii: radii,
     sizes: sizes,
     space: space
@@ -2808,8 +2901,15 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
     borders: {
       "default": theme.colors.primaryOutline,
+      checked: theme.colors.primaryOutline,
       disabled: theme.colors.disabledOutline,
       readonly: theme.colors.inactiveOutline
+    },
+    checkboxBorder: {
+      "default": theme.colors.primaryOutline,
+      checked: theme.colors.primary,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface
     }
   };
   var space = {
@@ -3033,12 +3133,12 @@ var getFABTheme = function getFABTheme(theme) {
     buttonBackground: theme.colors.overlayGlobalSurface,
     buttonPressedBackground: theme.colors.overlayGlobalSurface,
     buttonActiveBackground: theme.colors.overlayGlobalSurface,
-    icon: theme.colors.onPrimary,
+    icon: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.overlayGlobalSurface,
     actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
-    titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary
+    backdropBackground: theme.colors.black,
+    titleText: theme.colors.onDarkGlobalSurface,
+    actionItemText: theme.colors.onDarkGlobalSurface
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -3062,11 +3162,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    offset: theme.shadows["default"].shadowOffset,
-    opacity: theme.shadows["default"].shadowOpacity,
-    radius: theme.shadows["default"].shadowRadius,
-    elevation: theme.shadows["default"].elevation,
-    color: theme.shadows["default"].shadowColor
+    "default": theme.shadows.cardDrawer
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -3582,14 +3678,14 @@ var getSwipeableTheme = function getSwipeableTheme(theme) {
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
     backgroundColors: {
-      checked: theme.colors.primary,
+      checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.highlightedSurface,
-      'disabled-unchecked': theme.colors.mutedOnDefaultGlobalSurface
+      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface
     },
-    thumb: theme.colors.onDarkGlobalSurface,
+    thumb: theme.colors.white,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
+      background: theme.colors.neutralGlobalSurface,
       textBackground: theme.colors.decorativePrimarySurface
     }
   };
@@ -3745,7 +3841,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.inactiveOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
-    }
+    },
+    placeholder: theme.colors.mutedOnDefaultGlobalSurface
   };
   var space = {
     containerPadding: theme.space.medium,
@@ -9690,11 +9787,6 @@ var StyledFloatingBottomSheet = index$a(Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     width: '100%',
-    shadowColor: theme.__hd__.bottomSheet.colors.shadow,
-    shadowOffset: theme.__hd__.bottomSheet.shadows.offset,
-    shadowOpacity: theme.__hd__.bottomSheet.shadows.opacity,
-    shadowRadius: theme.__hd__.bottomSheet.shadows.radius,
-    elevation: theme.__hd__.bottomSheet.shadows.elevation,
     backgroundColor: theme.__hd__.bottomSheet.colors.background,
     borderRadius: theme.__hd__.bottomSheet.radii.floating,
     maxHeight: '100%',
@@ -9708,11 +9800,6 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     borderTopRightRadius: theme.__hd__.bottomSheet.radii["default"],
     backgroundColor: theme.__hd__.bottomSheet.colors.background,
     width: '100%',
-    shadowColor: theme.__hd__.bottomSheet.colors.shadow,
-    shadowOffset: theme.__hd__.bottomSheet.shadows.offset,
-    shadowOpacity: theme.__hd__.bottomSheet.shadows.opacity,
-    shadowRadius: theme.__hd__.bottomSheet.shadows.radius,
-    elevation: theme.__hd__.bottomSheet.shadows.elevation,
     maxHeight: '94%'
   };
 });
@@ -13070,8 +13157,8 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
   var date = _ref2.date,
     startDate = _ref2.startDate,
     endDate = _ref2.endDate;
-  // Prevent selecting same date
-  if (isEqDate(date, startDate) || isEqDate(date, endDate)) {
+  // Prevent selecting same date when both dates are set
+  if (startDate && endDate && (isEqDate(date, startDate) || isEqDate(date, endDate))) {
     return {
       startDate: startDate,
       endDate: endDate
@@ -13240,7 +13327,7 @@ var CalendarRange = function CalendarRange(_ref) {
     if (isEqDate(value === null || value === void 0 ? void 0 : value.startDate, date) || isEqDate(value === null || value === void 0 ? void 0 : value.endDate, date)) {
       return /*#__PURE__*/React__default.createElement(SelectedDate, {
         isStart: isEqDate(date, value === null || value === void 0 ? void 0 : value.startDate),
-        showConnector: !!(value !== null && value !== void 0 && value.startDate) && !!(value !== null && value !== void 0 && value.endDate),
+        showConnector: !!(value !== null && value !== void 0 && value.startDate) && !!(value !== null && value !== void 0 && value.endDate) && !isEqDate(value.startDate, value.endDate),
         key: date.toDateString(),
         date: date,
         onPress: function onPress() {
@@ -14352,7 +14439,7 @@ var StyledCheckbox = index$a(View)(function (_ref4) {
     flex: 1,
     borderRadius: theme.__hd__.checkbox.radii.icon,
     borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
+    borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 var StyledCheckMark = index$a(Icon)(function (_ref5) {
@@ -14361,19 +14448,23 @@ var StyledCheckMark = index$a(Icon)(function (_ref5) {
   return {
     position: 'absolute',
     top: theme.__hd__.checkbox.space.iconTop,
-    color: theme.__hd__.checkbox.colors.borders[themeState]
+    color: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 
 var getThemeState = function getThemeState(_ref) {
   var disabled = _ref.disabled,
-    readonly = _ref.readonly;
+    readonly = _ref.readonly,
+    checked = _ref.checked;
   if (disabled) {
     return 'disabled';
   }
   if (readonly) {
     return 'readonly';
   }
+  if (checked) {
+    return 'checked';
+  }
   return 'default';
 };
 var Checkbox = function Checkbox(_ref2) {
@@ -14391,7 +14482,8 @@ var Checkbox = function Checkbox(_ref2) {
   useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
-    readonly: readonly
+    readonly: readonly,
+    checked: checked
   });
   return /*#__PURE__*/React__default.createElement(StyledWrapper$8, {
     onPress: onPress,
@@ -14584,11 +14676,13 @@ var renderInput$1 = function renderInput(_ref3) {
   var variant = _ref3.variant,
     nativeInputProps = _ref3.nativeInputProps,
     renderInputValue = _ref3.renderInputValue,
-    ref = _ref3.ref;
+    ref = _ref3.ref,
+    theme = _ref3.theme;
   return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeInputProps.multiline,
-    ref: ref
+    ref: ref,
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
   }));
 };
 var renderSuffix$1 = function renderSuffix(_ref4) {
@@ -14843,13 +14937,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
-    }
+    },
+    theme: theme
   })), renderSuffix$1({
     state: state,
     loading: loading,
@@ -16152,7 +16247,7 @@ var AnimatedTouchableHighlight = Animated.createAnimatedComponent(TouchableOpaci
 var StyledFAB$2 = index$a(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     themeActive = _ref.themeActive;
-  return {
+  return _objectSpread2({
     backgroundColor: themeActive ? theme.__hd__.fab.colors.buttonActiveBackground : theme.__hd__.fab.colors.buttonBackground,
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
@@ -16160,13 +16255,8 @@ var StyledFAB$2 = index$a(AnimatedTouchableHighlight)(function (_ref) {
     alignSelf: 'flex-start',
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.shadows.color,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity,
     height: theme.__hd__.fab.sizes.height
-  };
+  }, theme.__hd__.fab.shadows["default"]);
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
   var theme = _ref2.theme;
@@ -16462,7 +16552,7 @@ var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
-    opacity: 0.8,
+    opacity: 0.4,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -19459,7 +19549,8 @@ var StyledWrapper$2 = index$a(View)(function (_ref) {
     borderRadius: theme.__hd__["switch"].radii.rounded,
     backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    opacity: themeVariant.includes('disabled') ? 0.4 : 1
   };
 });
 var StyledKnot = index$a(Animated.View)(function (_ref2) {
@@ -39814,7 +39905,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeState: state,
@@ -40209,6 +40300,7 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
     setIsFocused = _React$useState2[1];
+  var theme = useTheme();
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var state = getState({
@@ -40293,7 +40385,8 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
       maxLength: maxLength,
       value: value,
       defaultValue: defaultValue,
-      placeholder: placeholder
+      placeholder: placeholder,
+      placeholderTextColor: theme.__hd__.textInput.colors.placeholder
     }),
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;