@fibery/ui-kit 1.40.1 → 1.40.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @fibery/ui-kit
 
+## 1.40.3
+
+### Patch Changes
+
+- 583769d: [Icon] pass ref to generated svg
+
+## 1.40.2
+
+### Patch Changes
+
+- 08ff4a6: [popover] pass through div props to trigger
+
 ## 1.40.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.40.1",
+  "version": "1.40.3",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -83,8 +83,8 @@
     "svgo": "2.8.0",
     "typescript": "5.9.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.6.2",
-    "@fibery/babel-preset": "7.4.1"
+    "@fibery/babel-preset": "7.4.1",
+    "@fibery/eslint-config": "8.6.2"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/design-system.ts

@@ -532,7 +532,7 @@ export const themeColors = {
   todayMarkerColor: [red.red8, redDark.red6],
   viewBgOverlayColor: [getOpacities(slate.slate8).opacity20, getOpacities(slateDark.slate1).opacity60],
   floatEditorMenuBg: [slate.slate1, slateDark.slate6],
-  floatEditorActiveColor: [indigoDark.indigo10, indigoDark.indigo11],
+  floatEditorActiveColor: [indigo.indigo11, indigoDark.indigo11],
   planBadgeBgColor: [yellow.yellow10, yellowDark.yellow10],
   commentColor: [getOpacities(yellow.yellow6).opacity60, getOpacities(yellowDark.yellow9).opacity40],
   cellBackgroundColor: [slate.slate2, slateDark.slate2],
@@ -685,8 +685,8 @@ export const themeColors = {
     getOpacities(indigo.indigo11).opacity80,
     getOpacities(indigoDark.indigo11).opacity80,
   ],
-  colorTextButtonSoftNeutral: [slate.slate12, slateDark.slate12],
-  colorTextButtonSoftNeutralActive: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity80],
+  colorTextButtonSoftNeutral: [slate.slate11, slateDark.slate11],
+  colorTextButtonSoftNeutralActive: [getOpacities(slate.slate11).opacity80, getOpacities(slateDark.slate11).opacity80],
   colorTextButtonSoftDestructive: [red.red11, redDark.red11],
   colorTextButtonSoftDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
   colorIconButtonSoftAccent: [indigo.indigo11, indigoDark.indigo11],
@@ -740,6 +740,9 @@ export const themeColors = {
 
   // Text editor
   colorBgEditorImageZoomed: [slate.slate3, slateDark.slate6],
+  colorMermaidPrimaryColor: [slate.slate2, slateDark.slate8],
+  colorMermaidPrimaryBorderColor: [slate.slate9, slateDark.slate9],
+  colorMermaidLineColor: [slate.slate10, slateDark.slate9],
 
   //Whiteboard
   instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity100, getOpacities(slateDark.slate4).opacity100],

package/src/icons/Icon.tsx

@@ -54,6 +54,7 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
       viewBox,
       "aria-hidden": "true",
       style: iconStyle,
+      ref: ref,
       ...rest,
     })
   ) : (

package/src/icons/ast/Dividers.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Dividers: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M5 16.027 5.221 18l1.435-1.369L9.11 9.876a3.465 3.465 0 0 1-1.568-.872L5 16.027Zm7.45-7.023a3.51 3.51 0 0 1-1.569.872l2.454 6.755L14.77 18l.23-1.973-2.55-7.023Zm.15-2.026a2.665 2.665 0 0 0-1.719-3.04v-1.05A.89.89 0 0 0 9.996 2a.89.89 0 0 0-.886.889v1.049a2.675 2.675 0 0 0-1.772 2.506 2.661 2.661 0 0 0 3.154 2.623 2.674 2.674 0 0 0 2.108-2.09Zm-2.604.355a.89.89 0 0 1 0-1.777.89.89 0 0 1 0 1.777Z"},"children":[]}],"metadata":""}]},"name":"dividers"};
+
+export default Dividers;

package/src/icons/ast/DoubleLine.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const DoubleLine: 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":"M1.5 7.5a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1-.75-.75Zm0 5a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"double-line"};
+
+export default DoubleLine;

