@nulogy/components 14.8.2 → 15.0.1

package/dist/src/theme/theme.type.d.ts

@@ -1,153 +1,153 @@
-import { RecursivePartial } from "../utils/ts/recursivePartial";
-interface Colors {
-    black: string;
-    blackBlue: string;
-    darkBlue: string;
-    blue: string;
-    lightBlue: string;
-    darkGrey: string;
-    midGrey: string;
-    grey: string;
-    lightGrey: string;
-    whiteGrey: string;
-    white: string;
-    yellow: string;
-    lightYellow: string;
-    green: string;
-    lightGreen: string;
-    red: string;
-    lightRed: string;
-    categorical1: string;
-    categorical2: string;
-    categorical3: string;
-    categorical4: string;
-    categorical5: string;
-    categorical6: string;
-}
-interface FontSizes {
-    smaller: string;
-    small: string;
-    medium: string;
-    base: string;
-    large: string;
-    larger: string;
-    largest: string;
-    heading1: string;
-    heading2: string;
-    heading3: string;
-    heading4: string;
-    xxs: string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    xxl: string;
-}
-interface LineHeights {
-    base: string;
-    baseRelaxed: string;
-    smallTextBase: string;
-    smallRelaxed: string;
-    smallTextCompressed: string;
-    smallerText: string;
-    smallerRelaxed: string;
-    heading1: string;
-    heading2: string;
-    heading3: string;
-    heading4: string;
-    title: string;
-    sectionTitle: string;
-    subsectionTitle: string;
-}
-interface FontWeights {
-    light: number;
-    normal: number;
-    medium: number;
-    bold: number;
-}
-interface Space {
-    none: string;
-    half: string;
-    x0: string;
-    x0_25: string;
-    x0_5: string;
-    x0_75: string;
-    x1: string;
-    x1_25: string;
-    x1_5: string;
-    x1_75: string;
-    x2: string;
-    x2_5: string;
-    x3: string;
-    x4: string;
-    x5: string;
-    x6: string;
-    x7: string;
-    x8: string;
-    x9: string;
-    x10: string;
-    x11: string;
-    x12: string;
-}
-interface Fonts {
-    base: string;
-    mono: string;
-    sc: string;
-}
-type Borders = Array<any>;
-interface Shadows {
-    small: string;
-    medium: string;
-    large: string;
-    focus: string;
-    error: string;
-}
-interface Radii {
-    small: string;
-    medium: string;
-    large: string;
-    circle: string;
-    rounded: string;
-}
-export interface Breakpoints {
-    extraSmall: string;
-    small: string;
-    medium: string;
-    large: string;
-    extraLarge: string;
-    phonePortrait: string;
-    phoneLandscape: string;
-    tabletPortrait: string;
-    tabletLandscape: string;
-    laptop: string;
-    desktop: string;
-}
-interface ZIndices {
-    content: number;
-    tabsScollIndicator: number;
-    tabsBar: number;
-    overlay: number;
-    aboveOverlay: number;
-    tableHeader: number;
-    modalHeaderAndFooter: number;
-    openControl: number;
-    sidebar: number;
-    navBar: number;
-}
-export interface DefaultNDSThemeType {
-    colors: Colors;
-    fontSizes: FontSizes;
-    lineHeights: LineHeights;
-    fontWeights: FontWeights;
-    space: Space;
-    sizes: Space;
-    fonts: Fonts;
-    borders: Borders;
-    shadows: Shadows;
-    radii: Radii;
-    breakpoints: Breakpoints;
-    zIndices: ZIndices;
-}
-export type ThemeType = RecursivePartial<DefaultNDSThemeType>;
-export {};
+import { RecursivePartial } from "../utils/ts/recursivePartial";
+interface Colors {
+    black: string;
+    blackBlue: string;
+    darkBlue: string;
+    blue: string;
+    lightBlue: string;
+    darkGrey: string;
+    midGrey: string;
+    grey: string;
+    lightGrey: string;
+    whiteGrey: string;
+    white: string;
+    yellow: string;
+    lightYellow: string;
+    green: string;
+    lightGreen: string;
+    red: string;
+    lightRed: string;
+    categorical1: string;
+    categorical2: string;
+    categorical3: string;
+    categorical4: string;
+    categorical5: string;
+    categorical6: string;
+}
+interface FontSizes {
+    smaller: string;
+    small: string;
+    medium: string;
+    base: string;
+    large: string;
+    larger: string;
+    largest: string;
+    heading1: string;
+    heading2: string;
+    heading3: string;
+    heading4: string;
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+}
+interface LineHeights {
+    base: string;
+    baseRelaxed: string;
+    smallTextBase: string;
+    smallRelaxed: string;
+    smallTextCompressed: string;
+    smallerText: string;
+    smallerRelaxed: string;
+    heading1: string;
+    heading2: string;
+    heading3: string;
+    heading4: string;
+    title: string;
+    sectionTitle: string;
+    subsectionTitle: string;
+}
+interface FontWeights {
+    light: number;
+    normal: number;
+    medium: number;
+    bold: number;
+}
+interface Space {
+    none: string;
+    half: string;
+    x0: string;
+    x0_25: string;
+    x0_5: string;
+    x0_75: string;
+    x1: string;
+    x1_25: string;
+    x1_5: string;
+    x1_75: string;
+    x2: string;
+    x2_5: string;
+    x3: string;
+    x4: string;
+    x5: string;
+    x6: string;
+    x7: string;
+    x8: string;
+    x9: string;
+    x10: string;
+    x11: string;
+    x12: string;
+}
+interface Fonts {
+    base: string;
+    mono: string;
+    sc: string;
+}
+type Borders = Array<any>;
+interface Shadows {
+    small: string;
+    medium: string;
+    large: string;
+    focus: string;
+    error: string;
+}
+interface Radii {
+    small: string;
+    medium: string;
+    large: string;
+    circle: string;
+    rounded: string;
+}
+export interface Breakpoints {
+    extraSmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    extraLarge: string;
+    phonePortrait: string;
+    phoneLandscape: string;
+    tabletPortrait: string;
+    tabletLandscape: string;
+    laptop: string;
+    desktop: string;
+}
+interface ZIndices {
+    content: number;
+    tabsScollIndicator: number;
+    tabsBar: number;
+    overlay: number;
+    aboveOverlay: number;
+    tableHeader: number;
+    modalHeaderAndFooter: number;
+    openControl: number;
+    sidebar: number;
+    navBar: number;
+}
+export interface DefaultNDSThemeType {
+    colors: Colors;
+    fontSizes: FontSizes;
+    lineHeights: LineHeights;
+    fontWeights: FontWeights;
+    space: Space;
+    sizes: Space;
+    fonts: Fonts;
+    borders: Borders;
+    shadows: Shadows;
+    radii: Radii;
+    breakpoints: Breakpoints;
+    zIndices: ZIndices;
+}
+export type ThemeType = RecursivePartial<DefaultNDSThemeType>;
+export {};

