@trackunit/react-components 0.1.85 → 0.1.87

package/index.cjs

@@ -1179,7 +1179,7 @@ const useDebounce = (value, delay = 500) => {
  * Get the device pixel ratio, potentially rounded and capped.
  * Will emit new values if it changes.
  *
- * @param {DevicePixelRatioOptions} options the options object
+ * @param {DevicePixelRatioOptions} options the options object
  * @returns { number } The current device pixel ratio, or the default if none can be resolved
  */
 function useDevicePixelRatio(options) {
@@ -1228,8 +1228,8 @@ function getDevicePixelRatio(options) {
 /**
  * The useLocalStorage hook works like useState, but saves to localstorage.
  *
- * @param {string} key - The key the values is saved under.
- * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
+ * @param {string} key - The key the values is saved under.
+ * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
  * @returns {string | null | undefined} value
  */
 const useLocalStorage = (key, initialValue) => {
@@ -1344,8 +1344,9 @@ const useTimeout = ({ onTimeout, duration }) => {
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {JSX.Element} MoreMenu component
  */
-const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPlacement, iconProps = {
+const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     size: "medium",
+    name: "EllipsisHorizontalIcon",
 }, iconButtonProps = {
     size: "small",
     circular: true,
@@ -1353,12 +1354,11 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     color: "tertiary",
 }, children, }) => {
     const [actionMenuIsOpen, setActionMenuIsOpen] = React.useState(false);
-    const dotsName = dotsDirection === "horizontal" ? "EllipsisHorizontalIcon" : "EllipsisVerticalIcon";
     const actionMenuRef = React.useRef(null);
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsxRuntime.jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+    return (jsxRuntime.jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsxRuntime.jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
                             setActionMenuIsOpen(!actionMenuIsOpen);
                         } })) }), jsxRuntime.jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };

package/index.js

@@ -1152,7 +1152,7 @@ const useDebounce = (value, delay = 500) => {
  * Get the device pixel ratio, potentially rounded and capped.
  * Will emit new values if it changes.
  *
- * @param {DevicePixelRatioOptions} options the options object
+ * @param {DevicePixelRatioOptions} options the options object
  * @returns { number } The current device pixel ratio, or the default if none can be resolved
  */
 function useDevicePixelRatio(options) {
@@ -1201,8 +1201,8 @@ function getDevicePixelRatio(options) {
 /**
  * The useLocalStorage hook works like useState, but saves to localstorage.
  *
- * @param {string} key - The key the values is saved under.
- * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
+ * @param {string} key - The key the values is saved under.
+ * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
  * @returns {string | null | undefined} value
  */
 const useLocalStorage = (key, initialValue) => {
@@ -1317,8 +1317,9 @@ const useTimeout = ({ onTimeout, duration }) => {
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {JSX.Element} MoreMenu component
  */
-const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPlacement, iconProps = {
+const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     size: "medium",
+    name: "EllipsisHorizontalIcon",
 }, iconButtonProps = {
     size: "small",
     circular: true,
@@ -1326,12 +1327,11 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     color: "tertiary",
 }, children, }) => {
     const [actionMenuIsOpen, setActionMenuIsOpen] = useState(false);
-    const dotsName = dotsDirection === "horizontal" ? "EllipsisHorizontalIcon" : "EllipsisVerticalIcon";
     const actionMenuRef = useRef(null);
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+    return (jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
                             setActionMenuIsOpen(!actionMenuIsOpen);
                         } })) }), jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };

package/package.json

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

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -3,13 +3,11 @@ import { CommonProps } from "../../../common/CommonProps";
 import { IconButtonProps } from "../../buttons";
 import { IconProps } from "../../Icon/Icon";
 import { PopoverContentChildren, PopoverPlacement } from "../../Popover";
-export type DotsDirection = "horizontal" | "vertical";
 export type MenuPlacement = "above" | "below";
-type FilteredIconProps = Omit<IconProps, "name">;
+type FilteredIconProps = Omit<IconProps, "onClick" | "name"> & Pick<Partial<IconProps>, "name">;
 type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
 export interface MoreMenuProps extends CommonProps {
     children: PopoverContentChildren;
-    dotsDirection?: DotsDirection;
     menuPlacement?: PopoverPlacement;
     iconProps?: FilteredIconProps;
     iconButtonProps?: FilteredIconButtonProps;
@@ -21,5 +19,5 @@ export interface MoreMenuProps extends CommonProps {
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {JSX.Element} MoreMenu component
  */
-export declare const MoreMenu: ({ className, dataTestId, dotsDirection, menuPlacement, iconProps, iconButtonProps, children, }: MoreMenuProps) => JSX.Element;
+export declare const MoreMenu: ({ className, dataTestId, menuPlacement, iconProps, iconButtonProps, children, }: MoreMenuProps) => JSX.Element;
 export {};

package/src/hooks/useDevicePixelRatio.d.ts

@@ -24,7 +24,7 @@ export interface DevicePixelRatioOptions {
  * Get the device pixel ratio, potentially rounded and capped.
  * Will emit new values if it changes.
  *
- * @param {DevicePixelRatioOptions} options the options object
+ * @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;

package/src/hooks/useLocalStorage.d.ts

@@ -2,8 +2,8 @@ import { Dispatch, SetStateAction } from "react";
 /**
  * The useLocalStorage hook works like useState, but saves to localstorage.
  *
- * @param {string} key - The key the values is saved under.
- * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
+ * @param {string} key - The key the values is saved under.
+ * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
  * @returns {string | null | undefined} value
  */
 export declare const useLocalStorage: <TValue = string | null | undefined>(key: string, initialValue?: TValue | undefined) => [TValue | null, Dispatch<SetStateAction<TValue | null>>, () => void];