package/src/icons/ast/LineJump.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LineJump: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M3.05 6.11h2.69c.37 0 .72.14.98.4L9.4 9.19a.83.83 0 0 0 1.18 0 .83.83 0 0 0 0-1.18L7.9 5.33a3.03 3.03 0 0 0-2.16-.89H3.05a.83.83 0 0 0 0 1.66v.01Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"m18.63 10.79-3.06-3.05a.83.83 0 1 0-1.17 1.17l1.63 1.64H.83a.83.83 0 1 0 0 1.66h15.2l-1.63 1.63a.83.83 0 1 0 1.17 1.18l3.05-3.05a.831.831 0 0 0 0-1.18h.01Z"},"children":[]}],"metadata":""}]},"name":"line-jump"};
+
+export default LineJump;

package/src/icons/ast/Print.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Print: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M13.75 2.25A2.25 2.25 0 0 1 16 4.5v2.55c1.141.231 2 1.24 2 2.45v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 15.5v-6c0-1.21.859-2.219 2-2.45V4.5a2.25 2.25 0 0 1 2.25-2.25h7.5ZM4.5 8.5c-.552 0-1 .557-1 1.11v5.89a1 1 0 0 0 1 1H8v-2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 .5.5v2h.5a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-11ZM8 10a.75.75 0 0 1 0 1.5H5.5a.75.75 0 0 1 0-1.5H8ZM6.25 3.75a.75.75 0 0 0-.75.75V7h9V4.5a.75.75 0 0 0-.75-.75h-7.5Z"},"children":[]}],"metadata":""}]},"name":"print"};
+
+export default Print;

package/src/icons/ast/index.tsx

@@ -96,9 +96,11 @@ export { default as DateRange } from './DateRange';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
 export { default as Dependency } from './Dependency';
+export { default as Dividers } from './Dividers';
 export { default as Document } from './Document';
 export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
+export { default as DoubleLine } from './DoubleLine';
 export { default as DragBlockHandleSingle } from './DragBlockHandleSingle';
 export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
@@ -190,6 +192,7 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as LevelPlus } from './LevelPlus';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
+export { default as LineJump } from './LineJump';
 export { default as Link } from './Link';
 export { default as LocationEdit } from './LocationEdit';
 export { default as LockOutline } from './LockOutline';
@@ -244,6 +247,7 @@ export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
 export { default as PresentPlay } from './PresentPlay';
 export { default as PresentStop } from './PresentStop';
+export { default as Print } from './Print';
 export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
 export { default as QuickFilterPersonal } from './QuickFilterPersonal';

package/src/icons/react/Dividers.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import DividersSvg from '../ast/Dividers';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Dividers = forwardRef<SVGSVGElement, IconBaseProps>(function Dividers(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DividersSvg} />});
+
+export default Dividers;

package/src/icons/react/DoubleLine.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import DoubleLineSvg from '../ast/DoubleLine';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const DoubleLine = forwardRef<SVGSVGElement, IconBaseProps>(function DoubleLine(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DoubleLineSvg} />});
+
+export default DoubleLine;

package/src/icons/react/LineJump.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import LineJumpSvg from '../ast/LineJump';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LineJump = forwardRef<SVGSVGElement, IconBaseProps>(function LineJump(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LineJumpSvg} />});
+
+export default LineJump;

package/src/icons/react/Print.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import PrintSvg from '../ast/Print';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Print = forwardRef<SVGSVGElement, IconBaseProps>(function Print(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={PrintSvg} />});
+
+export default Print;

package/src/icons/react/index.tsx

@@ -96,9 +96,11 @@ export { default as DateRange } from './DateRange';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
 export { default as Dependency } from './Dependency';
+export { default as Dividers } from './Dividers';
 export { default as Document } from './Document';
 export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
+export { default as DoubleLine } from './DoubleLine';
 export { default as DragBlockHandleSingle } from './DragBlockHandleSingle';
 export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
@@ -190,6 +192,7 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as LevelPlus } from './LevelPlus';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
+export { default as LineJump } from './LineJump';
 export { default as Link } from './Link';
 export { default as LocationEdit } from './LocationEdit';
 export { default as LockOutline } from './LockOutline';
@@ -244,6 +247,7 @@ export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
 export { default as PresentPlay } from './PresentPlay';
 export { default as PresentStop } from './PresentStop';
