@trackunit/react-components 0.1.20 → 0.1.22

package/index.js

@@ -579,11 +579,11 @@ const StyledCard$2 = tw.div `
  * @param {ContainerProps} props - The props for the DensityContainer component
  * @returns {JSX.Element} DensityContainer component
  */
-const DensityContainer = ({ children, className, dataTestId, $density, $disableGap, $direction, }) => {
-    return (jsx(StyledDensityContainer$1, Object.assign({ "$disableGap": $disableGap, "$density": $density, "$direction": $direction, "data-testid": dataTestId, className: className }, { children: children })));
+const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
+    return (jsx(StyledDensityContainer$1, Object.assign({ "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className }, { children: children })));
 };
 const getDirection = () => ({ $direction }) => {
-    $direction = $direction ? $direction : "column";
+    $direction = $direction !== null && $direction !== void 0 ? $direction : "column";
     const directions = {
         row: tws `flex-row`,
         "row-reverse": tws `flex-row-reverse`,
@@ -628,7 +628,7 @@ ${DensityFinder}
  * @returns {JSX.Element} CardBody component
  */
 const CardBody = ({ density = "auto", overflow = "auto", children, dataTestId, className, disableGap, }) => {
-    return (jsx(StyledDensityContainer, Object.assign({ "$overflow": overflow, "$density": density, dataTestId: dataTestId, className: className, "$disableGap": disableGap }, { children: children })));
+    return (jsx(StyledDensityContainer, Object.assign({ "$overflow": overflow, density: density, dataTestId: dataTestId, className: className, disableGap: disableGap }, { children: children })));
 };
 const getOverflow = () => ({ $overflow }) => {
     if (!$overflow) {
@@ -656,14 +656,11 @@ const StyledDensityContainer = twx(DensityContainer) `
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsx(Container$7, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, "$density": density }, { children: jsx(Body, { children: children }) })));
+    return (jsx(Container$7, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
 };
 const Container$7 = twx(DensityContainer) `
   tu-card__footer-density-container
   ${p => p.$hideSeparator && tws `tu-card__footer-density-container--borderless`}
-`;
-const Body = tw.div `
-  tu-card__footer
 `;
 
 /**
@@ -708,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$1, { name: "XIcon", size: "small" }) }))] }) })));
+    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$1, { name: "XIcon", size: "small" }), className: "self-start" }))] }) })));
 };
 const Root$8 = twx(DensityContainer) `
   tu-card__header-density-container 
@@ -1485,25 +1482,13 @@ const Backdrop = tw.div `
  * - Modals interrupt a user's workflow by design.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
  */
-const Modal = React.forwardRef(({ isOpen, children, maxWidth = "full", dataTestId, className, onDismissClick = () => {
+const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, onDismissClick = () => {
     return;
 }, }, ref) => {
-    return (jsx(ModalBackdrop, Object.assign({ isVisible: isOpen, onClick: onDismissClick }, { children: isOpen && (jsx(StyledDiv, Object.assign({ ref: ref }, { children: jsx(StyledCard, Object.assign({ dataTestId: dataTestId, className: className, "$maxWidth": maxWidth }, { children: children })) }))) })));
+    return (jsx(ModalBackdrop, Object.assign({ isVisible: isOpen, onClick: onDismissClick }, { children: isOpen && (jsx(StyledDiv, Object.assign({ ref: ref }, { children: jsx(StyledCard, Object.assign({ dataTestId: dataTestId, className: className }, { children: children })) }))) })));
 });
-const getCardMaxWidth = ($maxWidth) => {
-    $maxWidth = $maxWidth ? $maxWidth : "full";
-    const widths = {
-        slim: tws `tu-modal__card--slim`,
-        narrow: tws `tu-modal__card--narrow`,
-        wide: tws `tu-modal__card--wide`,
-        normal: tws `tu-modal__card--normal`,
-        full: "",
-    };
-    return widths[$maxWidth];
-};
 const StyledCard = twx(Card) `
   tu-modal__card
-  ${({ $maxWidth }) => getCardMaxWidth($maxWidth)}
 `;
 const StyledDiv = tw.div `
   tu-modal__container
@@ -2805,6 +2790,57 @@ const useDebounce = (value, delay = 500) => {
     return debouncedValue;
 };
 
+// Copied from https://github.com/rexxars/use-device-pixel-ratio
+/**
+ * Get the device pixel ratio, potentially rounded and capped.
+ * Will emit new values if it changes.
+ *
+ * @param {DevicePixelRatioOptions} options the options object
+ * @returns { number } The current device pixel ratio, or the default if none can be resolved
+ */
+function useDevicePixelRatio(options) {
+    const dpr = getDevicePixelRatio(options);
+    const [currentDpr, setCurrentDpr] = useState(dpr);
+    const { defaultDpr, maxDpr, round } = options || {};
+    useEffect(() => {
+        const canListen = typeof window !== "undefined" && "matchMedia" in window;
+        if (!canListen) {
+            return;
+        }
+        const updateDpr = () => setCurrentDpr(getDevicePixelRatio({ defaultDpr, maxDpr, round }));
+        const mediaMatcher = window.matchMedia(`screen and (resolution: ${currentDpr}dppx)`);
+        // Safari 13.1 does not have `addEventListener`, but does have `addListener`
+        if (mediaMatcher.addEventListener) {
+            mediaMatcher.addEventListener("change", updateDpr);
+        }
+        else {
+            mediaMatcher.addListener(updateDpr);
+        }
+        return () => {
+            if (mediaMatcher.removeEventListener) {
+                mediaMatcher.removeEventListener("change", updateDpr);
+            }
+            else {
+                mediaMatcher.removeListener(updateDpr);
+            }
+        };
+    }, [currentDpr, defaultDpr, maxDpr, round]);
+    return currentDpr;
+}
+/**
+ * Returns the current device pixel ratio (DPR) given the passed options
+ *
+ * @param { DevicePixelRatioOptions } options the options object
+ * @returns { number } current device pixel ratio
+ */
+function getDevicePixelRatio(options) {
+    const { defaultDpr = 1, maxDpr = 3, round = true } = options || {};
+    const hasDprProp = typeof window !== "undefined" && typeof window.devicePixelRatio === "number";
+    const dpr = hasDprProp ? window.devicePixelRatio : defaultDpr;
+    const rounded = Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
+    return rounded;
+}
+
 /**
  * The useLocalStorage hook works like useState, but saves to localstorage.
  *
@@ -3071,4 +3107,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-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, Sidebar, 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 };
+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, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -23,6 +23,7 @@
     "react-router-dom": "6.4.5",
     "react-helmet-async": "1.3.0",
     "react-select": "5.7.0",
+    "react-dom": "18.2.0",
     "jest-canvas-mock": "2.4.0"
   },
   "module": "./index.js",

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

@@ -7,15 +7,15 @@ interface ContainerProps extends CommonProps {
      * "comfortable" = 16px gap and padding.
      * "spacious" = 16px gap, 26px padding.
      */
-    $density?: Density;
+    density?: Density;
     /**
      * Set gap to be 0px (not preferable)
      */
-    $disableGap?: boolean;
+    disableGap?: boolean;
     /**
      * The flex direction of the Card. Defaults to "column".
      */
-    $direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
     children?: React.ReactNode;
 }
 /**
@@ -26,5 +26,5 @@ interface ContainerProps extends CommonProps {
  * @param {ContainerProps} props - The props for the DensityContainer component
  * @returns {JSX.Element} DensityContainer component
  */
-export declare const DensityContainer: ({ children, className, dataTestId, $density, $disableGap, $direction, }: ContainerProps) => JSX.Element;
+export declare const DensityContainer: ({ children, className, dataTestId, density, disableGap, direction, }: ContainerProps) => JSX.Element;
 export {};

package/src/components/Modal/Modal.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-type ModalWidth = "slim" | "narrow" | "normal" | "wide" | "full";
 export interface ModalProps extends CommonProps {
     /**
      * Whether modal is open or not.
@@ -18,10 +17,6 @@ export interface ModalProps extends CommonProps {
      * Test id to be applied to the modal.
      */
     dataTestId?: string;
-    /**
-     * Maximum width of the modal.
-     */
-    maxWidth?: ModalWidth;
 }
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
@@ -29,4 +24,3 @@ export interface ModalProps extends CommonProps {
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
  */
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useDebounce";
+export * from "./useDevicePixelRatio";
 export * from "./useLocalStorage";
 export * from "./useTimeout";

package/src/hooks/useDevicePixelRatio.d.ts

@@ -0,0 +1,37 @@
+export interface DevicePixelRatioOptions {
+    /**
+     * Default DPR to use if browser does not support the `devicePixelRatio`
+     * property, or when rendering on server
+     *
+     * @default `1`
+     * @returns DPR
+     */
+    defaultDpr?: number;
+    /**
+     * Whether or not to round the number down to the closest integer
+     *
+     * @default `true`
+     */
+    round?: boolean;
+    /**
+     * Maximum DPR to return (set to `2` to only generate 1 and 2)
+     *
+     * @default `3`
+     */
+    maxDpr?: number;
+}
+/**
+ * Get the device pixel ratio, potentially rounded and capped.
+ * Will emit new values if it changes.
+ *
+ * @param {DevicePixelRatioOptions} options the options object
+ * @returns { number } The current device pixel ratio, or the default if none can be resolved
+ */
+export declare function useDevicePixelRatio(options?: DevicePixelRatioOptions): number;
+/**
+ * Returns the current device pixel ratio (DPR) given the passed options
+ *
+ * @param { DevicePixelRatioOptions } options the options object
+ * @returns { number } current device pixel ratio
+ */
+export declare function getDevicePixelRatio(options?: DevicePixelRatioOptions): number;