package/dist/src/theme/theme.type.js

@@ -0,0 +1 @@
+export {};

package/dist/src/theme/useNDSTheme.d.ts

@@ -1,21 +1,21 @@
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { FeatureFlags } from "../NDSProvider/FeatureFlagsContext";
-import { DefaultNDSThemeType, ThemeType } from "./theme.type";
-type Breakpoints = DefaultNDSThemeType["breakpoints"];
-export declare const buildBreakPoints: (breakpointsConfig: Readonly<Breakpoints>) => {
-    map: <T>(fn: (value: string) => T) => T[];
-    extraSmall: string;
-    small: string;
-    medium: string;
-    large: string;
-    extraLarge: string;
-    phonePortrait: string;
-    phoneLandscape: string;
-    tabletPortrait: string;
-    tabletLandscape: string;
-    laptop: string;
-    desktop: string;
-};
-export declare const getThemeByVariant: (variant: ComponentVariant, isTabletSize: boolean, featureFlags: FeatureFlags) => DefaultNDSThemeType;
-export declare function useNDSTheme(variant?: ComponentVariant, customTheme?: ThemeType): DefaultNDSThemeType;
-export {};
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { FeatureFlags } from "../NDSProvider/FeatureFlagsContext";
+import { DefaultNDSThemeType, ThemeType } from "./theme.type";
+type Breakpoints = DefaultNDSThemeType["breakpoints"];
+export declare const buildBreakPoints: (breakpointsConfig: Readonly<Breakpoints>) => {
+    map: <T>(fn: (value: string) => T) => T[];
+    extraSmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    extraLarge: string;
+    phonePortrait: string;
+    phoneLandscape: string;
+    tabletPortrait: string;
+    tabletLandscape: string;
+    laptop: string;
+    desktop: string;
+};
+export declare const getThemeByVariant: (variant: ComponentVariant, isTabletSize: boolean, featureFlags: FeatureFlags) => DefaultNDSThemeType;
+export declare function useNDSTheme(variant?: ComponentVariant, customTheme?: ThemeType): DefaultNDSThemeType;
+export {};

