@trackunit/react-components 0.0.80 → 0.0.81

package/components/Icon/Icon.d.ts

@@ -27,7 +27,7 @@ export interface IconProps extends CommonProps {
      * Trackunit icons might not support both outline and Solid.
      */
     type?: "solid" | "outline";
-    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
      * @deprecated
      */

package/components/Menu/MenuItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 export interface MenuItemProps {
     /**
      * The icon to be rendered in the menu item.
@@ -17,9 +17,36 @@ export interface MenuItemProps {
      */
     dataTestId?: string;
     /**
-     * onClick event.
+     * An React element to render before the label.
+     * This is typically used to render an icon.
+     *
      */
-    onClick: () => void;
+    prefix?: JSX.Element;
+    /**
+     * An boolean flag to turn on/off selected state
+     * This is typically used highlight that item is selected
+     *
+     * @memberof IMenuItemProps
+     */
+    selected?: boolean;
+    /**
+     * OnClick event handler it is thrown on root element of the component tree
+     *
+     * @memberof IMenuItemProps
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * An boolean flag to turn on/off focused state
+     * This is typically used for keyboard navigation
+     *
+     * @memberof IMenuItemProps
+     */
+    focused?: boolean;
+    /**
+     * A boolean prop to set menu item to disabled state
+     * used in disabled select options
+     */
+    disabled?: boolean;
 }
 /**
  * The MenuItem component should be used to inform the user of important information.
@@ -27,4 +54,4 @@ export interface MenuItemProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: MenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, selected, focused, prefix, icon, disabled, onClick, }: MenuItemProps) => JSX.Element;

package/components/Menu/MenuList.d.ts

@@ -16,6 +16,14 @@ export interface MenuListProps {
      * List of menu items to be rendered.
      */
     menuItems: MenuListItemProps[];
+    /**
+     * A component width
+     */
+    width?: string;
+    /**
+     * Custom renderer for menu items
+     */
+    itemRenderer?: (item: MenuListItemProps, key: string, index: number) => JSX.Element;
 }
 /**
  * The MenuList component is used for menus and selects.
@@ -23,4 +31,4 @@ export interface MenuListProps {
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: MenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, menuItems, width, itemRenderer, ...args }: MenuListProps) => JSX.Element;

package/components/Select/CreatableSelect.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
-import { SelectProps } from "./shared";
+import { ISelectProps } from "./shared";
 /**
  * The CreatableSelect component.
  *
- * @param {SelectProps} props - The props for the CreatableSelect component
+ * @param {ISelectProps} props - The props for the CreatableSelect component
  * @returns {JSX.Element} CreatableSelect component
  */
-export declare const CreatableSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, size, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, styles, components, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;
+export declare const CreatableSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, size, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, styles, components, ...props }: ISelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;

package/components/Select/Select/Select.d.ts

@@ -0,0 +1,122 @@
+/// <reference types="react" />
+import { GroupBase, MultiValue, SingleValue } from "react-select";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
+import { CommonProps } from "../../../common";
+import { SelectOption } from "./useCustomComponents";
+export interface SelectProps extends CommonProps {
+    /**
+     * An React element to render before the text in the select.
+     * This is typically used to render an icon.
+     *
+     *
+     * @memberof SelectProps
+     */
+    prefix?: JSX.Element;
+    /**
+     * An string to render in field when there is no value selected.
+     * Can be used as a description, example or a hint.
+     *
+     *
+     * @memberof SelectProps
+     */
+    placeholder?: string;
+    /**
+     * An boolean flag to disable field
+     *
+     *
+     * @memberof SelectProps
+     */
+    disabled?: boolean;
+    /**
+     * An field id
+     *
+     *
+     * @memberof SelectProps
+     */
+    id?: string;
+    /**
+     * An boolean flag to set select into async mode
+     * This is typically used when data is fetched after render
+     *
+     *
+     * @memberof SelectProps
+     */
+    isAsync?: boolean;
+    /**
+     * A custom icon to be used as a dropdown indicator
+     * This is typically used during style customization
+     *
+     *
+     * @memberof SelectProps
+     */
+    dropdownIcon?: JSX.Element;
+    /**
+     * A label to be used as a aria-label
+     * This is typically used for accessibility
+     *
+     *
+     * @memberof SelectProps
+     */
+    label?: string;
+    /**
+     * A number of pixels to limit maximal length of the select menu list
+     *
+     *
+     * @memberof SelectProps
+     */
+    maxMenuHeight?: number;
+    /**
+     * A flag to allow multiselect
+     *
+     *
+     * @memberof SelectProps
+     */
+    multiple?: boolean;
+    /**
+     * A boolean prop to set select into invalid mode
+     * typically used when selected value is not compliant with field requirement
+     * ex if it breaks validation rules
+     *
+     *
+     * @memberof SelectProps
+     */
+    hasError?: boolean;
+    /**
+     * A react select component prop to overide
+     *
+     *
+     * @memberof SelectProps
+     */
+    components?: Partial<SelectComponents<SelectOption, boolean, GroupBase<SelectOption>>>;
+    /**
+     * A single or multi value selection
+     *
+     *
+     * @memberof SelectProps
+     */
+    value?: SingleValue<SelectOption> | MultiValue<SelectOption>;
+    /**
+     * An array of options to select from
+     *
+     *
+     * @memberof SelectProps
+     */
+    options: SelectOption[];
+    /**
+     * Handle change events on the select
+     *
+     *
+     * @memberof SelectProps
+     */
+    onChange: (newValue: MultiValue<SelectOption> | SingleValue<SelectOption>) => void;
+}
+/**
+ * Selects are input components used to choose a value from a set.
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {JSX.Element} Select component
+ */
+export declare const Select: {
+    ({ id, className, dataTestId, prefix, isAsync, dropdownIcon, maxMenuHeight, label, hasError, disabled, multiple, components, value, options, onChange, }: SelectProps): JSX.Element;
+    displayName: string;
+};

