@trackunit/react-components 0.0.142 → 0.0.146

package/components/PageHeading/PageHeading.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="react" />
-interface PageHeadingProps {
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import "./PageHeading.css";
+export interface PageHeadingProps extends CommonProps {
     /**
      * The title of the page.
      */
@@ -9,16 +11,14 @@ interface PageHeadingProps {
      */
     subtitle?: string;
     /**
-     * Test id to be used for the component.
+     * The addon could be used to tell the state of a pageheading.
      */
-    dataTestId?: string;
-    tag?: string;
+    addon?: ReactNode;
 }
 /**
- * The PageHeading component used on pages.
+ * The PageHeading component is used on pages to set the Browser page title.
  *
  * @param {PageHeadingProps} props - The props for the PageHeading component
  * @returns {JSX.Element} PageHeading component
  */
-export declare const PageHeading: ({ title, subtitle, dataTestId, tag }: PageHeadingProps) => JSX.Element;
-export {};
+export declare const PageHeading: ({ title, subtitle, dataTestId, addon }: PageHeadingProps) => JSX.Element;

package/components/Select/Select.d.ts

@@ -4,6 +4,7 @@ import { SelectProps } from "./useSelect";
 export interface SelectOption {
     label: string;
     value: string;
+    disabled?: boolean;
 }
 /**
  * Selects are input components used to choose a value from a set.

package/components/Select/shared.d.ts

@@ -12,4 +12,4 @@ export declare function isMultiValue<Option>(arg: MultiValue<Option> | SingleVal
  * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
  */
 export declare const getOrderedOptions: <Option, Group extends GroupBase<Option>>(options: OptionsOrGroups<Option, Group> | undefined, value: PropsValue<Option> | undefined) => OptionsOrGroups<Option, Group>;
-export declare const SelectPrefix: import("tailwind-styled-components/dist/tailwind").TailwindComponent<"div", {}>;
+export declare const SelectPrefix: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"div">, {}>;

package/index.css

@@ -211,6 +211,16 @@
   }
 }
 
