@trackunit/react-components 0.1.156 → 0.1.158

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.156",
+  "version": "0.1.158",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@floating-ui/react": "0.22.2",
+    "@floating-ui/react": "0.25.4",
     "@trackunit/css-class-variance-utilities": "0.0.14",
     "@trackunit/css-core": "0.0.95",
     "@trackunit/ui-design-tokens": "0.0.77",
-    "@trackunit/ui-icons": "0.0.75",
+    "@trackunit/ui-icons": "0.0.76",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",

package/src/components/Icon/Icon.d.ts

@@ -1,14 +1,262 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
-import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
+import { IconName } from "@trackunit/ui-icons";
 import * as React from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
 export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
+export declare const iconPalette: {
+    ON_RENT: {
+        readonly 100: "223 244 254";
+        readonly 600: "90 200 250";
+    };
+    RETURNED: {
+        readonly 100: "230 202 255";
+        readonly 600: "176 90 255";
+    };
+    AVAILABLE: {
+        readonly 100: "206 255 232";
+        readonly 600: "0 166 88";
+    };
+    PICKUP_READY: {
+        readonly 100: "255 236 209";
+        readonly 600: "255 149 0";
+    };
+    TRANSFER: {
+        readonly 100: "255 248 217";
+        readonly 600: "253 208 8";
+    };
+    IN_REPAIR: {
+        readonly 100: "255 233 233";
+        readonly 600: "255 90 90";
+    };
+    OTHER_RENTAL_STATUS: {
+        readonly 100: "238 239 239";
+        readonly 600: "151 154 154";
+    };
+    SITE: {
+        readonly AREA: "37 99 235";
+        readonly CLASSIC_POI: "115 115 115";
+        readonly CLASSIC_ZONE: "115 115 115";
+        readonly DEPOT: "16 185 129";
+        readonly WORK_PLACE: "124 58 237";
+        readonly CONSTRUCTION_SITE: "245 158 11";
+        readonly UNKNOWN: "115 115 115";
+    };
+    UNUSED: {
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+    };
+    UTILIZED: {
+        readonly 400: "96 165 250";
+        readonly 600: "37 99 235";
+    };
+    HEAVILY_UTILIZED: {
+        readonly 300: "252 211 77";
+        readonly 500: "245 158 11";
+    };
+    UNKNOWN_UTILIZATION: {
+        readonly 300: "212 212 212";
+        readonly 600: "82 82 82";
+    };
+    WORKING: {
+        readonly 50: "239 246 255";
+        readonly 100: "219 234 254";
+        readonly 200: "191 219 254";
+        readonly 300: "147 197 253";
+        readonly 400: "96 165 250";
+        readonly 500: "59 130 246";
+        readonly 600: "37 99 235";
+        readonly 700: "29 78 216";
+        readonly 800: "30 64 175";
+        readonly 900: "30 58 138";
+    };
+    IDLE: {
+        readonly 50: "255 247 237";
+        readonly 100: "255 237 213";
+        readonly 200: "254 215 170";
+        readonly 300: "253 186 116";
+        readonly 400: "251 146 60";
+        readonly 500: "249 115 22";
+        readonly 600: "234 88 12";
+        readonly 700: "194 65 12";
+        readonly 800: "154 52 18";
+        readonly 900: "124 45 18";
+    };
+    STOPPED: {
+        readonly 50: "245 243 255";
+        readonly 100: "237 233 254";
+        readonly 200: "221 214 254";
+        readonly 300: "196 181 253";
+        readonly 400: "167 139 250";
+        readonly 500: "139 92 246";
+        readonly 600: "124 58 237";
+        readonly 700: "109 40 217";
+        readonly 800: "91 33 182";
+        readonly 900: "76 29 149";
+    };
+    UNKNOWN: {
+        readonly 50: "250 250 250";
+        readonly 100: "245 245 245";
+        readonly 200: "229 229 229";
+        readonly 300: "212 212 212";
+        readonly 400: "163 163 163";
+        readonly 500: "115 115 115";
+        readonly 600: "82 82 82";
+        readonly 700: "64 64 64";
+        readonly 800: "38 38 38";
+        readonly 900: "23 23 23";
+    };
+    MOVING: {
+        readonly DEFAULT: "230 144 177";
+    };
+    ACTIVE: {
+        readonly DEFAULT: "63 219 147";
+    };
+    GOOD: {
+        readonly 50: "236 253 245";
+        readonly 100: "209 250 229";
+        readonly 200: "167 243 208";
+        readonly 300: "110 231 183";
+        readonly 400: "52 211 153";
+        readonly 500: "16 185 129";
+        readonly 600: "5 150 105";
+        readonly 700: "4 120 87";
+        readonly 800: "6 95 70";
+        readonly 900: "6 78 59";
+    };
+    LOW: {
+        readonly 50: "255 251 235";
+        readonly 100: "254 243 199";
+        readonly 200: "253 230 138";
+        readonly 300: "252 211 77";
+        readonly 400: "251 191 36";
+        readonly 500: "245 158 11";
+        readonly 600: "217 119 6";
+        readonly 700: "180 83 9";
+        readonly 800: "146 64 14";
+        readonly 900: "120 53 15";
+    };
+    CRITICAL: {
+        readonly 50: "254 242 242";
+        readonly 100: "254 226 226";
+        readonly 200: "254 202 202";
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+        readonly 500: "239 68 68";
+        readonly 600: "220 38 38";
+        readonly 700: "185 28 28";
+        readonly 800: "153 27 27";
+        readonly 900: "127 29 29";
+    };
+    PRIMARY: {
+        readonly 50: "239 246 255";
+        readonly 100: "219 234 254";
+        readonly 200: "191 219 254";
+        readonly 300: "147 197 253";
+        readonly 400: "96 165 250";
+        readonly 500: "59 130 246";
+        readonly 600: "37 99 235";
+        readonly 700: "29 78 216";
+        readonly 800: "30 64 175";
+        readonly 900: "30 58 138";
+    };
+    SECONDARY: {
+        readonly 50: "248 250 252";
+        readonly 100: "241 245 249";
+        readonly 200: "226 232 240";
+        readonly 300: "203 213 225";
+        readonly 400: "148 163 184";
+        readonly 500: "100 116 139";
+        readonly 600: "71 85 105";
+        readonly 700: "51 65 85";
+        readonly 800: "30 41 59";
+        readonly 900: "15 23 42";
+    };
+    ACCENT: {
+        readonly 50: "236 254 255";
+        readonly 100: "207 250 254";
+        readonly 200: "165 243 252";
+        readonly 300: "103 232 249";
+        readonly 400: "34 211 238";
+        readonly 500: "6 182 212";
+        readonly 600: "8 145 178";
+        readonly 700: "14 116 144";
+        readonly 800: "21 94 117";
+        readonly 900: "22 78 99";
+    };
+    NEUTRAL: {
+        readonly 50: "250 250 250";
+        readonly 100: "245 245 245";
+        readonly 200: "229 229 229";
+        readonly 300: "212 212 212";
+        readonly 400: "163 163 163";
+        readonly 500: "115 115 115";
+        readonly 600: "82 82 82";
+        readonly 700: "64 64 64";
+        readonly 800: "38 38 38";
+        readonly 900: "23 23 23";
+    };
+    BLACK: {
+        readonly DEFAULT: "26 27 28";
+    };
+    WHITE: {
+        readonly DEFAULT: "255 255 255";
+    };
+    INFO: {
+        readonly 50: "239 246 255";
+        readonly 100: "219 234 254";
+        readonly 200: "191 219 254";
+        readonly 300: "147 197 253";
+        readonly 400: "96 165 250";
+        readonly 500: "59 130 246";
+        readonly 600: "37 99 235";
+        readonly 700: "29 78 216";
+        readonly 800: "30 64 175";
+        readonly 900: "30 58 138";
+    };
+    SUCCESS: {
+        readonly 50: "240 253 244";
+        readonly 100: "220 252 231";
+        readonly 200: "187 247 208";
+        readonly 300: "134 239 172";
+        readonly 400: "74 222 128";
+        readonly 500: "34 197 94";
+        readonly 600: "22 163 74";
+        readonly 700: "21 128 61";
+        readonly 800: "22 101 52";
+        readonly 900: "20 83 45";
+    };
+    WARNING: {
+        readonly 50: "255 251 235";
+        readonly 100: "254 243 199";
+        readonly 200: "253 230 138";
+        readonly 300: "252 211 77";
+        readonly 400: "251 191 36";
+        readonly 500: "245 158 11";
+        readonly 600: "217 119 6";
+        readonly 700: "180 83 9";
+        readonly 800: "146 64 14";
+        readonly 900: "120 53 15";
+    };
+    DANGER: {
+        readonly 50: "254 242 242";
+        readonly 100: "254 226 226";
+        readonly 200: "254 202 202";
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+        readonly 500: "239 68 68";
+        readonly 600: "220 38 38";
+        readonly 700: "185 28 28";
+        readonly 800: "153 27 27";
+        readonly 900: "127 29 29";
+    };
+};
+export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
 export interface IconProps extends CommonProps {
     /**
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
      */
-    name: TrackunitIconName | HeroIconName;
+    name: IconName;
     /**
      * The color of the icon.
      * Supports any colors from the theme.
@@ -44,7 +292,7 @@ export interface IconProps extends CommonProps {
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
- * - All the [HeroIcons](https://heroicons.dev/) as well as custom TrackUnit icons are available.
+ * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
  *
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component

package/src/components/Popover/Popover.d.ts

@@ -16,27 +16,35 @@ export declare const usePopoverContext: () => {
         className?: string | undefined;
         dataTestId?: string | undefined;
     };
-    placement: import("@floating-ui/core").Placement;
-    strategy: import("@floating-ui/core").Strategy;
+    placement: import("@floating-ui/utils").Placement;
+    strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
-    x: number | null;
-    y: number | null;
+    x: number;
+    y: number;
+    isPositioned: boolean;
     update: () => void;
-    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-    floating: (node: HTMLElement | null) => void;
-    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floatingStyles: import("react").CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        placement: import("@floating-ui/core").Placement;
-        strategy: import("@floating-ui/core").Strategy;
-        x: number | null;
-        y: number | null;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        x: number;
+        y: number;
         middlewareData: import("@floating-ui/core").MiddlewareData;
-        update: () => void;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-        floating: (node: HTMLElement | null) => void;
         isPositioned: boolean;
+        update: () => void;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
@@ -44,9 +52,6 @@ export declare const usePopoverContext: () => {
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
-    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    isPositioned: boolean;
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;

package/src/components/Popover/usePopover.d.ts

@@ -17,27 +17,35 @@ export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: con
         className?: string | undefined;
         dataTestId?: string | undefined;
     };
-    placement: import("@floating-ui/react").Placement;
-    strategy: import("@floating-ui/react").Strategy;
-    middlewareData: import("@floating-ui/react").MiddlewareData;
-    x: number | null;
-    y: number | null;
+    placement: import("@floating-ui/utils").Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
     update: () => void;
-    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-    floating: (node: HTMLElement | null) => void;
-    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floatingStyles: import("react").CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        placement: import("@floating-ui/react").Placement;
-        strategy: import("@floating-ui/react").Strategy;
-        x: number | null;
-        y: number | null;
-        middlewareData: import("@floating-ui/react").MiddlewareData;
-        update: () => void;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-        floating: (node: HTMLElement | null) => void;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        x: number;
+        y: number;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
+        update: () => void;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
@@ -45,9 +53,6 @@ export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: con
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
-    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    isPositioned: boolean;
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;