@trackunit/react-components 0.1.4 → 0.1.9

package/index.css

@@ -17,9 +17,8 @@
     cursor-pointer
     flex-none
     py-1.5
-    px-2.5
+    component-button-padding
     component-button-height
-    component-button-width
     focus:ring
     focus:ring-offset-1
     focus:outline-none

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';
@@ -3631,9 +3631,11 @@ const Search = ({
   name,
   onClear,
   dataTestId,
-  autoComplete = "on"
+  autoComplete = "on",
+  ref
 }) => {
   return jsx(StyledTextInput, {
+    ref: ref,
     dataTestId: dataTestId,
     name: name,
     className: className,
@@ -4051,14 +4053,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 => {
@@ -4129,11 +4131,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"
             })
           })
@@ -4177,7 +4179,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 => {
@@ -4204,7 +4206,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`
@@ -4349,33 +4351,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), {
@@ -4508,9 +4498,12 @@ const CreatableSelect = props => {
  * @returns {JSX.Element} Select component
  */
 const Select = props => {
+  const {
+      className
+    } = props,
+    propsNoClassName = __rest(props, ["className"]);
   const {
     id,
-    className,
     dataTestId = "select",
     prefix,
     async,
@@ -4580,10 +4573,10 @@ const Select = props => {
       ref: refPrefix
     }, {
       children: prefix
-    })), async ? jsx(ReactAsyncSelect, Object.assign({}, props, selectProps, async, {
+    })), async ? jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, {
       onMenuOpen: openMenuHandler,
       onMenuClose: closeMenuHandler
-    })) : jsx(ReactSelect, Object.assign({}, props, selectProps, {
+    })) : jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, {
       options: filterOption ? orderedOptions : options,
       hideSelectedOptions: false,
       isMulti: isMulti,
@@ -5406,17 +5399,42 @@ 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
  */
 const TitleNavContentLayout = ({
-  children
-}) => jsx(Layout$1, {
+  children,
+  className
+}) => jsx(Layout$1, Object.assign({
+  className: className
+}, {
   children: children
-});
+}));
 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
 `;
 
 /**
@@ -5434,4 +5452,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.4",
+  "version": "0.1.9",
   "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/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/Search/Search.d.ts

@@ -50,6 +50,7 @@ export interface SearchProps extends CommonProps {
      * Event that search box is cleared.
      */
     onClear?: () => void;
+    ref?: React.Ref<HTMLInputElement | undefined>;
 }
 /**
  * The Search component is used to render a search input field.
@@ -57,4 +58,4 @@ export interface SearchProps extends CommonProps {
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, }: SearchProps) => JSX.Element;
+export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, ref, }: SearchProps) => JSX.Element;

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

@@ -1,12 +1,28 @@
 /// <reference types="react" />
-interface TitleNavContentLayoutProps {
+import { CommonProps } from "../../common";
+interface TitleNavContentLayoutProps extends CommonProps {
     children: React.ReactNode;
 }
 /**
  * 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 }: TitleNavContentLayoutProps) => JSX.Element;
+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 {};