package/dist/src/theme/useNDSTheme.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import useMediaQuery from "../hooks/useMediaQuery";
+import { useFeatureFlags } from "../NDSProvider/FeatureFlagsContext";
+import { mergeThemes } from "./mergeThemes.util";
+import { legacy, themes } from "./theme";
+const THEME_VARIANTS = new Set(["desktop", "touch"]);
+export const buildBreakPoints = (breakpointsConfig) => (Object.assign(Object.assign({}, breakpointsConfig), { map: function (fn) {
+        return Object.values(breakpointsConfig).map(fn);
+    } }));
+const validateVariantOrThrow = (variant) => {
+    if (!THEME_VARIANTS.has(variant)) {
+        throw new Error(`Invalid variant "${variant}" provided to NDSProvider. Valid variants are: ${Array.from(THEME_VARIANTS).join(", ")}.`);
+    }
+};
+export const getThemeByVariant = (variant, isTabletSize, featureFlags) => {
+    if (variant === "touch") {
+        return isTabletSize ? themes.tablet : themes.phone;
+    }
+    return featureFlags.experimentalDesktopTypographyScale ? themes.experimental : themes.legacy;
+};
+export function useNDSTheme(variant = "desktop", customTheme) {
+    validateVariantOrThrow(variant);
+    const { experimentalDesktopTypographyScale } = useFeatureFlags();
+    const [themeVariant, setThemeVariant] = useState(legacy);
+    const isTabletSize = useMediaQuery(`(min-width: ${legacy.breakpoints.small})`);
+    useEffect(() => {
+        const newTheme = getThemeByVariant(variant, isTabletSize, { experimentalDesktopTypographyScale });
+        setThemeVariant(newTheme);
+    }, [variant, isTabletSize, experimentalDesktopTypographyScale]);
+    const mergedTheme = mergeThemes(themeVariant, customTheme);
+    return Object.assign(Object.assign({}, mergedTheme), { breakpoints: buildBreakPoints(mergedTheme.breakpoints) });
+}

package/dist/src/types/NulogyApp.d.ts

@@ -1,3 +1,3 @@
-export type NulogyAppName = "production-scheduling" | "supplier-collaboration" | "digital-quality-inspection" | "shop-floor" | "smart-factory" | "connections" | "data";
-export declare const APP_ABBREVIATIONS: Record<NulogyAppName, string>;
-export declare const APP_DISPLAY_NAMES: Record<NulogyAppName, string>;
+export type NulogyAppName = "production-scheduling" | "supplier-collaboration" | "digital-quality-inspection" | "shop-floor" | "smart-factory" | "connections" | "data";
+export declare const APP_ABBREVIATIONS: Record<NulogyAppName, string>;
+export declare const APP_DISPLAY_NAMES: Record<NulogyAppName, string>;

package/dist/src/types/NulogyApp.js