+export { default as Print } from './Print';
 export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
 export { default as QuickFilterPersonal } from './QuickFilterPersonal';

package/src/icons/svg/dividers.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path d="M5 16.0267L5.22143 18L6.65633 16.6311L9.10983 9.87556C8.50753 9.72444 7.97608 9.42222 7.54207 9.00444L5 16.0267ZM12.4491 9.00444C12.0151 9.42222 11.4748 9.72444 10.8813 9.87556L13.3348 16.6311L14.7697 18L15 16.0267L12.4491 9.00444ZM12.5996 6.97778C12.8654 5.59111 12.0682 4.36444 10.8813 3.93778V2.88889C10.8813 2.4 10.4827 2 9.99557 2C9.50841 2 9.10983 2.4 9.10983 2.88889V3.93778C8.08237 4.31111 7.33835 5.28889 7.33835 6.44444C7.33835 8.08 8.80868 9.37778 10.4916 9.06667C11.5368 8.87111 12.3959 8.02667 12.5996 6.97778ZM9.99557 7.33333C9.50841 7.33333 9.10983 6.93333 9.10983 6.44444C9.10983 5.95556 9.50841 5.55556 9.99557 5.55556C10.4827 5.55556 10.8813 5.95556 10.8813 6.44444C10.8813 6.93333 10.4827 7.33333 9.99557 7.33333Z"/>
+</svg>

package/src/icons/svg/double-line.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 7.5C1.5 7.08579 1.83579 6.75 2.25 6.75H17.75C18.1642 6.75 18.5 7.08579 18.5 7.5C18.5 7.91421 18.1642 8.25 17.75 8.25H2.25C1.83579 8.25 1.5 7.91421 1.5 7.5ZM1.5 12.5C1.5 12.0858 1.83579 11.75 2.25 11.75H17.75C18.1642 11.75 18.5 12.0858 18.5 12.5C18.5 12.9142 18.1642 13.25 17.75 13.25H2.25C1.83579 13.25 1.5 12.9142 1.5 12.5Z" />
+</svg>

package/src/icons/svg/line-jump.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.05 6.11H5.74C6.11 6.11 6.46 6.25 6.72 6.51L9.4 9.19C9.47718 9.26801 9.56907 9.32993 9.67034 9.3722C9.77162 9.41446 9.88026 9.43622 9.99 9.43622C10.0997 9.43622 10.2084 9.41446 10.3097 9.3722C10.4109 9.32993 10.5028 9.26801 10.58 9.19C10.658 9.11282 10.7199 9.02093 10.7622 8.91966C10.8045 8.81839 10.8262 8.70974 10.8262 8.6C10.8262 8.49026 10.8045 8.38162 10.7622 8.28034C10.7199 8.17907 10.658 8.08718 10.58 8.01L7.9 5.33C7.61677 5.04609 7.28001 4.82123 6.90922 4.66846C6.53844 4.51568 6.14102 4.43803 5.74 4.44H3.05C2.82987 4.44 2.61876 4.52745 2.4631 4.6831C2.30745 4.83876 2.22 5.04987 2.22 5.27C2.22 5.49013 2.30745 5.70124 2.4631 5.8569C2.61876 6.01255 2.82987 6.1 3.05 6.1V6.11Z" />
+<path d="M18.63 10.79L15.57 7.74C15.4957 7.6527 15.4042 7.58173 15.3011 7.53156C15.1981 7.48139 15.0857 7.45311 14.9712 7.4485C14.8567 7.44389 14.7424 7.46305 14.6357 7.50478C14.5289 7.5465 14.432 7.60988 14.3509 7.69093C14.2699 7.77198 14.2065 7.86894 14.1648 7.97569C14.1231 8.08245 14.1039 8.19669 14.1085 8.31121C14.1131 8.42574 14.1414 8.53807 14.1916 8.64112C14.2417 8.74418 14.3127 8.83573 14.4 8.91L16.03 10.55H0.83C0.60987 10.55 0.398757 10.6374 0.243101 10.7931C0.0874462 10.9488 0 11.1599 0 11.38C0 11.6001 0.0874462 11.8112 0.243101 11.9669C0.398757 12.1226 0.60987 12.21 0.83 12.21H16.03L14.4 13.84C14.2435 13.9952 14.1551 14.2061 14.1542 14.4265C14.1532 14.6468 14.2398 14.8585 14.395 15.015C14.5502 15.1715 14.7611 15.2599 14.9815 15.2609C15.2018 15.2618 15.4135 15.1752 15.57 15.02L18.62 11.97C18.698 11.8928 18.7599 11.8009 18.8022 11.6997C18.8445 11.5984 18.8662 11.4897 18.8662 11.38C18.8662 11.2703 18.8445 11.1616 18.8022 11.0603C18.7599 10.9591 18.698 10.8672 18.62 10.79H18.63Z" />
+</svg>