package/components/Select/Select/TagsContainer.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+interface TagsContainerItem {
+    /**
+     * A text value to be passed to tags inside container
+     */
+    text: string;
+    /**
+     * OnClick handler for a tags
+     */
+    onClick: () => void;
+    /**
+     * A flag to set tags to readonly mode (without close button)
+     */
+    disabled: boolean;
+}
+interface TagsContainerProps {
+    /**
+     * An items to be rendered inside container if they fit available space. If they overlap then the counter will be displayed.
+     */
+    items: TagsContainerItem[];
+    /**
+     * An css property to set a custom width for container
+     * Default behavior is to take 100% width of parent element
+     * You can provide a value with unit (pixels, percents, rem, etc)
+     *
+     * @memberof TagsContainerProps
+     */
+    width?: string;
+    /**
+     * In case you have a gap between items then you can provide it to be used in calculation of available space,
+     * default value is 5, so if you don't need it then provide 0
+     *
+     * @memberof TagsContainerProps
+     */
+    itemsGap?: number;
+    postFix: JSX.Element;
+}
+/**
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ *
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {JSX.Element} TagsContainer
+ */
+export declare const TagsContainer: ({ items, width, itemsGap, postFix }: TagsContainerProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { GroupBase } from "react-select";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
+export interface SelectOption {
+    id: string;
+    value: string;
+    label: string;
+}
+/**
+ * A hook to retrieve components override object.
+ * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
+ *
+ * @param {Partial<SelectComponents<SelectOption, boolean, GroupBase<SelectOption>>> | 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 {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {JSX.Element} dropdownIcon an custom dropdown icon
+ * @returns {Partial<SelectComponents<SelectOption, boolean, GroupBase<SelectOption>>> | undefined} components object to override react-select default components
+ */
+export declare const useCustomComponents: (componentsProps: Partial<SelectComponents<SelectOption, boolean, GroupBase<SelectOption>>> | undefined, disabled: boolean, menuIsClosing: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dropdownIcon?: JSX.Element) => Partial<SelectComponents<SelectOption, boolean, GroupBase<SelectOption>>>;

package/components/Select/Select/useCustomStyles.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StylesConfig } from "react-select";
+/**
+ * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
+ * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @returns {StylesConfig<Option, boolean>} styles to override in select
+ */
+export declare const useCustomStyles: <Option, IsMulti extends boolean = false>(refContainer: React.RefObject<HTMLDivElement>, refPrefix: React.RefObject<HTMLDivElement>) => {
+    customStyles: StylesConfig<Option, IsMulti, import("react-select").GroupBase<Option>>;
+};

package/components/Select/Select/utils.d.ts

@@ -0,0 +1,10 @@
+import { ActionMeta, MultiValue } from "react-select";
+import { SelectOption } from "./useCustomComponents";
+/**
+ * A basic reducer for managing selected items state in storybook
+ *
+ * @param {MultiValue<SelectOption>} state current selected state
+ * @param {ActionMeta<SelectOption>} action action performed by user
+ * @returns {MultiValue<SelectOption>} New selected state
+ */
+export declare const reducer: (state: MultiValue<SelectOption>, action: ActionMeta<SelectOption>) => MultiValue<SelectOption>;

package/components/Select/Select.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
-import { SelectProps } from "./shared";
+import { ISelectProps } from "./shared";
 /**
  * The Select component.
  *
- * @param {SelectProps} props - The props for the Select component
+ * @param {ISelectProps} props - The props for the Select component
  * @returns {JSX.Element} Select component
  */
-export declare const Select: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, size, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, styles, components, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;
+export declare const Select: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, size, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, styles, components, ...props }: ISelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;