@@ -0,0 +1,18 @@
+export const APP_ABBREVIATIONS = {
+    "production-scheduling": "PS",
+    "supplier-collaboration": "SC",
+    "digital-quality-inspection": "DQI",
+    "shop-floor": "SF",
+    "smart-factory": "SFac",
+    connections: "CN",
+    data: "Data",
+};
+export const APP_DISPLAY_NAMES = {
+    "production-scheduling": "Production Scheduling",
+    "supplier-collaboration": "Supplier Collaboration",
+    "digital-quality-inspection": "Digital Quality Inspection",
+    "shop-floor": "Shop Floor",
+    "smart-factory": "Smart Factory",
+    connections: "Connections",
+    data: "Data",
+};

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-declare const ClickInputLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
-    variant?: ComponentVariant;
-    disabled?: boolean;
-}>> & string;
-export default ClickInputLabel;
+/// <reference types="react" />
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+declare const ClickInputLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    variant?: ComponentVariant;
+    disabled?: boolean;
+}>> & string;
+export default ClickInputLabel;

package/dist/src/utils/ClickInputLabel.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+const ClickInputLabel = styled.label(({ disabled, theme }) => ({
+    cursor: disabled ? undefined : "pointer",
+    display: "inline-flex",
+    width: "auto",
+    minHeight: theme.space.x3,
+    userSelect: "none",
+    paddingTop: theme.space.x1,
+    paddingBottom: theme.space.x1,
+    paddingLeft: 0,
+    paddingRight: 0,
+}));
+export default ClickInputLabel;

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

@@ -0,0 +1,8 @@
+export default class DetectOutsideClick extends React.Component<any, any, any> {
+    constructor(props: any);
+    handleOutsideClick(e: any): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}
+import React from "react";

package/dist/src/utils/DetectOutsideClick.js

@@ -0,0 +1,36 @@
+import React from "react";
+export default class DetectOutsideClick extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    }
+    componentDidMount() {
+        document.addEventListener("click", this.handleOutsideClick);
+        document.addEventListener("touchstart", this.handleOutsideClick);
+    }
+    componentWillUnmount() {
+        document.removeEventListener("click", this.handleOutsideClick);
+        document.removeEventListener("touchstart", this.handleOutsideClick);
+    }
+    handleOutsideClick(e) {
+        const { onClick, clickRef } = this.props;
+        const clickRefs = Array.isArray(clickRef) ? clickRef : [clickRef];
+        if (clickRefs.every(clickedOutsideRef)) {
+            onClick(e);
+        }
+        function clickedOutsideRef(ref) {
+            if (ref) {
+                if (ref.contains) {
+                    return !ref.contains(e.target) && ref !== e.target;
+                }
+                if (ref.current) {
+                    return ref !== e.target && !ref.current.contains(e.target);
+                }
+            }
+        }
+    }
+    render() {
+        const { children } = this.props;
+        return React.createElement(React.Fragment, null, children);
+    }
+}

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

@@ -1,9 +1,9 @@
-import { PopperArrowProps as ReactPopperArrowProps } from "react-popper";
-import { PropsWithChildren } from "react";
-type PopperArrowProps = ReactPopperArrowProps & {
-    placement?: string;
-    borderColor?: string;
-    backgroundColor?: string;
-};
-declare const PopperArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PropsWithChildren<PopperArrowProps>>> & string;
-export default PopperArrow;
+import { PopperArrowProps as ReactPopperArrowProps } from "react-popper";
+import { PropsWithChildren } from "react";
+type PopperArrowProps = ReactPopperArrowProps & {
+    placement?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+};
+declare const PopperArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PropsWithChildren<PopperArrowProps>>> & string;
+export default PopperArrow;

package/dist/src/utils/PopperArrow.js

