@hero-design/rn 8.108.0 → 8.108.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3296) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3310) 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 16.3s
+created lib/index.js, es/index.js in 1m 13.9s
 
 /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 20.3s
+created ., . in 20.4s

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hero-design/rn
 
+## 8.108.1
+
+### Patch Changes
+
+- [#4210](https://github.com/Thinkei/hero-design/pull/4210) [`d0856e4f74472a83c5227e88638ad9631a7fe8f5`](https://github.com/Thinkei/hero-design/commit/d0856e4f74472a83c5227e88638ad9631a7fe8f5) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [FAB.ActionGroup] Fix double circle issue
+
+- [#4211](https://github.com/Thinkei/hero-design/pull/4211) [`9af53ac4bda22015a04ca404ae2a85d9bfb11ac2`](https://github.com/Thinkei/hero-design/commit/9af53ac4bda22015a04ca404ae2a85d9bfb11ac2) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Progress] Update colors to match design
+
 ## 8.108.0
 
 ### Minor Changes

package/es/index.js

@@ -9430,14 +9430,26 @@ function omit(keys, obj) {
   return result;
 }
 function hexToRgba(hex, a) {
-  var arrBuff = new ArrayBuffer(4);
-  var vw = new DataView(arrBuff);
-  vw.setUint32(0, parseInt(hex, 16), false);
-  var arrByte = new Uint8Array(arrBuff);
-  var _arrByte = _slicedToArray(arrByte, 3),
-    r = _arrByte[0],
-    g = _arrByte[1],
-    b = _arrByte[2];
+  // Validate inputs
+  if (typeof hex !== 'string' || typeof a !== 'number') {
+    throw new Error('hexToRgba: hex must be a string and alpha must be a number');
+  }
+  if (a < 0 || a > 1) {
+    throw new Error('hexToRgba: alpha must be between 0 and 1');
+  }
+  // Remove # if present and validate hex format
+  var cleanHex = hex.replace(/^#/, '');
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    throw new Error('hexToRgba: hex must be a valid 3 or 6 character hex color');
+  }
+  // Handle 3-character hex codes (e.g., #fff -> #ffffff)
+  var normalizedHex = cleanHex.length === 3 ? cleanHex.split('').map(function (_char) {
+    return _char + _char;
+  }).join('') : cleanHex;
+  // Parse hex values
+  var r = parseInt(normalizedHex.substring(0, 2), 16);
+  var g = parseInt(normalizedHex.substring(2, 4), 16);
+  var b = parseInt(normalizedHex.substring(4, 6), 16);
   return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
 }
 var _deepCompareValue = function deepCompareValue(a, b) {
@@ -9500,8 +9512,8 @@ var useKeyboard = function useKeyboard() {
   };
 };
 var transformKebabCaseToCamelCase = function transformKebabCaseToCamelCase(string) {
-  return string.replace(/-([a-z0-9])/g, function (_, _char) {
-    return /[a-z]/.test(_char) ? _char.toUpperCase() : _char;
+  return string.replace(/-([a-z0-9])/g, function (_, _char2) {
+    return /[a-z]/.test(_char2) ? _char2.toUpperCase() : _char2;
   });
 };
 
@@ -23835,7 +23847,6 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
-  var theme = useTheme();
   var fabRef = useRef(null);
   var animatedValue = useRef(new Animated.Value(active ? 1 : 0));
   React__default.useImperativeHandle(ref, function () {
@@ -23914,13 +23925,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), active && /*#__PURE__*/React__default.createElement(StyledFAB$1
-  // This FAB is moved up a bit compared to the original FAB,
-  // set marginBottom to negative value to compensate for it
-  , {
-    style: {
-      marginBottom: -theme.space.xxsmall
-    },
+  }))), active && /*#__PURE__*/React__default.createElement(StyledFAB$1, {
     key: "fab-in-portal",
     testID: "fab-in-portal",
     icon: fabIcon,

package/lib/index.js

@@ -9459,14 +9459,26 @@ function omit(keys, obj) {
   return result;
 }
 function hexToRgba(hex, a) {
-  var arrBuff = new ArrayBuffer(4);
-  var vw = new DataView(arrBuff);
-  vw.setUint32(0, parseInt(hex, 16), false);
-  var arrByte = new Uint8Array(arrBuff);
-  var _arrByte = _slicedToArray(arrByte, 3),
-    r = _arrByte[0],
-    g = _arrByte[1],
-    b = _arrByte[2];
+  // Validate inputs
+  if (typeof hex !== 'string' || typeof a !== 'number') {
+    throw new Error('hexToRgba: hex must be a string and alpha must be a number');
+  }
+  if (a < 0 || a > 1) {
+    throw new Error('hexToRgba: alpha must be between 0 and 1');
+  }
+  // Remove # if present and validate hex format
+  var cleanHex = hex.replace(/^#/, '');
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    throw new Error('hexToRgba: hex must be a valid 3 or 6 character hex color');
+  }
+  // Handle 3-character hex codes (e.g., #fff -> #ffffff)
+  var normalizedHex = cleanHex.length === 3 ? cleanHex.split('').map(function (_char) {
+    return _char + _char;
+  }).join('') : cleanHex;
+  // Parse hex values
+  var r = parseInt(normalizedHex.substring(0, 2), 16);
+  var g = parseInt(normalizedHex.substring(2, 4), 16);
+  var b = parseInt(normalizedHex.substring(4, 6), 16);
   return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
 }
 var _deepCompareValue = function deepCompareValue(a, b) {
@@ -9529,8 +9541,8 @@ var useKeyboard = function useKeyboard() {
   };
 };
 var transformKebabCaseToCamelCase = function transformKebabCaseToCamelCase(string) {
-  return string.replace(/-([a-z0-9])/g, function (_, _char) {
-    return /[a-z]/.test(_char) ? _char.toUpperCase() : _char;
+  return string.replace(/-([a-z0-9])/g, function (_, _char2) {
+    return /[a-z]/.test(_char2) ? _char2.toUpperCase() : _char2;
   });
 };
 
@@ -23864,7 +23876,6 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
-  var theme = useTheme();
   var fabRef = React.useRef(null);
   var animatedValue = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React__namespace.default.useImperativeHandle(ref, function () {
@@ -23943,13 +23954,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), active && /*#__PURE__*/React__namespace.default.createElement(StyledFAB$1
-  // This FAB is moved up a bit compared to the original FAB,
-  // set marginBottom to negative value to compensate for it
-  , {
-    style: {
-      marginBottom: -theme.space.xxsmall
-    },
+  }))), active && /*#__PURE__*/React__namespace.default.createElement(StyledFAB$1, {
     key: "fab-in-portal",
     testID: "fab-in-portal",
     icon: fabIcon,

package/package.json

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

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1080,7 +1080,6 @@ exports[`ActionGroup has active true 1`] = `
               "flexDirection": "row",
               "height": 64,
               "justifyContent": "center",
-              "marginBottom": -2,
               "marginRight": 24,
               "marginTop": 24,
               "opacity": 1,

package/src/components/FAB/ActionGroup/index.tsx

@@ -1,7 +1,11 @@
 import React, { forwardRef, useRef } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Platform, Modal } from 'react-native';
+import { Animated, Modal, Platform } from 'react-native';
+import { useDeprecation } from '../../../utils/hooks';
+import Box from '../../Box';
 import type { IconName } from '../../Icon';
+import Portal from '../../Portal';
+import type { FABHandles } from '../FAB';
 import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
@@ -12,11 +16,6 @@ import {
   StyledContainerInModal,
   StyledFAB,
 } from './StyledActionGroup';
-import Portal from '../../Portal';
-import Box from '../../Box';
-import type { FABHandles } from '../FAB';
-import { useDeprecation } from '../../../utils/hooks';
-import { useTheme } from '../../../theme';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -96,7 +95,6 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       headerTitle !== undefined
     );
 
-    const theme = useTheme();
     const fabRef = useRef<FABHandles>(null);
     const animatedValue = useRef<Animated.Value>(
       new Animated.Value(active ? 1 : 0)
@@ -185,11 +183,6 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
 
             {active && (
               <StyledFAB
-                // This FAB is moved up a bit compared to the original FAB,
-                // set marginBottom to negative value to compensate for it
-                style={{
-                  marginBottom: -theme.space.xxsmall,
-                }}
                 key="fab-in-portal"
                 testID="fab-in-portal"
                 icon={fabIcon}

package/src/components/MapPin/__tests__/__snapshots__/Focussed.spec.tsx.snap

@@ -33,7 +33,7 @@ exports[`MapPin.Focussed renders icon correctly 1`] = `
           [
             {
               "fontSize": 42,
-              "textShadowColor": "rgba(0,0,0,0.28)",
+              "textShadowColor": "rgba(0,31,35,0.28)",
               "textShadowOffset": {
                 "height": 4,
                 "width": 0,

package/src/utils/__tests__/helpers.spec.ts

@@ -1,5 +1,6 @@
 import {
   deepCompareValue,
+  hexToRgba,
   omit,
   pick,
   transformKebabCaseToCamelCase,
@@ -114,3 +115,144 @@ describe('transformKebabCaseToCamelCase', () => {
     }
   );
 });
+
+describe('hexToRgba', () => {
+  it.each`
+    hex          | alpha   | expected
+    ${'#FF0000'} | ${1}    | ${'rgba(255,0,0,1)'}
+    ${'#00FF00'} | ${0.5}  | ${'rgba(0,255,0,0.5)'}
+    ${'#0000FF'} | ${0}    | ${'rgba(0,0,255,0)'}
+    ${'#FFFFFF'} | ${0.8}  | ${'rgba(255,255,255,0.8)'}
+    ${'#000000'} | ${0.3}  | ${'rgba(0,0,0,0.3)'}
+    ${'#123456'} | ${0.7}  | ${'rgba(18,52,86,0.7)'}
+    ${'#ABCDEF'} | ${0.2}  | ${'rgba(171,205,239,0.2)'}
+    ${'#FF0000'} | ${0.25} | ${'rgba(255,0,0,0.25)'}
+  `(
+    'should convert hex "$hex" with alpha $alpha to "$expected"',
+    ({ hex, alpha, expected }) => {
+      expect(hexToRgba(hex, alpha)).toBe(expected);
+    }
+  );
+
+  it.each`
+    hex         | alpha  | expected
+    ${'FF0000'} | ${1}   | ${'rgba(255,0,0,1)'}
+    ${'00FF00'} | ${0.5} | ${'rgba(0,255,0,0.5)'}
+    ${'0000FF'} | ${0}   | ${'rgba(0,0,255,0)'}
+    ${'FFFFFF'} | ${0.8} | ${'rgba(255,255,255,0.8)'}
+    ${'000000'} | ${0.3} | ${'rgba(0,0,0,0.3)'}
+    ${'123456'} | ${0.7} | ${'rgba(18,52,86,0.7)'}
+    ${'ABCDEF'} | ${0.2} | ${'rgba(171,205,239,0.2)'}
+  `(
+    'should convert hex without # "$hex" with alpha $alpha to "$expected"',
+    ({ hex, alpha, expected }) => {
+      expect(hexToRgba(hex, alpha)).toBe(expected);
+    }
+  );
+
+  it('should handle lowercase hex values', () => {
+    expect(hexToRgba('#ff0000', 1)).toBe('rgba(255,0,0,1)');
+    expect(hexToRgba('#abcdef', 0.5)).toBe('rgba(171,205,239,0.5)');
+  });
+
+  it('should handle mixed case hex values', () => {
+    expect(hexToRgba('#Ff0000', 1)).toBe('rgba(255,0,0,1)');
+    expect(hexToRgba('#AbCdEf', 0.5)).toBe('rgba(171,205,239,0.5)');
+  });
+
+  it('should handle edge case alpha values', () => {
+    expect(hexToRgba('#000000', 0)).toBe('rgba(0,0,0,0)');
+    expect(hexToRgba('#FFFFFF', 1)).toBe('rgba(255,255,255,1)');
+  });
+
+  it('should handle decimal alpha values', () => {
+    expect(hexToRgba('#FF0000', 0.123)).toBe('rgba(255,0,0,0.123)');
+    expect(hexToRgba('#00FF00', 0.999)).toBe('rgba(0,255,0,0.999)');
+  });
+
+  describe('3-character hex codes', () => {
+    it.each`
+      hex       | alpha   | expected
+      ${'#fff'} | ${1}    | ${'rgba(255,255,255,1)'}
+      ${'#000'} | ${0.5}  | ${'rgba(0,0,0,0.5)'}
+      ${'#f00'} | ${0.8}  | ${'rgba(255,0,0,0.8)'}
+      ${'#0f0'} | ${0.3}  | ${'rgba(0,255,0,0.3)'}
+      ${'#00f'} | ${0.7}  | ${'rgba(0,0,255,0.7)'}
+      ${'#abc'} | ${0.2}  | ${'rgba(170,187,204,0.2)'}
+      ${'#123'} | ${0.25} | ${'rgba(17,34,51,0.25)'}
+    `(
+      'should convert 3-char hex "$hex" with alpha $alpha to "$expected"',
+      ({ hex, alpha, expected }) => {
+        expect(hexToRgba(hex, alpha)).toBe(expected);
+      }
+    );
+
+    it.each`
+      hex      | alpha  | expected
+      ${'fff'} | ${1}   | ${'rgba(255,255,255,1)'}
+      ${'000'} | ${0.5} | ${'rgba(0,0,0,0.5)'}
+      ${'f00'} | ${0.8} | ${'rgba(255,0,0,0.8)'}
+      ${'0f0'} | ${0.3} | ${'rgba(0,255,0,0.3)'}
+      ${'00f'} | ${0.7} | ${'rgba(0,0,255,0.7)'}
+      ${'abc'} | ${0.2} | ${'rgba(170,187,204,0.2)'}
+    `(
+      'should convert 3-char hex without # "$hex" with alpha $alpha to "$expected"',
+      ({ hex, alpha, expected }) => {
+        expect(hexToRgba(hex, alpha)).toBe(expected);
+      }
+    );
+
+    it('should handle lowercase 3-char hex values', () => {
+      expect(hexToRgba('#fff', 1)).toBe('rgba(255,255,255,1)');
+      expect(hexToRgba('#abc', 0.5)).toBe('rgba(170,187,204,0.5)');
+    });
+
+    it('should handle mixed case 3-char hex values', () => {
+      expect(hexToRgba('#Ff0', 1)).toBe('rgba(255,255,0,1)');
+      expect(hexToRgba('#AbC', 0.5)).toBe('rgba(170,187,204,0.5)');
+    });
+  });
+
+  describe('validation', () => {
+    it('should throw error for invalid input types', () => {
+      expect(() => hexToRgba(123 as any, 0.5)).toThrow(
+        'hexToRgba: hex must be a string and alpha must be a number'
+      );
+      expect(() => hexToRgba('#fff', '0.5' as any)).toThrow(
+        'hexToRgba: hex must be a string and alpha must be a number'
+      );
+    });
+
+    it('should throw error for alpha values outside 0-1 range', () => {
+      expect(() => hexToRgba('#fff', -0.1)).toThrow(
+        'hexToRgba: alpha must be between 0 and 1'
+      );
+      expect(() => hexToRgba('#fff', 1.1)).toThrow(
+        'hexToRgba: alpha must be between 0 and 1'
+      );
+    });
+
+    it('should throw error for invalid hex formats', () => {
+      expect(() => hexToRgba('invalid', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+      expect(() => hexToRgba('#gggggg', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+      expect(() => hexToRgba('#ff', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+      expect(() => hexToRgba('#ffffff00', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+      expect(() => hexToRgba('', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+    });
+
+    it('should accept valid alpha boundary values', () => {
+      expect(() => hexToRgba('#fff', 0)).not.toThrow();
+      expect(() => hexToRgba('#fff', 1)).not.toThrow();
+    });
+  });
+});

package/src/utils/helpers.ts

@@ -31,11 +31,40 @@ export function omit<O, T extends keyof O>(keys: T[], obj: O): Omit<O, T> {
 }
 
 export function hexToRgba(hex: string, a: number) {
-  const arrBuff = new ArrayBuffer(4);
-  const vw = new DataView(arrBuff);
-  vw.setUint32(0, parseInt(hex, 16), false);
-  const arrByte = new Uint8Array(arrBuff);
-  const [r, g, b] = arrByte;
+  // Validate inputs
+  if (typeof hex !== 'string' || typeof a !== 'number') {
+    throw new Error(
+      'hexToRgba: hex must be a string and alpha must be a number'
+    );
+  }
+
+  if (a < 0 || a > 1) {
+    throw new Error('hexToRgba: alpha must be between 0 and 1');
+  }
+
+  // Remove # if present and validate hex format
+  const cleanHex = hex.replace(/^#/, '');
+
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    throw new Error(
+      'hexToRgba: hex must be a valid 3 or 6 character hex color'
+    );
+  }
+
+  // Handle 3-character hex codes (e.g., #fff -> #ffffff)
+  const normalizedHex =
+    cleanHex.length === 3
+      ? cleanHex
+          .split('')
+          .map((char) => char + char)
+          .join('')
+      : cleanHex;
+
+  // Parse hex values
+  const r = parseInt(normalizedHex.substring(0, 2), 16);
+  const g = parseInt(normalizedHex.substring(2, 4), 16);
+  const b = parseInt(normalizedHex.substring(4, 6), 16);
+
   return `rgba(${r},${g},${b},${a})`;
 }