@hero-design/rn 8.12.0-rc.0 → 8.12.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output ee6a5718811b5702
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/Volumes/Data/Projects/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 29.8s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output be75cdb303db3812
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 23.2s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1274,7 +1274,10 @@ var palette$2 = Object.assign(Object.assign({}, palette$8), {
   violetLight90: violet1.lighten90,
   violet: violet1.base,
   mauve: mauve.base,
+  mauveLight15: mauve.lighten15,
   mauveLight30: mauve.lighten30,
+  mauveLight40: mauve.lighten40,
+  mauveDark65: mauve.darken65,
   maasstrichtBlueLight10: maasstrichtBlue.lighten10,
   maasstrichtBlueDark20: maasstrichtBlue.darken20
 });
@@ -1403,11 +1406,11 @@ var globalPalette = {
 var swagDarkBrandSystemPalette = {
   primary: palette$2.mauve,
   onPrimary: palette$2.maasstrichtBlue,
-  secondary: palette$2.mauveLight30,
+  secondary: palette$2.mauveLight40,
   onSecondary: palette$2.maasstrichtBlue,
   defaultSurface: palette$2.maasstrichtBlue,
-  highlightedSurface: palette$2.scarletGumDark65,
-  pressedSurface: palette$2.scarletGumLight20,
+  highlightedSurface: palette$2.mauveDark65,
+  pressedSurface: palette$2.mauveLight15,
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
@@ -2841,9 +2844,9 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface
   };
@@ -13812,7 +13815,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && (displayedValue === null || displayedValue === void 0 ? void 0 : displayedValue.length) > 0 ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {
@@ -13939,7 +13942,10 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    sectionListRef: sectionListRef
+    sectionListRef: sectionListRef,
+    style: _objectSpread2({}, onQueryChange ? {
+      height: Dimensions.get('screen').height
+    } : {})
   }, rest));
 };
 
@@ -13999,7 +14005,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!displayedValue ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {

package/lib/index.js

@@ -1303,7 +1303,10 @@ var palette$2 = Object.assign(Object.assign({}, palette$8), {
   violetLight90: violet1.lighten90,
   violet: violet1.base,
   mauve: mauve.base,
+  mauveLight15: mauve.lighten15,
   mauveLight30: mauve.lighten30,
+  mauveLight40: mauve.lighten40,
+  mauveDark65: mauve.darken65,
   maasstrichtBlueLight10: maasstrichtBlue.lighten10,
   maasstrichtBlueDark20: maasstrichtBlue.darken20
 });
@@ -1432,11 +1435,11 @@ var globalPalette = {
 var swagDarkBrandSystemPalette = {
   primary: palette$2.mauve,
   onPrimary: palette$2.maasstrichtBlue,
-  secondary: palette$2.mauveLight30,
+  secondary: palette$2.mauveLight40,
   onSecondary: palette$2.maasstrichtBlue,
   defaultSurface: palette$2.maasstrichtBlue,
-  highlightedSurface: palette$2.scarletGumDark65,
-  pressedSurface: palette$2.scarletGumLight20,
+  highlightedSurface: palette$2.mauveDark65,
+  pressedSurface: palette$2.mauveLight15,
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
@@ -2870,9 +2873,9 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface
   };
@@ -13841,7 +13844,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && (displayedValue === null || displayedValue === void 0 ? void 0 : displayedValue.length) > 0 ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
@@ -13968,7 +13971,10 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    sectionListRef: sectionListRef
+    sectionListRef: sectionListRef,
+    style: _objectSpread2({}, onQueryChange ? {
+      height: reactNative.Dimensions.get('screen').height
+    } : {})
   }, rest));
 };
 
@@ -14028,7 +14034,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!displayedValue ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.12.0-rc.0",
+  "version": "8.12.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.12.0-rc.0",
+    "@hero-design/colors": "8.12.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.12.0-rc.0",
+    "@hero-design/eslint-plugin": "8.12.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.12.0-rc.0",
+    "eslint-config-hd": "8.12.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.12.0-rc.0",
+    "prettier-config-hd": "8.12.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Select/MultiSelect/__tests__/index.spec.tsx

@@ -198,6 +198,26 @@ describe('rendering', () => {
     expect(getByText('Custom daemon')).toBeTruthy();
   });
 
+  it('does not render custom value when value is empty', () => {
+    const { queryByText } = renderWithTheme(
+      <MultiSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        footerLabel="Confirm"
+        options={collaboratorSections}
+        value={[]}
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue, _inputProps) => (
+          <>
+            {selectedValue.map(() => (
+              <Typography.Text>Custom value</Typography.Text>
+            ))}
+          </>
+        )}
+      />
+    );
+    expect(queryByText('Custom value')).toBeNull();
+  });
+
   it('allows custom footer', () => {
     const { getByText, queryByText } = renderWithTheme(
       <MultiSelect<string, CustomOptionType>

package/src/components/Select/MultiSelect/index.tsx

@@ -111,7 +111,7 @@ function MultiSelect<V, T extends OptionType<V>>({
               style={style}
               testID={testID}
               renderInputValue={
-                renderSelectedValue !== undefined
+                renderSelectedValue !== undefined && displayedValue?.length > 0
                   ? (props) => renderSelectedValue(value, props)
                   : undefined
               }

package/src/components/Select/SingleSelect/OptionList.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import type { SectionListRenderItemInfo, SectionList } from 'react-native';
+import {
+  SectionListRenderItemInfo,
+  SectionList,
+  Dimensions,
+} from 'react-native';
 import Option from './Option';
 import type { SingleSelectProps } from '.';
 import type { OptionType, SectionType } from '../types';
@@ -64,6 +68,9 @@ const OptionList = <V, T extends OptionType<V>>({
       sections={sections}
       renderItem={renderItem}
       sectionListRef={sectionListRef}
+      style={{
+        ...(onQueryChange ? { height: Dimensions.get('screen').height } : {}),
+      }}
       {...rest}
     />
   );

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -70,7 +70,7 @@ exports[`OptionList render isLoading correctly 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -852,7 +852,7 @@ exports[`OptionList renders correctly 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -1481,7 +1481,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }
@@ -2110,7 +2110,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
         Object {
           "paddingBottom": 16,
         },
-        undefined,
+        Object {},
       ],
     ]
   }

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -460,7 +460,7 @@ Array [
                   Object {
                     "paddingBottom": 16,
                   },
-                  undefined,
+                  Object {},
                 ],
               ]
             }
@@ -1956,7 +1956,7 @@ Array [
                   Object {
                     "paddingBottom": 16,
                   },
-                  undefined,
+                  Object {},
                 ],
               ]
             }