@@ -0,0 +1,132 @@
+import styled from "styled-components";
+const getThemeColor = (color, theme) => (theme.colors[color] ? theme.colors[color] : color);
+const positionArrow = (placement, theme) => {
+    const location = String(placement).split("-")[0];
+    switch (location) {
+        case "top":
+            return {
+                bottom: 0,
+                marginBottom: "-7px",
+                "&:before": {
+                    top: "2px",
+                    left: "-4px",
+                },
+                "&:after": {
+                    left: "-4px",
+                },
+            };
+        case "right":
+            return {
+                left: 0,
+                marginLeft: "-8px",
+                "&:before": {
+                    top: "-4px",
+                },
+                "&:after": {
+                    left: "2px",
+                    top: "-4px",
+                },
+            };
+        case "left":
+            return {
+                marginRight: "-8px",
+                right: 0,
+                "&:before": {
+                    top: "-4px",
+                },
+                "&:after": {
+                    left: "-2px",
+                    top: "-4px",
+                },
+            };
+        case "bottom":
+        default:
+            return {
+                marginTop: "-7px",
+                top: 0,
+                "&:before": {
+                    top: "-2px",
+                    left: "-4px",
+                },
+                "&:after": {
+                    left: "-4px",
+                },
+            };
+    }
+};
+const drawArrow = (placement, borderColor, backgroundColor, theme) => {
+    const location = String(placement).split("-")[0];
+    switch (location) {
+        case "top":
+            return {
+                "&:before": {
+                    borderColor: `${getThemeColor(borderColor, theme)} transparent transparent transparent`,
+                    borderWidth: "8px 8px 0 8px",
+                },
+                "&:after": {
+                    borderColor: `${getThemeColor(backgroundColor, theme)} transparent transparent transparent`,
+                    borderWidth: "8px 8px 0 8px",
+                },
+            };
+        case "right":
+            return {
+                "&:before": {
+                    borderColor: `transparent ${getThemeColor(borderColor, theme)} transparent transparent`,
+                    borderWidth: "8px 8px 8px 0",
+                },
+                "&:after": {
+                    borderColor: `transparent ${getThemeColor(backgroundColor, theme)} transparent transparent`,
+                    borderWidth: "8px 8px 8px 0",
+                },
+            };
+        case "left":
+            return {
+                "&:before": {
+                    borderColor: `transparent transparent transparent ${getThemeColor(borderColor, theme)}`,
+                    borderWidth: "8px 0 8px 8px",
+                },
+                "&:after": {
+                    borderColor: `transparent transparent transparent ${getThemeColor(backgroundColor, theme)}`,
+                    borderWidth: "8px 0 8px 8px",
+                },
+            };
+        case "bottom":
+        default:
+            return {
+                "&:before": {
+                    borderColor: `transparent transparent ${getThemeColor(borderColor, theme)} transparent`,
+                    borderWidth: "0 8px 8px 8px",
+                },
+                "&:after": {
+                    borderColor: `transparent transparent ${getThemeColor(backgroundColor, theme)} transparent`,
+                    borderWidth: "0 8px 8px 8px",
+                    left: "-4px",
+                },
+            };
+    }
+};
+const PopperArrow = styled.div(({ theme }) => ({
+    position: "absolute",
+    height: theme.space.x1,
+    width: theme.space.x1,
+    margin: "12px",
+    "&:before": {
+        borderStyle: "solid",
+        content: "''",
+        display: "block",
+        height: 0,
+        margin: "auto",
+        position: "absolute",
+        width: 0,
+    },
+    "&:after": {
+        borderStyle: "solid",
+        content: "''",
+        display: "block",
+        height: 0,
+        margin: "auto",
+        position: "absolute",
+        width: 0,
+    },
+}), ({ placement = "bottom", borderColor = "grey", backgroundColor = "white", theme }) => (Object.assign({}, drawArrow(placement, borderColor, backgroundColor, theme))), ({ placement = "bottom", theme }) => (Object.assign({}, positionArrow(placement, theme))));
+export default PopperArrow;

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

@@ -0,0 +1,16 @@
+export default ScrollIndicators;
+declare class ScrollIndicators extends React.Component<any, any, any> {
+    constructor();
+    state: {
+        scrollTop: number;
+    };
+    menuRef: React.RefObject<any>;
+    handleScroll(): void;
+    offsetHeight: any;
+    scrollHeight: any;
+    componentDidMount(): void;
+    contentHiddenBelow(): boolean;
+    contentHiddenAbove(): boolean;
+    render(): React.JSX.Element;
+}
+import React from "react";