package/components/Select/SelectMenuItem/SelectMenuItem.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { CommonProps } from "../../../common";
+interface SelectMenuItemProps extends CommonProps {
+    /**
+     * An string to render as a item label.
+     *
+     */
+    label: string;
+    /**
+     * An handler for click on element
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * A boolean prop to set menu item to selected state
+     */
+    selected?: boolean;
+    /**
+     * A boolean prop to set menu item to focused state
+     * used for keyboard navigation
+     */
+    focused?: boolean;
+    /**
+     * A boolean prop to set menu item to disabled state
+     * used in disabled select options
+     */
+    disabled?: boolean;
+}
+export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
+    /**
+     * An React element to render before the text in the select.
+     * This is typically used to render an icon.
+     */
+    icon?: JSX.Element;
+}
+/**
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {JSX.Element} SingleSelectMenuItem
+ */
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, focused, }: SingleSelectMenuItemProps) => JSX.Element;
+/**
+ * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {JSX.Element} multi select menu item
+ */
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, focused, disabled, }: SelectMenuItemProps) => JSX.Element;
+export {};

package/components/Select/shared.d.ts

@@ -47,7 +47,7 @@ export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends b
      */
     isAsync?: IsAsync;
 }
-export declare type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> = IsAsync extends true ? AsyncProps<Option, IsMulti, GroupType> & ISelectProps<Option, IsAsync, IsMulti, GroupType> : ISelectProps<Option, IsAsync, IsMulti, GroupType>;
+export declare type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> = IsAsync extends true ? AsyncProps<Option, IsMulti, GroupType> & SelectProps<Option, IsAsync, IsMulti, GroupType> : SelectProps<Option, IsAsync, IsMulti, GroupType>;
 /**
  * The useCustomStyles hook for getting trackunit specific styling on react-select.
  *

package/components/Tag/Tag.d.ts

@@ -31,6 +31,9 @@ interface TagProps extends CommonProps {
      *
      */
     size?: TagSize;
+    onWidthKnown?: ({ width }: {
+        width: number;
+    }) => void;
 }
 /**
  * Tags allow users to enter information and filter content.
@@ -40,5 +43,5 @@ interface TagProps extends CommonProps {
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
  */
-export declare const Tag: ({ className, dataTestId, children, size, onClose, color, ...rest }: TagProps) => JSX.Element;
+export declare const Tag: ({ className, dataTestId, children, size, onClose, color, onWidthKnown, ...rest }: TagProps) => JSX.Element;
 export {};

package/index.js

