@fibery/ui-kit 1.28.4 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.28.4",
+  "version": "1.29.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -20,7 +20,7 @@
     "src/select",
     "src/error-alert",
     "src/actions-menu",
-    "src/pallete.ts",
+    "src/palette.ts",
     "src/tooltip.tsx",
     "src/tooltip-if-overflown.tsx",
     "src/back-button.tsx",
@@ -75,9 +75,9 @@
     "react-virtuoso": "4.6.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "2.5.0",
-    "@fibery/helpers": "1.2.0",
-    "@fibery/react": "1.3.1"
+    "@fibery/emoji-data": "2.6.0",
+    "@fibery/helpers": "1.3.0",
+    "@fibery/react": "1.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -108,10 +108,10 @@
     "react-dom": "18.2.0",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "5.1.6",
+    "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.5.1"
+    "@fibery/eslint-config": "8.6.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/actions-menu/actions-menu-item.tsx

@@ -117,10 +117,11 @@ export type ActionsMenuItemProps = {
   loading?: boolean;
   checked?: boolean;
   children: ReactNode;
+  className?: string;
 };
 
 const ActionsMenuItemComponent: React.FC<
-  ActionsMenuItemProps & {id?: string; showWarning?: boolean; onSelect: (e: Event) => void}
+  ActionsMenuItemProps & {id?: string; showWarning?: boolean; onSelect: (e: Event) => void; className?: string}
 > = memo(function ActionsMenuItemComponent({
   id,
   testId,
@@ -135,6 +136,7 @@ const ActionsMenuItemComponent: React.FC<
   loading,
   checked,
   children,
+  className,
 }) {
   const {MenuPrimitive} = useActionsMenuContext();
   const setActiveDangerousRow = useSetActiveDangerousRow();
@@ -167,7 +169,8 @@ const ActionsMenuItemComponent: React.FC<
         rowCss,
         dangerous && dangerousItemCss,
         showWarning && dangerousConfirmationCss,
-        description && rowWithDescriptionCss
+        description && rowWithDescriptionCss,
+        className
       )}
       disabled={disabled}
     >
@@ -191,11 +194,19 @@ const ActionsMenuItemComponent: React.FC<
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
-export const ActionsMenuItem: React.FC<ActionsMenuItemProps> = (props) => {
+export const ActionsMenuItem: React.FC<ActionsMenuItemProps> = ({className, ...props}) => {
   const id = useId();
   const activeDangerousRow = useActiveDangerousRow();
 
   const onSelect = useCallbackRef(props.onSelect || noop);
 
-  return <ActionsMenuItemComponent {...props} id={id} showWarning={activeDangerousRow === id} onSelect={onSelect} />;
+  return (
+    <ActionsMenuItemComponent
+      {...props}
+      className={className}
+      id={id}
+      showWarning={activeDangerousRow === id}
+      onSelect={onSelect}
+    />
+  );
 };

package/src/design-system.ts

@@ -17,7 +17,7 @@ import {
   whiteA,
   yellow,
   yellowDark,
-} from "./pallete";
+} from "./palette";
 import {a11yColor} from "./a11y-color";
 import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
 import {ThemeMode} from "./theme-settings";
@@ -448,6 +448,7 @@ export const themeColors = {
   colorBgNotificationSelected: [indigo.indigo3, indigoDark.indigo4],
   colorBgNotificationSelectedHover: [indigo.indigo4, indigoDark.indigo6],
   disabledInversedTextColor: [shades.opacity25, lights.opacity25],
+  success: [teal.teal9, tealDark.teal9],
   danger: [red.red9, redDark.red10],
   active: [red.red9, redDark.red10],
   warning: ["#FFD41E", "#FFD41E"],
@@ -691,7 +692,7 @@ export const getIconColor = _.memoize(
 export const cardTypeColors = [
   "#4A4A4A",
   "#6A849B",
-  "#BEC5CC",
+  "#99A2AB",
   "#D40915",
   "#E72065",
   "#9C2BAF",
@@ -778,6 +779,7 @@ export const layout = {
   viewSetupWidth: "30vw",
   viewSetupMinWidth: 380,
   inputHeight: 36, //TODO: merge input and item height?
+  timelineToolbarHeight: 60,
   timelineLineHeight: 48,
   timelineGroupPadding: 0,
   timelineItemHeightRatio: 36 / 48,

package/src/loaders.tsx

@@ -7,7 +7,7 @@ import {getShiftStyle} from "./icons/get-shift-style";
 import {LoadingSausage} from "./loading-sausage";
 import {useTheme} from "./theme-provider";
 
-export const LoadingView = styled.div<{absolute: boolean; backgroundColor?: string}>`
+export const LoadingView = styled.div<{absolute?: boolean; backgroundColor?: string}>`
   position: ${(props) => (props.absolute ? "absolute" : "static")};
   height: ${(props) => (props.absolute ? "auto" : "100%")};
   background: ${(props) => props.backgroundColor || themeVars.mainBg};