@nulogy/components 15.4.1 → 16.0.0

package/dist/src/BottomSheet/BottomSheet.styled.js

@@ -44,7 +44,7 @@ const Sheet = styled(motion(ReachDialogContent)).withConfig({
     background: "white",
     boxShadow: theme.shadows.large,
 }), compose(...styleFns));
-const ContentContainer = styled.div((_) => ({
+const ContentContainer = styled.div(() => ({
     overflowY: "auto",
     flex: 1,
     WebkitOverflowScrolling: "touch",

package/dist/src/BrandedNavBar/MenuTrigger.js

@@ -17,9 +17,7 @@ const MenuTrigger = ({ menuData, name, color, hoverColor, hoverBackground, "aria
         name,
         "aria-label": ariaLabel,
     };
-    return (
-    // @ts-ignore
-    React.createElement(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
+    return (React.createElement(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
             flip: { behavior: ["bottom"] },
             setPopperWidth: {
                 enabled: true,

package/dist/src/BrandedNavBar/MobileMenu.d.ts

@@ -11,7 +11,7 @@ type MenuData = {
 type BaseMobileMenuProps = {
     menuData: MenuData;
     subtext?: string;
-    closeMenu?: Function;
+    closeMenu?: React.MouseEventHandler<HTMLElement>;
     themeColorObject?: ThemeColorObject;
     showNulogyLogo?: boolean;
 };

package/dist/src/BrandedNavBar/MobileMenu.js

@@ -16,7 +16,6 @@ const BrandingWrap = styled.div(({ theme }) => ({
     color: theme.colors.white,
     marginBottom: theme.space.x1,
 }));
-// eslint-disable-next-line no-mixed-operators
 const getPaddingLeft = (layer) => `${24 * layer + 24}px`;
 const getSharedStyles = (theme) => ({
     display: "flex",
@@ -67,7 +66,6 @@ const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
         href: menuItem.href,
         as: menuItem.as,
         to: menuItem.to,
-        // eslint-disable-next-line no-mixed-operators
         pl: layer === 0 ? getPaddingLeft(layer) : `${24 * layer + 20}px`,
         mb: "x1",
         target: menuItem.openInNew ? "_blank" : undefined,

package/dist/src/BrandedNavBar/NavBarDropdownMenu.js

@@ -4,7 +4,6 @@ import { DetectOutsideClick, withMenuState, PopperArrow } from "../utils";
 import DropdownMenuContainer from "../DropdownMenu/DropdownMenuContainer";
 class StatelessNavBarDropdownMenuClass extends React.Component {
 }
-/* eslint-disable react/destructuring-assignment */
 class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
     constructor(props) {
         super(props);
@@ -60,29 +59,33 @@ class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
                     this.setTriggerRef(node);
                 },
             })),
-            isOpen && (React.createElement(Popper, { placement: placement, modifiers: modifiers }, (popperProps) => (React.createElement(React.Fragment, null,
-                React.createElement(DropdownMenuContainer, { ...popperProps, placement: placement, showArrow: showArrow, ...this.menuEventHandlers(), ref: (node) => {
-                        if (typeof popperProps.ref === "function") {
-                            popperProps.ref(node);
-                        }
-                        this.setMenuRef(node);
-                    }, onMouseDown: (e) => {
-                        e.preventDefault();
-                        e.target.focus();
-                    }, ...dropdownMenuContainerEventHandlers({
-                        openMenu,
-                        closeMenu,
-                    }) },
-                    React.createElement(PopperArrow, { ...popperProps.arrowProps, placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" }),
-                    React.createElement(DetectOutsideClick, { onClick: this.handleOutsideClick, clickRef: [this.menuRef, this.triggerRef] }),
-                    childrenFnc({
-                        closeMenu,
-                        openMenu,
-                    }))))))));
+            isOpen && (React.createElement(Popper, { placement: placement, modifiers: modifiers }, (popperProps) => {
+                const { ref: popperRef, style, placement: popperPlacement } = popperProps;
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(DropdownMenuContainer, { dataPlacement: popperPlacement, style: style, placement: placement, showArrow: showArrow, ...this.menuEventHandlers(), ...{
+                            ref: (node) => {
+                                if (typeof popperRef === "function") {
+                                    popperRef(node);
+                                }
+                                this.setMenuRef(node);
+                            },
+                        }, onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.target.focus();
+                        }, ...dropdownMenuContainerEventHandlers({
+                            openMenu,
+                            closeMenu,
+                        }) },
+                        React.createElement(PopperArrow, { ...popperProps.arrowProps, placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" }),
+                        React.createElement(DetectOutsideClick, { onClick: this.handleOutsideClick, clickRef: [this.menuRef, this.triggerRef] }),
+                        childrenFnc({
+                            closeMenu,
+                            openMenu,
+                        }))));
+            }))));
     }
 }
-/* eslint-enable react/destructuring-assignment */
-// @ts-ignore
+// @ts-expect-error - defaultProps is not recognized on functional components in newer React types
 StatelessNavBarDropdownMenu.defaultProps = {
     showArrow: true,
     placement: "bottom-start",
@@ -91,7 +94,7 @@ StatelessNavBarDropdownMenu.defaultProps = {
     dropdownMenuContainerEventHandlers: () => { },
 };
 const NavBarDropdownMenu = withMenuState(StatelessNavBarDropdownMenu);
-// @ts-ignore
+// @ts-expect-error - defaultProps is not recognized on functional components in newer React types
 NavBarDropdownMenu.defaultProps = {
     showDelay: "0",
     hideDelay: "100",

package/dist/src/BrandedNavBar/SmallNavBar.js

@@ -47,7 +47,6 @@ const MenuIcon = ({ isOpen }) => {
     const title = isOpen ? t("close menu") : t("open menu");
     return React.createElement(Icon, { icon: icon, title: title });
 };
-/* eslint-disable react/destructuring-assignment */
 const SmallNavBarNoState = ({ menuData, menuState: { isOpen, toggleMenu, closeMenu }, subtext, environment, showNulogyLogo, breakpointLower = "small", themeColorObject, navBarHeight, logo, renderMenuButton, ...props }) => {
     const navRef = React.useRef(null);
     useEffect(() => {
@@ -74,7 +73,6 @@ const SmallNavBarNoState = ({ menuData, menuState: { isOpen, toggleMenu, closeMe
                         React.createElement(MenuIcon, { isOpen: isOpen })))))),
         isOpen && (React.createElement(MobileMenu, { themeColorObject: themeColorObject, subtext: subtext, menuData: menuData, closeMenu: closeMenu, showNulogyLogo: showNulogyLogo }))));
 };
-/* eslint-enable react/destructuring-assignment */
 const SmallNavBar = withMenuState(SmallNavBarNoState);
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default SmallNavBar;

package/dist/src/DropdownMenu/DropdownMenu.story.js

@@ -69,10 +69,14 @@ export const SetToDisabled = () => (React.createElement(DropdownMenu, { disabled
 SetToDisabled.story = {
     name: "Set to disabled",
 };
-export const WithConditionallyRenderedMenuItems = () => (React.createElement(DropdownMenu, null,
-    React.createElement(DropdownButton, { onClick: () => { } }, "Item A"),
-    false && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item B"),
-    true && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item C")));
+export const WithConditionallyRenderedMenuItems = () => {
+    const showItemB = false;
+    const showItemC = true;
+    return (React.createElement(DropdownMenu, null,
+        React.createElement(DropdownButton, { onClick: () => { } }, "Item A"),
+        showItemB && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item B"),
+        showItemC && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item C")));
+};
 export const WithRenderProps = () => (React.createElement(DropdownMenu, null, ({ closeMenu, openMenu }) => (React.createElement(React.Fragment, null,
     React.createElement(DropdownButton, { onClick: (e) => closeMenu(e) }, "Close menu"),
     React.createElement(DropdownButton, { onClick: (e) => openMenu(e) }, "Open menu")))));

package/dist/src/Navigation/components/shared/NavigationMenuItem.js

@@ -56,7 +56,11 @@ export const NavigationMenuSubList = styled(RadixNavigationMenu.List) `
     display: none;
   }
 `;
-const Button = React.forwardRef(({ onPointerEnter: _, onPointerLeave: __, onPointerMove: ___, ...props }, forwardedRef) => {
+const Button = React.forwardRef(({ onPointerEnter, onPointerLeave, onPointerMove, ...props }, forwardedRef) => {
+    // These props are intentionally ignored to prevent pointer events from interfering with keyboard navigation
+    void onPointerEnter;
+    void onPointerLeave;
+    void onPointerMove;
     return React.createElement("button", { ...props, ref: forwardedRef });
 });
 Button.displayName = "Button";

package/dist/src/Popper/Popper.js

@@ -89,7 +89,6 @@ const Popper = React.forwardRef(({ id, trigger, children, backgroundColor, borde
             },
         });
         return React.cloneElement(transformedElement, {
-            // eslint-disable-next-line react/no-array-index-key
             key: i,
         });
     });

package/dist/src/RangeContainer/RangeContainer.js

@@ -19,8 +19,6 @@ const RangeContainer = ({ startComponent, endComponent, errorMessages = [], labe
             React.createElement(Flex, { px: "half", alignItems: "flex-end", alignSelf: "flex-end" },
                 React.createElement(Text, { lineHeight: variant === "touch" ? "56px" : "38px" }, "-")),
             React.createElement(Flex, null, endComponent)),
-        errorMessages.map((errorMessage, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        React.createElement(InlineValidation, { key: i, errorMessage: errorMessage })))));
+        errorMessages.map((errorMessage, i) => (React.createElement(InlineValidation, { key: i, errorMessage: errorMessage })))));
 };
 export default RangeContainer;

package/dist/src/Tabs/Tabs.story.d.ts

@@ -52,4 +52,3 @@ export declare const WithContentLoadedOnSelection: {
         name: string;
     };
 };
-export declare const WithConditionallyRenderedTabs: () => React.JSX.Element;

package/dist/src/Tabs/Tabs.story.js

@@ -102,8 +102,3 @@ export const WithContentLoadedOnSelection = () => (React.createElement(Tabs, { r
 WithContentLoadedOnSelection.story = {
     name: "with content loaded on selection",
 };
-export const WithConditionallyRenderedTabs = () => (React.createElement(Tabs, null,
-    false && React.createElement(Tab, { label: "Hidden 2" }, "Hidden tab 1"),
-    true && React.createElement(Tab, { label: "Shown 1" }, "Shown tab 1"),
-    false && React.createElement(Tab, { label: "Hidden 2" }, "Hidden tab 2"),
-    true && React.createElement(Tab, { label: "Shown 2" }, "Shown tab 2")));

package/dist/src/TimeRange/TimeRange.d.ts

@@ -4,9 +4,13 @@ import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     variant?: ComponentVariant;
     timeFormat?: string;
-    onRangeChange?: Function;
-    onStartTimeChange?: Function;
-    onEndTimeChange?: Function;
+    onRangeChange?: (range: {
+        startTime?: string;
+        endTime?: string;
+        error?: string;
+    }) => void;
+    onStartTimeChange?: (label: string) => void;
+    onEndTimeChange?: (label: string) => void;
     ref?: React.MutableRefObject<unknown>;
     errorMessage?: string;
     defaultStartTime?: string;

package/dist/src/TimeRange/TimeRange.js

@@ -22,7 +22,7 @@ const TimeRange = forwardRef(({ timeFormat, onRangeChange, onStartTimeChange, on
             ...inputRef1,
             focus: () => {
                 if (inputRef1.current) {
-                    // @ts-ignore
+                    // @ts-expect-error - focus method exists on input elements but type may not be narrowed correctly
                     inputRef1.current.focus();
                 }
             },
@@ -31,7 +31,7 @@ const TimeRange = forwardRef(({ timeFormat, onRangeChange, onStartTimeChange, on
             ...inputRef2,
             focus: () => {
                 if (inputRef2.current) {
-                    // @ts-ignore
+                    // @ts-expect-error - focus method exists on input elements but type may not be narrowed correctly
                     inputRef2.current.focus();
                 }
             },

package/dist/src/Toast/Toast.js

@@ -73,9 +73,7 @@ export const Toast = ({ triggered = false, isCloseable = false, showDuration = T
     const handleCloseButtonClick = () => {
         hideToast(0);
     };
-    return (React.createElement(AnimatePresence, { initial: false }, visible && (React.createElement(AnimatedBox, { onMouseEnter: onMouseIn, 
-        /* @ts-ignore */
-        onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true, ...toastAnimationConfig },
+    return (React.createElement(AnimatePresence, { initial: false }, visible && (React.createElement(AnimatedBox, { onMouseEnter: onMouseIn, onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true, ...toastAnimationConfig },
         React.createElement(Alert, { minWidth: "200px", maxWidth: "600px", isCloseable: isCloseable, onClose: handleCloseButtonClick, controlled: true, ...props }, children)))));
 };
 export default Toast;

package/dist/src/Toast/Toast.story.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-// typescript turned off because of {toast.type} not being a string
 import React, { useState } from "react";
 import { Button, DangerButton, IconicButton, Modal, PrimaryButton, Flex, Toast } from "../index";
 export default {

package/dist/src/Toggle/Toggle.js

@@ -21,7 +21,6 @@ const Toggle = React.forwardRef(({ checked, variant, className, labelText, requi
         if (onClick) {
             console.warn("onClick is deprecated. Use onChange instead.");
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const _checked = checked ?? defaultToggled ?? toggled;
     const _onChange = useCallback((e) => {
@@ -36,7 +35,6 @@ const Toggle = React.forwardRef(({ checked, variant, className, labelText, requi
         if (_checked !== undefined && !(onChange || onClick)) {
             console.warn("onChange or onClick is required when checked is set.");
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (React.createElement(Field, { className: className, alignItems: "flex-start", py: "half", ...spaceProps },
         React.createElement(FieldLabel, { htmlFor: id, labelText: labelText, requirementText: requirementText, helpText: helpText, hint: hint, disabled: disabled, variant: componentVariant, "data-testid": dataTestId },

package/dist/src/i18n.js

@@ -1,5 +1,4 @@
 import i18n from "i18next";
-/* eslint-disable */
 import de_DE from "../locales/de_DE.json";
 import en_US from "../locales/en_US.json";
 import es_ES from "../locales/es_ES.json";
@@ -10,7 +9,6 @@ import pl_PL from "../locales/pl_PL.json";
 import pt_BR from "../locales/pt_BR.json";
 import ro_RO from "../locales/ro_RO.json";
 import zh_CN from "../locales/zh_CN.json";
-/* eslint-enable */
 const resources = {
     de_DE: {
         nds: de_DE,

package/dist/src/utils/PopperArrow.js

@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 const getThemeColor = (color, theme) => (theme.colors[color] ? theme.colors[color] : color);
-const positionArrow = (placement, theme) => {
+const positionArrow = (placement) => {
     const location = String(placement).split("-")[0];
     switch (location) {
         case "top":
@@ -130,7 +130,7 @@ const PopperArrow = styled.div(({ theme }) => ({
     },
 }), ({ placement = "bottom", borderColor = "grey", backgroundColor = "white", theme }) => ({
     ...drawArrow(placement, borderColor, backgroundColor, theme),
-}), ({ placement = "bottom", theme }) => ({
-    ...positionArrow(placement, theme),
+}), ({ placement = "bottom" }) => ({
+    ...positionArrow(placement),
 }));
 export default PopperArrow;

package/dist/src/utils/noop.js

@@ -2,6 +2,4 @@
  * No operation function that does nothing and returns nothing.
  * Useful as a default callback or placeholder.
  */
-export function noop() {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-}
+export function noop() { }

package/dist/src/utils/ts/FocusManager.d.ts

@@ -5,8 +5,8 @@ type Reference = {
 };
 type ChildrenHandlers = {
     focusedIndex: number;
-    handleArrowNavigation: Function;
-    setFocusedIndex: Function;
+    handleArrowNavigation: (e: React.KeyboardEvent) => void;
+    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
 };
 type FocusManagerProps = {
     refs?: Array<Reference>;

package/dist/src/utils/useScrollLock.js

@@ -75,7 +75,6 @@ export function useScrollLock(options = {}) {
         return () => {
             unlock();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [autoLock, lockTarget, widthReflow]);
     return { isLocked, lock, unlock };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "15.4.1",
+  "version": "16.0.0",
   "type": "module",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
@@ -21,7 +21,7 @@
     "warn:prepush": "echo \"Make sure you also run all the other CI steps before pushing by running 'pnpm ci'\"",
     "check": "pnpm warn:prepush && pnpm check:types && pnpm check:lint && pnpm check:format",
     "check:types": "tsc && cd cypress && tsc --noEmit",
-    "check:lint": "eslint --config ./.eslintrc .'*/**/*.{js,ts,tsx}'",
+    "check:lint": "eslint '**/*.{js,ts,jsx,tsx}'",
     "check:format": "prettier -c .",
     "fix": "pnpm fix:lint && pnpm fix:format",
     "fix:lint": "pnpm check:lint --fix",
@@ -70,6 +70,7 @@
   },
   "devDependencies": {
     "@apollo/client": "^3.11.8",
+    "@eslint/js": "^9.0.0",
     "@nulogy/eslint-config-nulogy": "^1.0.0",
     "@nulogy/icons": "^4.37.2",
     "@semantic-release/changelog": "^6.0.2",
@@ -95,8 +96,9 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.20",
     "@types/react-router-dom": "5.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^5.30.5",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "typescript-eslint": "^8.0.0",
     "@vitejs/plugin-react": "^4.7.0",
     "chromatic": "^13.3.3",
     "concurrently": "^9.2.0",
@@ -105,8 +107,12 @@
     "cypress-enter-plugin": "^1.0.1",
     "cypress-plugin-tab": "^1.0.1",
     "cypress-real-events": "^1.14.0",
-    "eslint": "6.8.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint": "^9.0.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-prettier": "^5.2.0",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.0.0",
     "graphql": "15.8.0",
     "http-server": "^14.0.0",
     "husky": "^9.1.7",