@fibery/ui-kit 1.28.4 → 1.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.28.4",
+  "version": "1.29.1",
   "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/react": "1.4.0",
+    "@fibery/helpers": "1.3.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",
+    "@fibery/babel-preset": "7.4.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/actions-menu/actions-menu-props.tsx

@@ -10,6 +10,7 @@ export type ActionsMenuProps = {
   align?: ContentProps["align"];
   disabled?: boolean;
   portalled?: boolean;
+  container?: HTMLElement | null | undefined;
   wide?: boolean;
   /** The controlled open state of the ActionsMenu. Must be used in conjunction with onOpenChange. */
   open?: boolean;

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

@@ -27,6 +27,7 @@ export const ActionsMenu = ({
   onOpenChange,
   children,
   portalled,
+  container,
   disabled,
   contentStyles,
   modal,
@@ -55,6 +56,7 @@ export const ActionsMenu = ({
           sideOffset={sideOffset}
           className={cx(wide && wideCss, contentStyles)}
           portalled={portalled}
+          container={container}
           collisionPadding={collisionPadding}
           onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}
         >

package/src/actions-menu/utils/insert-separators.tsx

@@ -9,8 +9,7 @@ import {ActionsMenuSeparator} from "../actions-menu-separator";
  */
 export const insertSeparators = (sections: (React.ReactNode[] | React.ReactNode)[]) => {
   const nodes: React.ReactNode[] = [];
-
-  sections.forEach((section, idx) => {
+  sections.filter(Boolean).forEach((section, idx) => {
     if (Array.isArray(section)) {
       const filtered = section.filter(Boolean);
       if (nodes.length > 0 && filtered.length > 0) {
@@ -23,6 +22,5 @@ export const insertSeparators = (sections: (React.ReactNode[] | React.ReactNode)
       nodes.push(section);
     }
   });
-
   return nodes;
 };

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";
@@ -158,7 +158,7 @@ export const themeColors = {
   menuSelectedTextColor: [slate.slate2, slate.slate2],
   menuFooterColor: [getOpacities(whiteA.whiteA0).opacity20, getOpacities(slateDark.slate3).opacity40],
   menuFooterHoverColor: [getOpacities(whiteA.whiteA0).opacity60, slateDark.slate4],
-  menuIconColor: [getOpacities(slate.slate10).opacity90, getOpacities(slate.slate10).opacity90],
+  menuIconColor: [getOpacities(slate.slate11).opacity90, getOpacities(slateDark.slate11).opacity90],
   menuSelectedIconColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate1).opacity90],
   textColor: [slateDark.slate3, slate.slate6],
   textSelectionColor: [getOpacities(blue.blue10).opacity20, getOpacities(blueDark.blue10).opacity40],
@@ -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/dropdown-menu/index.tsx

@@ -98,6 +98,7 @@ const dropdownMenuContentStyles = css`
 export type ContentProps = DropdownMenuPrimitive.DropdownMenuContentProps & {
   /* render content in portal. NOTE: Changing this prop will lead to re-mount */
   portalled?: boolean;
+  container?: HTMLElement | null | undefined;
   collisionPadding?: number;
 };
 
@@ -111,11 +112,11 @@ const onContentKeyDown = (e: React.KeyboardEvent) => {
 };
 
 export const Content = forwardRef<HTMLDivElement, ContentProps>(function DropdownMenuContent(
-  {className, portalled = true, collisionPadding = space.s12, ...rest},
+  {className, portalled = true, container, collisionPadding = space.s12, ...rest},
   ref
 ) {
   return (
-    <Wrap if={portalled} with={DropdownMenuPrimitive.Portal}>
+    <Wrap if={portalled} with={DropdownMenuPrimitive.Portal} container={container}>
       <DropdownMenuPrimitive.Content
         onKeyDown={onContentKeyDown}
         ref={ref}

package/src/icons/ast/LayoutDouble.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LayoutDouble: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 4.5a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75H4.25ZM2 5.25A2.25 2.25 0 0 1 4.25 3h11.5A2.25 2.25 0 0 1 18 5.25v9.5A2.25 2.25 0 0 1 15.75 17H4.25A2.25 2.25 0 0 1 2 14.75v-9.5ZM12.75 6a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM12 9.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM5.5 6a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H10a.5.5 0 0 0 .5-.5v-7A.5.5 0 0 0 10 6H5.5Z"},"children":[]}],"metadata":""}]},"name":"layout-double"};
+
+export default LayoutDouble;

package/src/icons/ast/LayoutSingle.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LayoutSingle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 4.5a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75H4.25ZM2 5.25A2.25 2.25 0 0 1 4.25 3h11.5A2.25 2.25 0 0 1 18 5.25v9.5A2.25 2.25 0 0 1 15.75 17H4.25A2.25 2.25 0 0 1 2 14.75v-9.5Zm3 1.5A.75.75 0 0 1 5.75 6h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 5 6.75ZM5.5 9a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-9Z"},"children":[]}],"metadata":""}]},"name":"layout-single"};
+
+export default LayoutSingle;

package/src/icons/ast/UserRole.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UserRole: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6.804 1.75h6.392c.442 0 .818 0 1.126.025.325.027.64.085.942.238.455.232.824.602 1.056 1.057.154.301.212.617.238.94.025.31.025.686.025 1.127v9.726c0 .441 0 .817-.025 1.126-.026.324-.084.64-.238.941a2.417 2.417 0 0 1-1.056 1.057c-.302.153-.617.211-.942.238-.308.025-.684.025-1.126.025H6.804c-.442 0-.818 0-1.126-.025-.325-.027-.64-.085-.942-.238A2.417 2.417 0 0 1 3.68 16.93c-.154-.302-.212-.618-.238-.942-.025-.309-.025-.685-.025-1.126V5.137c0-.441 0-.817.025-1.126.026-.324.084-.64.238-.941a2.417 2.417 0 0 1 1.056-1.057c.302-.153.617-.211.942-.238.308-.025.684-.025 1.126-.025ZM5.8 3.27c-.232.02-.328.052-.383.08a.917.917 0 0 0-.4.4c-.028.055-.061.152-.08.383-.02.24-.02.555-.02 1.034v9.666c0 .48 0 .794.02 1.034.019.232.052.328.08.383a.917.917 0 0 0 .4.4c.055.028.151.06.383.08.24.02.554.02 1.033.02h6.334c.479 0 .793 0 1.033-.02.232-.02.328-.052.383-.08a.917.917 0 0 0 .4-.4c.028-.055.061-.151.08-.383.02-.24.02-.555.02-1.034V5.167c0-.48 0-.794-.02-1.034-.019-.231-.052-.328-.08-.382a.917.917 0 0 0-.4-.401c-.055-.028-.151-.06-.383-.08-.24-.02-.554-.02-1.033-.02H6.833c-.479 0-.793 0-1.033.02ZM7.583 5a.75.75 0 0 1 .75-.75h3.334a.75.75 0 0 1 0 1.5H8.333a.75.75 0 0 1-.75-.75Zm.834 4.167a1.583 1.583 0 1 1 3.166 0 1.583 1.583 0 0 1-3.166 0ZM10 13.25c-.982 0-1.64.563-1.772 1.098a.75.75 0 0 1-1.456-.362c.34-1.368 1.742-2.236 3.228-2.236 1.486 0 2.888.868 3.228 2.236a.75.75 0 0 1-1.456.362c-.133-.535-.79-1.098-1.772-1.098Z"},"children":[]}],"metadata":""}]},"name":"user-role"};
+
+export default UserRole;

package/src/icons/ast/index.tsx

@@ -111,6 +111,8 @@ export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as Lab } from './Lab';
+export { default as LayoutDouble } from './LayoutDouble';
+export { default as LayoutSingle } from './LayoutSingle';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
@@ -243,6 +245,7 @@ export { default as TypeText } from './TypeText';
 export { default as TypeUrl } from './TypeUrl';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
+export { default as UserRole } from './UserRole';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';
 export { default as ViewCanvas } from './ViewCanvas';

package/src/icons/react/LayoutDouble.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import LayoutDoubleSvg from '../ast/LayoutDouble';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LayoutDouble = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={LayoutDoubleSvg} />;
+
+LayoutDouble.displayName = 'LayoutDouble';
+export default LayoutDouble;

package/src/icons/react/LayoutSingle.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import LayoutSingleSvg from '../ast/LayoutSingle';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LayoutSingle = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={LayoutSingleSvg} />;
+
+LayoutSingle.displayName = 'LayoutSingle';
+export default LayoutSingle;

package/src/icons/react/UserRole.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UserRoleSvg from '../ast/UserRole';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UserRole = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UserRoleSvg} />;
+
+UserRole.displayName = 'UserRole';
+export default UserRole;

package/src/icons/react/index.tsx

@@ -111,6 +111,8 @@ export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as Lab } from './Lab';
+export { default as LayoutDouble } from './LayoutDouble';
+export { default as LayoutSingle } from './LayoutSingle';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
@@ -243,6 +245,7 @@ export { default as TypeText } from './TypeText';
 export { default as TypeUrl } from './TypeUrl';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
+export { default as UserRole } from './UserRole';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';
 export { default as ViewCanvas } from './ViewCanvas';

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};

package/src/select/select-in-popover.tsx

@@ -123,7 +123,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   virtualized?: boolean;
   defaultMenuIsOpen?: boolean;
   placeholder?: string;
-  noOptionsMessage: () => string | JSX.Element | null;
+  noOptionsMessage?: () => string | JSX.Element | null;
   options: OptionsOrGroups<Option, Group>;
   filterOption?: SelectProps<Option>["filterOption"];
   inputValue?: string;

package/src/tooltip.tsx

@@ -98,6 +98,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> &
   description?: ReactNode;
   setContentElement?: (el: HTMLDivElement | null) => void;
   content?: ReactNode;
+  container?: HTMLElement | null | undefined;
   side?: TooltipPrimitive.TooltipContentProps["side"];
   sideOffset?: TooltipPrimitive.TooltipContentProps["sideOffset"];
   align?: TooltipPrimitive.TooltipContentProps["align"];
@@ -144,6 +145,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       keepOnClick,
       disabled,
       setContentElement,
+      container,
       ...triggerProps
     },
     ref
@@ -170,7 +172,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
         <TooltipPrimitive.Trigger ref={ref} {...triggerProps} {...keepOnClickProps} asChild>
           {children}
         </TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Portal container={container}>
           <TooltipPrimitive.Content
             ref={setContentElement}
             side={side}