@@ -3574,7 +3574,7 @@ Array [
                   Object {
                     "paddingBottom": 16,
                   },
-                  undefined,
+                  Object {},
                 ],
               ]
             }

package/src/components/Select/SingleSelect/__tests__/index.spec.tsx

@@ -182,6 +182,21 @@ describe('rendering', () => {
     );
     expect(getByText('Custom daniel')).toBeTruthy();
   });
+
+  it('does not render custom value when value is empty', () => {
+    const { queryByText } = renderWithTheme(
+      <SingleSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        options={collaboratorSections}
+        value=""
+        onConfirm={jest.fn()}
+        renderSelectedValue={() => (
+          <Typography.Text>Custom value</Typography.Text>
+        )}
+      />
+    );
+    expect(queryByText('Custom value')).toBeNull();
+  });
 });
 
 describe('behavior', () => {

package/src/components/Select/SingleSelect/index.tsx

@@ -88,7 +88,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
               style={style}
               testID={testID}
               renderInputValue={
-                renderSelectedValue !== undefined
+                renderSelectedValue !== undefined && !!displayedValue
                   ? (props) => renderSelectedValue(value, props)
                   : undefined
               }

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -113,7 +113,7 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
     style={
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#f46363",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -311,7 +311,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "color": "#017d6d",
+          "color": "#5ace7d",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -377,7 +377,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#ffa234",
+          "color": "#ffbe71",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -28,7 +28,7 @@ exports[`StyledText has danger intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#de350b",
+        "color": "#f46363",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -327,7 +327,7 @@ exports[`StyledText has success intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#017d6d",
+        "color": "#5ace7d",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -350,7 +350,7 @@ exports[`StyledText has warning intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#ffa234",
+        "color": "#ffbe71",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,

package/src/theme/ThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
 
 import getTheme from './getTheme';
 import {
@@ -41,8 +41,11 @@ const ThemeSwitcher = ({
 };
 
 export const withTheme =
-  <P extends {}>(C: React.ComponentType<P>, themeName: ThemeName) =>
-  (props: P) => {
+  <P extends Record<string, unknown>>(
+    C: React.ComponentType<P>,
+    themeName: ThemeName
+  ) =>
+  (props: PropsWithChildren<P>) => {
     return (
       <ThemeSwitcher name={themeName}>
         <C {...props} />

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -949,14 +949,14 @@ Object {
       "colors": Object {
         "archived": "#737479",
         "body": "#001f23",
-        "danger": "#de350b",
+        "danger": "#f46363",
         "info": "#4568fb",
         "inverted": "#ffffff",
         "primary": "#401960",
         "secondary": "#795e90",
         "subdued": "#4d6265",
-        "success": "#017d6d",
-        "warning": "#ffa234",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "fontSizes": Object {
         "6xlarge": 36,

package/src/theme/components/typography.ts

@@ -7,9 +7,9 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
   };

package/src/theme/global/colors/__tests__/__snapshots__/swagDark.spec.ts.snap

@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#82858a",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#160922",
+  "highlightedSurface": "#443153",
   "inactiveOnDefaultGlobalSurface": "#99a5a7",
   "inactiveOutline": "#99a5a7",
   "info": "#b5c3fd",
@@ -35,10 +35,10 @@ Object {
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#727478",
-  "pressedSurface": "#664780",
+  "pressedSurface": "#cc9df1",
   "primary": "#c38cee",
   "primaryOutline": "#ffffff",
-  "secondary": "#d5aff3",
+  "secondary": "#dbbaf5",
   "secondaryOutline": "#193539",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

package/src/theme/global/colors/swagDark.ts

@@ -5,11 +5,11 @@ import globalDarkPalette from './globalDark';
 const swagDarkBrandSystemPalette: BrandSystemPalette = {
   primary: palette.mauve,
   onPrimary: palette.maasstrichtBlue,
-  secondary: palette.mauveLight30,
+  secondary: palette.mauveLight40,
   onSecondary: palette.maasstrichtBlue,
   defaultSurface: palette.maasstrichtBlue,
-  highlightedSurface: palette.scarletGumDark65,
-  pressedSurface: palette.scarletGumLight20,
+  highlightedSurface: palette.mauveDark65,
+  pressedSurface: palette.mauveLight15,
 
   decorativePrimary: palette.maasstrichtBlue,
   decorativePrimarySurface: palette.maasstrichtBlueLight10,