@trackunit/react-components 0.1.7 → 0.1.10

package/index.js

@@ -7,7 +7,7 @@ import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { format, formatDistance } from 'date-fns';
-import { useFloating, offset, shift, flip, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import { useFloating, offset, shift, flip, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
@@ -1187,7 +1187,8 @@ const CardHeader = ({
   className,
   children,
   accessories,
-  density
+  density,
+  extraClassName
 }) => {
   return jsx(BottomBorderedDensityContainer, Object.assign({
     dataTestId: dataTestId,
@@ -1195,7 +1196,9 @@ const CardHeader = ({
     "$density": density
   }, {
     children: jsxs(Container$6, {
-      children: [jsxs("div", {
+      children: [jsxs("div", Object.assign({
+        className: extraClassName
+      }, {
         children: [jsxs(HeadingContainer$1, {
           children: [jsx(Heading$1, Object.assign({
             variant: headingVariant
@@ -1208,7 +1211,7 @@ const CardHeader = ({
         }, {
           children: subHeading
         })), children]
-      }), onClose && jsx(IconButton, {
+      })), onClose && jsx(IconButton, {
         dataTestId: "card-header-close-button",
         variant: "transparent",
         color: "secondary",
@@ -4053,14 +4056,14 @@ tu-select__counter
  * @template Group
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
- * @param {boolean} menuIsClosing a flag to trigger fade out animation for the menu
+ * @param {boolean} menuIsOpen menu is open state
  * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
  *  @param {JSX.Element} dropdownIcon an custom dropdown icon
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
   const customComponents = React.useMemo(() => {
     return Object.assign({
       ValueContainer: props => {
@@ -4131,11 +4134,11 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
       DropdownIndicator: props => {
         return props.selectProps.isLoading ? null : jsx(components.DropdownIndicator, Object.assign({}, props, {
           children: jsx(StyledIcon, {
-            children: dropdownIcon ? dropdownIcon : menuIsClosing ? jsx(Icon$1, {
-              name: "ChevronDownIcon",
+            children: dropdownIcon ? dropdownIcon : menuIsOpen ? jsx(Icon$1, {
+              name: "ChevronUpIcon",
               size: "medium"
             }) : jsx(Icon$1, {
-              name: "ChevronUpIcon",
+              name: "ChevronDownIcon",
               size: "medium"
             })
           })
@@ -4179,7 +4182,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
       },
       Menu: props => {
         return jsx(components.Menu, Object.assign({}, props, {
-          className: menuIsClosing ? tws`tu-select__menu-list animate-fade-out-fast` : tws`tu-select__menu-list animate-fade-in-fast`
+          className: menuIsOpen ? tws`tu-select__menu-list animate-fade-in-fast` : tws`tu-select__menu-list animate-fade-out-fast`
         }));
       },
       Option: props => {
@@ -4206,7 +4209,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
       }
     }, componentsProps);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [componentsProps, disabled, menuIsClosing, refMenuIsEnabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+  }, [componentsProps, disabled, menuIsOpen, refMenuIsEnabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
   return customComponents;
 };
 const StyledIcon = tw.div`
@@ -4351,33 +4354,21 @@ const useSelect = _a => {
     customStyles
   } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles);
   const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
-  const [menuIsClosing, setMenuIsClosing] = React__default.useState(true);
   const refMenuIsEnabled = React__default.useRef(true);
-  const customComponents = useCustomComponents(components, disabled || false, menuIsClosing, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
+  const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
   const menuPlacement = "auto";
   const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
     onMenuOpen && onMenuOpen();
     if (refMenuIsEnabled.current) {
-      setMenuIsClosing(false);
-      yield setMenuIsOpen(true);
+      setMenuIsOpen(true);
     } else {
       refMenuIsEnabled.current = true;
     }
   });
   const closeMenuHandler = () => {
-    if (refMenuIsEnabled.current) {
-      setMenuIsClosing(true);
-    }
+    setMenuIsOpen(false);
     onMenuClose && onMenuClose();
   };
-  React__default.useEffect(() => {
-    const timeout = menuIsClosing && setTimeout(() => {
-      setMenuIsOpen(false);
-    }, 250);
-    return () => {
-      timeout && clearTimeout(timeout);
-    };
-  }, [menuIsClosing]);
   const orderedOptions = React__default.useMemo(() => {
     return disabled ? getOrderedOptions(options, value).map(option => {
       return Object.assign(Object.assign({}, option), {
@@ -5411,6 +5402,7 @@ const Layout$2 = tw.span`
 
 /**
  * The TitleNavContentLayout.
+ * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
  *
  * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
  * @returns {JSX.Element} TitleNavContentLayout component
@@ -5425,6 +5417,27 @@ const TitleNavContentLayout = ({
 }));
 const Layout$1 = tw.div`
   tu-layout-TitleNavContentLayout
+  lg:tu-layout-TitleNavContentLayout-lg
+`;
+/**
+ * A component to define the title area of the TitleNavContentLayout.
+ */
+const TitleGridArea = tw.header`
+  tu-layout-area-title
+`;
+/**
+ * A component to define the navigation area of the TitleNavContentLayout.
+ * Adds the needed left padding on large screens.
+ */
+const NavGridArea = tw.aside`
+  tu-layout-area-nav
+`;
+/**
+ * A component to define the content area of the TitleNavContentLayout.
+ * Adds the needed right padding on large screens.
+ */
+const ContentGridArea = tw.article`
+  tu-layout-area-content
 `;
 
 /**
@@ -5442,4 +5455,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, Pagination, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.64",
+    "@trackunit/css-core": "0.0.65",
     "@storybook/addon-docs": "6.5.14",
     "@trackunit/tailwind-styled-components": "0.0.50",
     "react": "18.2.0",
-    "@trackunit/ui-design-tokens": "0.0.51",
+    "@trackunit/ui-design-tokens": "0.0.52",
     "@trackunit/react-core-contexts-test": "0.1.13",
     "echarts-for-react": "3.0.2",
     "echarts": "5.4.0",
@@ -16,7 +16,7 @@
     "react-use": "17.4.0",
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
-    "@floating-ui/react-dom-interactions": "0.13.3",
+    "@floating-ui/react": "0.15.1",
     "@trackunit/ui-icons": "0.0.54",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",

package/src/components/Card/CardHeader.d.ts

@@ -33,6 +33,10 @@ export interface CardHeaderProps extends CommonProps {
      * Children to render in the header
      */
     children?: React.ReactNode | null;
+    /**
+     * Extra className for div container
+     */
+    extraClassName?: string | undefined;
 }
 /**
  * Header for Cards and Modals.
@@ -40,4 +44,4 @@ export interface CardHeaderProps extends CommonProps {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, }: CardHeaderProps) => JSX.Element;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, }: CardHeaderProps) => JSX.Element;

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

@@ -1,4 +1,4 @@
-import { Placement } from "@floating-ui/react-dom-interactions";
+import { Placement } from "@floating-ui/react";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common";
 declare type Render = (data: {

package/src/components/Select/useCustomComponents.d.ts

@@ -9,11 +9,11 @@ import { SelectComponents } from "react-select/dist/declarations/src/components"
  * @template Group
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
- * @param {boolean} menuIsClosing a flag to trigger fade out animation for the menu
+ * @param {boolean} menuIsOpen menu is open state
  * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
  *  @param {JSX.Element} dropdownIcon an custom dropdown icon
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined, disabled: boolean, menuIsClosing: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element) => Partial<SelectComponents<Option, IsMulti, Group>>;
+export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined, disabled: boolean, menuIsOpen: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element) => Partial<SelectComponents<Option, IsMulti, Group>>;

package/src/layout/responsive/TitleNavContentLayout.d.ts

@@ -5,9 +5,24 @@ interface TitleNavContentLayoutProps extends CommonProps {
 }
 /**
  * The TitleNavContentLayout.
+ * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
  *
  * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
  * @returns {JSX.Element} TitleNavContentLayout component
  */
 export declare const TitleNavContentLayout: ({ children, className }: TitleNavContentLayoutProps) => JSX.Element;
+/**
+ * A component to define the title area of the TitleNavContentLayout.
+ */
+export declare const TitleGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"header">, {}>;
+/**
+ * A component to define the navigation area of the TitleNavContentLayout.
+ * Adds the needed left padding on large screens.
+ */
+export declare const NavGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"aside">, {}>;
+/**
+ * A component to define the content area of the TitleNavContentLayout.
+ * Adds the needed right padding on large screens.
+ */
+export declare const ContentGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"article">, {}>;
 export {};