@trackunit/react-components 0.1.24 → 0.1.26

package/index.js

@@ -705,7 +705,7 @@ const StyledHeading = tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), className: "self-start" }))] }) })));
+    return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), className: "!h-min" }))] }) })));
 };
 const Root$8 = twx(DensityContainer) `
   tu-card__header-density-container 
@@ -2200,6 +2200,7 @@ tu-select__counter
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
 const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
         return Object.assign({ ValueContainer: props => {
                 if (props.isMulti) {
@@ -2237,18 +2238,19 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
             }, LoadingIndicator: props => {
                 return jsx(Spinner, { size: "small", className: tws `mt-1.5 mr-1` });
             }, DropdownIndicator: props => {
-                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx(StyledIcon, { children: dropdownIcon ? (dropdownIcon) : menuIsOpen ? (jsx(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx(Icon, { name: "ChevronDownIcon", size: "medium" })) }) })));
+                const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx(Icon, { name: "ChevronDownIcon", size: "medium" }));
+                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx(StyledIcon, { children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
                 return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XIcon, Object.assign({ onClick: props.clearValue, "data-testid": `${dataTestId}-XIcon` }, { children: jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
             }, Control: props => {
-                return (jsx(components.Control, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onTouchEnd: () => null }), className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
+                return (jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
             }, SingleValue: props => {
                 return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__single-value--disabled` : "" }, { children: jsx("div", Object.assign({ "data-testid": dataTestId + "-singleValue" }, { children: props.children })) })));
             }, Menu: props => {
-                return (jsx(components.Menu, Object.assign({}, props, { className: menuIsOpen
+                return (jsx(components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
                         ? tws `tu-select__menu-list animate-fade-in-fast`
                         : tws `tu-select__menu-list animate-fade-out-fast` })));
             }, Option: props => {
@@ -2261,7 +2263,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 return (jsx(components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }) }, { children: props.isMulti ? (jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled, dataTestId: props.label }))) : (jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled || props.isDisabled, dataTestId: props.label }))) })));
             } }, componentsProps);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [componentsProps, disabled, menuIsOpen, refMenuIsEnabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
     return customComponents;
 };
 const StyledIcon = tw.div `
@@ -3009,7 +3011,7 @@ const GridArea = ({ area, dataTestId, className, children }) => (jsx("section",
  * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
  * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
-const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", gap = "auto", dataTestId, className, }) => (jsx(Layout$2, Object.assign({ "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$occupation": occupation, className: className }, { children: children })));
+const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", rowHeight = "1fr", gap = "auto", dataTestId, className, }) => (jsx(Layout$2, Object.assign({ "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$rowHeight": rowHeight, "$occupation": occupation, className: className }, { children: children })));
 const Layout$2 = tw.span `
   tu-layout-IntrinsicallyResponsiveGrid
   ${({ $occupation }) => {
@@ -3063,6 +3065,16 @@ const Layout$2 = tw.span `
             return tws `tu-gap-responsive`;
     }
 }};
+  
+  ${({ $rowHeight }) => {
+    switch ($rowHeight) {
+        case "auto":
+            return tws `tu-layout-IntrinsicallyResponsiveGrid--row-auto`;
+        case "1fr":
+        default:
+            return tws `tu-layout-IntrinsicallyResponsiveGrid--row-1fr`;
+    }
+}};
 `;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
 type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
+type RowHeight = "auto" | "1fr";
 type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
 type Occupation = "auto-fill" | "auto-fit";
 interface IntrinsicallyResponsiveGridProps extends CommonProps {
@@ -14,6 +15,7 @@ interface IntrinsicallyResponsiveGridProps extends CommonProps {
      */
     occupation?: Occupation;
     minColumnWidth?: ColumnWidth;
+    rowHeight?: RowHeight;
     /**
      * The gap size between children
      */
@@ -26,5 +28,5 @@ interface IntrinsicallyResponsiveGridProps extends CommonProps {
  * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
  * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
-export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
+export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, rowHeight, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
 export {};