package/src/icons/svg/print.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.75 2.25C14.9926 2.25 16 3.25736 16 4.5V7.0498C17.1411 7.28143 18 8.29051 18 9.5V15.5C18 16.8807 16.8807 18 15.5 18H4.5C3.11929 18 2 16.8807 2 15.5V9.5C2 8.29051 2.85886 7.28142 4 7.0498V4.5C4 3.25736 5.00736 2.25 6.25 2.25H13.75ZM4.5 8.5C3.94771 8.5 3.5 9.05709 3.5 9.60938V15.5C3.5 16.0523 3.94771 16.5 4.5 16.5H8V14.5C8 14.2239 8.22386 14 8.5 14H14.5C14.7761 14 15 14.2239 15 14.5V16.5H15.5C16.0523 16.5 16.5 16.0523 16.5 15.5V9.5C16.5 8.94771 16.0523 8.5 15.5 8.5H4.5ZM8 10C8.41421 10 8.75 10.3358 8.75 10.75C8.75 11.1642 8.41421 11.5 8 11.5H5.5C5.08579 11.5 4.75 11.1642 4.75 10.75C4.75 10.3358 5.08579 10 5.5 10H8ZM6.25 3.75C5.83579 3.75 5.5 4.08579 5.5 4.5V7H14.5V4.5C14.5 4.08579 14.1642 3.75 13.75 3.75H6.25Z"/>
+</svg>

package/src/popover/index.tsx

@@ -44,6 +44,7 @@ import {usePopupStackContext} from "./popup-stack-context";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {createContext} from "@fibery/react/src/create-context";
 import {Wrap} from "@fibery/react/src/wrap";
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 
 export const mobileZIndex = 1002;
 
@@ -232,20 +233,19 @@ type TriggerProps = {
   asChild?: boolean;
   // Support case when popup trigger is virtual reference
   reference?: Reference;
-  children?: ReactNode;
-};
+} & React.ComponentPropsWithoutRef<"div">;
 
-const Trigger = ({asChild = false, reference, children}: TriggerProps) => {
+const Trigger = ({asChild = false, reference, children, onMouseDown, ...props}: TriggerProps) => {
   const {setTriggerElement, disabled, open, onOpen, onClose} = useContext();
 
-  const onMouseDown: React.MouseEventHandler<HTMLElement> = (e) => {
+  const onMouseDownCb: React.MouseEventHandler<HTMLElement> = composeEventHandlers(onMouseDown, (e) => {
     if (disabled) {
       return;
     }
     if (e.button === 0) {
       open ? onClose?.(e as unknown as Event) : onOpen?.();
     }
-  };
+  });
 
   useEffect(() => {
     if (reference) {
@@ -263,12 +263,13 @@ const Trigger = ({asChild = false, reference, children}: TriggerProps) => {
       ref: setTriggerElement,
       "aria-expanded": open,
       "aria-haspopup": true,
-      onMouseDown,
+      onMouseDown: onMouseDownCb,
+      ...props,
     });
   }
 
   return (
-    <div ref={setTriggerElement} onMouseDown={onMouseDown}>
+    <div ref={setTriggerElement} onMouseDown={onMouseDownCb} {...props}>
       {children}
     </div>
   );

package/src/toast/toast.tsx

@@ -48,7 +48,7 @@ const rootCss = css`
   box-sizing: border-box;
   min-height: 44px;
   min-width: 320px;
-  max-width: min(calc(100vw - 40px), 400px);
+  max-width: min(calc(100vw - 40px), 480px);
 `;
 
 const rootLineCss = css`