+.tu-pageheading {
+  @apply w-full;
+
+  &__flex{
+    @apply flex
+      items-center
+      flex-wrap-reverse
+      gap-2;
+  }
+}
 /* CSS related to the RadioGroup component */
 .tu-radiogroup {
   @apply flex 

package/index.js

@@ -2234,7 +2234,7 @@ const PopoverListItem = ({
   }, {
     children: url ? jsx(UnstyledAnchor, Object.assign({
       "$as": renderAs,
-      to: url
+      href: url
     }, {
       children: content
     })) : content
@@ -3170,100 +3170,7 @@ const Space = tw.div`
 `;
 
 /**
- *  The tag component is used to categorize elements in the ui.
- *
- *  This could be to tell the state of an asset, or label a page as Beta.
- *
- *  The tag is also used in multiselect components to show selected options.
- *
- *  **Do:** Use short labels for easy scanning.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
- */
-
-const Tag = React.forwardRef((_a, ref) => {
-  var {
-    className,
-    dataTestId,
-    children,
-    size = "medium",
-    onClose,
-    color = "primary"
-  } = _a;
-      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
-
-  return jsxs(StyledText, Object.assign({
-    className: className,
-    "$size": size,
-    "data-testid": `${dataTestId}-tag`,
-    "$as": "span",
-    "$color": color,
-    "$withXIcon": !!onClose,
-    ref: ref
-  }, {
-    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",
-        dataTestId: dataTestId + "Icon",
-        type: "solid",
-        style: {
-          WebkitTransition: "-webkit-transform 0.150s"
-        },
-        className: size === "medium" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
-      })
-    }))]
-  }));
-});
-
-const getSizeModifierClass = () => ({
-  $size,
-  $withXIcon
-}) => {
-  const tagSizeModifierClass = {
-    medium: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
-    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
-  };
-  return tagSizeModifierClass[$size];
-};
-
-const getColorModifierClass = () => ({
-  $color
-}) => {
-  const colorClasses = {
-    primary: tws`tu-tag--primary`,
-    secondary: tws`tu-tag--secondary`,
-    accent: tws`tu-tag--accent`,
-    success: tws`tu-tag--success`,
-    danger: tws`tu-tag--danger`,
-    warning: tws`tu-tag--warning`,
-    info: tws`tu-tag--info`,
-    neutral: tws`tu-tag--neutral`,
-    good: tws`tu-tag--good`,
-    low: tws`tu-tag--low`,
-    critical: tws`tu-tag--critical`,
-    working: tws`tu-tag--working`,
-    idle: tws`tu-tag--idle`,
-    stopped: tws`tu-tag--stopped`,
-    unknown: tws`tu-tag--unknown`
-  };
-  return colorClasses[$color];
-};
-
-const StyledText = tw.span`
-  tu-tag
-  ${getSizeModifierClass()}
-  ${getColorModifierClass()}
-`;
-const IconContainer = tw.div`
-  tu-tag__icon-container
-`;
-
-/**
- * The PageHeading component used on pages.
+ * The PageHeading component is used on pages to set the Browser page title.
  *
  * @param {PageHeadingProps} props - The props for the PageHeading component
  * @returns {JSX.Element} PageHeading component
@@ -3273,11 +3180,9 @@ const PageHeading = ({
   title,
   subtitle,
   dataTestId,
-  tag
+  addon
 }) => {
-  return jsxs("div", Object.assign({
-    className: "w-full"
-  }, {
+  return jsxs(PageHeadingContainer, {
     children: [jsx(Helmet, {
       title: title
     }), jsxs(StyledFlex, {
@@ -3286,11 +3191,7 @@ const PageHeading = ({
         dataTestId: dataTestId
       }, {
         children: title
-      })), tag && jsx(Tag, Object.assign({
-        color: "primary"
-      }, {
-        children: tag
-      }))]
+      })), addon]
     }), subtitle && jsx(Heading, Object.assign({
       variant: "subtitle",
       subtle: true
@@ -3299,14 +3200,10 @@ const PageHeading = ({
     })), jsx(Spacer, {
       minHeight: "normal"
     })]
-  }));
+  });
 };
-const StyledFlex = tw.div`
-  flex
-  items-center
-  flex-wrap-reverse
-  gap-2
-`;
+const PageHeadingContainer = tw.div`tu-pageheading`;
+const StyledFlex = tw.div`tu-pageheading__flex`;
 
 function useConfirmExit(confirmExit, when = true) {
   const {
@@ -3611,6 +3508,99 @@ const SelectPrefix = tw.div`
   tu-select__prefix 
 `;
 
+/**
+ *  The tag component is used to categorize elements in the ui.
+ *
+ *  This could be to tell the state of an asset, or label a page as Beta.
+ *
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+
+const Tag = React.forwardRef((_a, ref) => {
+  var {
+    className,
+    dataTestId,
+    children,
+    size = "medium",
+    onClose,
+    color = "primary"
+  } = _a;
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+
+  return jsxs(StyledText, Object.assign({
+    className: className,
+    "$size": size,
+    "data-testid": `${dataTestId}-tag`,
+    "$as": "span",
+    "$color": color,
+    "$withXIcon": !!onClose,
+    ref: ref
+  }, {
+    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",
+        dataTestId: dataTestId + "Icon",
+        type: "solid",
+        style: {
+          WebkitTransition: "-webkit-transform 0.150s"
+        },
+        className: size === "medium" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
+      })
+    }))]
+  }));
+});
+
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
+}) => {
+  const tagSizeModifierClass = {
+    medium: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
+    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
+  };
+  return tagSizeModifierClass[$size];
+};
+
+const getColorModifierClass = () => ({
+  $color
+}) => {
+  const colorClasses = {
+    primary: tws`tu-tag--primary`,
+    secondary: tws`tu-tag--secondary`,
+    accent: tws`tu-tag--accent`,
+    success: tws`tu-tag--success`,
+    danger: tws`tu-tag--danger`,
+    warning: tws`tu-tag--warning`,
+    info: tws`tu-tag--info`,
+    neutral: tws`tu-tag--neutral`,
+    good: tws`tu-tag--good`,
+    low: tws`tu-tag--low`,
+    critical: tws`tu-tag--critical`,
+    working: tws`tu-tag--working`,
+    idle: tws`tu-tag--idle`,
+    stopped: tws`tu-tag--stopped`,
+    unknown: tws`tu-tag--unknown`
+  };
+  return colorClasses[$color];
+};
+
+const StyledText = tw.span`
+  tu-tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+  tu-tag__icon-container
+`;
+
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
@@ -3963,7 +3953,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
       },
       Menu: props => {
         return jsx(components.Menu, Object.assign({}, props, {
-          className: menuIsClosing ? tws`tu-menu-list animate-fade-out-fast` : tws`tu-menu-list animate-fade-in-fast`
+          className: menuIsClosing ? tws`tu-select__menu-list animate-fade-out-fast` : tws`tu-select__menu-list animate-fade-in-fast`
         }));
       },
       Option: props => {
@@ -3982,7 +3972,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
             disabled: disabled,
             dataTestId: props.label
           })) : jsx(SingleSelectMenuItem, Object.assign({}, componentProps, {
-            disabled: disabled,
+            disabled: disabled || props.isDisabled,
             dataTestId: props.label
           }))
         }));
@@ -4031,13 +4021,13 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
       indicatorSeparator: () => ({
         width: "0px"
       }),
-      menu: () => {
-        return {
+      menu: base => {
+        return Object.assign(Object.assign({}, base), {
           width: "100%",
           marginTop: "4px",
           marginBottom: "18px",
           transition: "all 1s ease-in-out"
-        };
+        });
       },
       input: base => Object.assign(Object.assign({}, base), {
         marginLeft: "0px"

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.142",
+  "version": "0.0.146",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "@trackunit/css-core": "0.0.51",
-    "@trackunit/tailwind-styled-components": "0.0.44",
+    "@trackunit/tailwind-styled-components": "0.0.45",
     "react": "17.0.2",
     "@trackunit/ui-design-tokens": "0.0.43",
     "echarts-for-react": "^3.0.2",