@@ -685,7 +685,7 @@ const Alert = ({
       "$inline": inline
     }, {
       children: getIconFromIntent()
-    })), jsxs(Content$2, Object.assign({
+    })), jsxs(Content$1, Object.assign({
       "$inline": inline
     }, {
       children: [body, (primaryAction || secondaryAction) && jsxs(RightAligned, Object.assign({
@@ -747,7 +747,7 @@ const Container$7 = tw.div`
   ${p => p.$inline ? tws`tu-alert--inline` : null}
   ${getBackgroundColor()}
 `;
-const Content$2 = tw.div`
+const Content$1 = tw.div`
   ${p => p.$inline ? tws`tu-alert__content--inline` : tws`tu-alert__content`}
 `;
 const Description$2 = tw(Text)`
@@ -2340,7 +2340,7 @@ const Tooltip = ({
       dataTestId: dataTestId,
       enableBackdrop: false
     }, {
-      children: jsx(Content$1, Object.assign({
+      children: jsx(Content, Object.assign({
         "$mode": mode
       }, {
         children: jsx(Text, Object.assign({
@@ -2359,7 +2359,7 @@ const Flex$1 = tw.div`
 const Container$4 = tw(AnimatedPopover)`
   tu-tooltip__container
 `;
-const Content$1 = tw.div`
+const Content = tw.div`
   tu-tooltip__content
   ${p => p.$mode === "light" ? tws`tu-tooltip--light` : null}
 `;
@@ -2721,33 +2721,64 @@ const MenuItem = ({
   className,
   dataTestId,
   label,
+  selected,
+  focused,
+  prefix,
   icon,
+  disabled,
   onClick
 }) => {
   const containerProps = useContainerProps({
     className,
     dataTestId
   });
-  return jsx(Container$2, Object.assign({}, containerProps, {
-    onClick: onClick
+  return jsxs(Container$2, Object.assign({}, containerProps, {
+    onClick: e => {
+      e.stopPropagation();
+      onClick && onClick(e);
+    },
+    "$selected": selected,
+    "$focused": focused,
+    tabIndex: 0,
+    "$disabled": disabled
   }, {
-    children: jsxs(Content, {
-      children: [jsx(Label$1, {
-        children: label
-      }), icon && jsx(Icon, {
-        children: icon
-      })]
-    })
+    children: [prefix && jsx(Prefix, Object.assign({
+      "$selected": selected
+    }, {
+      children: prefix
+    })), jsx(Label$1, {
+      children: label
+    }), icon && jsx(Icon, Object.assign({
+      "$selected": selected
+    }, {
+      children: icon
+    }))]
   }));
 };
 const Container$2 = tw.div`
   group tu-menu-item
-`;
-const Content = tw.div`
-  tu-menu-item__content
+  ${({
+  $selected
+}) => $selected ? tws`tu-menu-item--selected ` : "tu-menu-item--unselected"}
+  ${({
+  $focused
+}) => $focused ? tws`tu-menu-item--focused ` : ""}
+  ${({
+  $disabled
+}) => $disabled ? tws`tu-menu-item--disabled ` : ""}
+
 `;
 const Icon = tw.div`
   tu-menu-item__icon
+  ${({
+  $selected
+}) => $selected ? tws`tu-menu-item__icon--selected ` : ""}
+`;
+const Prefix = tw.div`
+  tu-menu-item__prefix
+  ${({
+  $selected
+}) => $selected ? tws`tu-menu-item__prefix--selected ` : ""}
 `;
 const Label$1 = tw.div`
   tu-menu-item__label
@@ -2764,9 +2795,11 @@ const MenuList = _a => {
   var {
     dataTestId,
     className,
-    menuItems
+    menuItems,
+    width,
+    itemRenderer
   } = _a,
-      args = __rest(_a, ["dataTestId", "className", "menuItems"]);
+      args = __rest(_a, ["dataTestId", "className", "menuItems", "width", "itemRenderer"]);
 
   const containerProps = useContainerProps(Object.assign({
     className,
@@ -2774,15 +2807,20 @@ const MenuList = _a => {
   }, args));
   return jsx(Wrapper, {
     children: jsx(Container$1, Object.assign({}, containerProps, {
+      style: width ? {
+        width
+      } : undefined,
+      tabIndex: 0
+    }, {
       children: menuItems.map((props, index) => {
-        const item = createElement(MenuItem, Object.assign({}, props, {
-          key: `${index}-${props.label}`,
+        const key = `${index}-${props.label}`;
+        const item = itemRenderer ? itemRenderer(props, key, index) : createElement(MenuItem, Object.assign({}, props, {
+          key: key,
           onClick: props.onClick
         }));
-
-        return props.showDivider ? jsxs(Fragment, {
+        return props.showDivider ? jsxs("div", {
           children: [jsx(Divider, {}), " ", item]
-        }) : item;
+        }, key) : item;
       })
     }))
   });
@@ -3741,7 +3779,7 @@ const useCustomComponents = components => {
 /**
  * The CreatableSelect component.
  *
- * @param {SelectProps} props - The props for the CreatableSelect component
+ * @param {ISelectProps} props - The props for the CreatableSelect component
  * @returns {JSX.Element} CreatableSelect component
  */
 
@@ -3798,7 +3836,7 @@ const CreatableSelect = _a => {
 /**
  * The Select component.
  *
- * @param {SelectProps} props - The props for the Select component
+ * @param {ISelectProps} props - The props for the Select component
  * @returns {JSX.Element} Select component
  */
 
@@ -3926,20 +3964,31 @@ const Tag = _a => {
     children,
     size = "default",
     onClose,
-    color = "primary"
+    color = "primary",
+    onWidthKnown
   } = _a;
-      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color", "onWidthKnown"]);
 
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    var _a;
+
+    onWidthKnown && onWidthKnown({
+      width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0
+    });
+  }, [ref, onWidthKnown]);
   return jsxs(StyledText, Object.assign({
     className: className,
     "$size": size,
     "data-testid": dataTestId,
     "$as": "span",
     "$color": color,
-    "$withXIcon": !!onClose
+    "$withXIcon": !!onClose,
+    ref: ref
   }, {
-    children: [children, onClose && jsx(IconContainer, Object.assign({
-      onClick: onClose
+    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
+    jsx(IconContainer, Object.assign({
+      onMouseDown: onClose
     }, {
       children: jsx(Icon$1, {
         name: "XCircleIcon",

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {
-    "@trackunit/css-core": "0.0.45",
+    "@trackunit/css-core": "0.0.46",
     "@trackunit/tailwind-styled-components": "0.0.40",
     "react": "17.0.1",
     "@trackunit/ui-design-tokens": "0.0.39",
@@ -20,8 +20,7 @@
     "@popperjs/core": "^2.11.4",
     "history": "^5.3.0",
     "react-router-dom": "^6.2.2",
-    "react-select": "^5.2.2",
-    "faker": "^5.5.3",
+    "react-select": "^5.4.0",
     "react-moment": "^1.1.2"
   },
   "module": "./index.js",