@uipath/apollo-react 4.59.3 → 4.61.0

package/dist/material/components/ap-model-picker/primitives/FolderSwitcher.js

@@ -0,0 +1,181 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import AppsRounded from "@mui/icons-material/AppsRounded";
+import FolderOutlined from "@mui/icons-material/FolderOutlined";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Divider from "@mui/material/Divider";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+import { BorderRadiusL, BorderRadiusM, Colors, IconXs, PadM, PadS, PadXl, PadXs, ShadowMenuElevation, SpacingXs } from "@uipath/apollo-core";
+import react from "react";
+import { useSafeLingui } from "../../../../i18n/index.js";
+const FolderSwitcher = ({ folders, value, onChange, allFoldersLabel, showAllFolders = true })=>{
+    const { _ } = useSafeLingui();
+    const resolvedAllFoldersLabel = allFoldersLabel ?? _({
+        id: 'modelPicker.folderSwitcher.allFolders',
+        message: 'All folders'
+    });
+    const [anchorEl, setAnchorEl] = react.useState(null);
+    const open = !!anchorEl;
+    const current = folders.find((f)=>f.id === value);
+    const isAll = null == value;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(ButtonBase, {
+                onClick: (e)=>setAnchorEl(open ? null : e.currentTarget),
+                focusRipple: true,
+                "aria-haspopup": "menu",
+                "aria-expanded": open,
+                sx: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: PadM,
+                    fontSize: 'var(--font-s-bold-size, 12px)',
+                    fontWeight: 'var(--font-s-bold-weight, 600)',
+                    lineHeight: 'var(--font-s-bold-line-height, 16px)',
+                    color: `var(--color-primary, ${Colors.ColorBlue500})`,
+                    backgroundColor: `var(--color-background-raised, ${Colors.ColorWhite})`,
+                    border: '1px solid',
+                    borderColor: `var(--color-border-de-emp, ${Colors.ColorGray300})`,
+                    borderRadius: `var(--border-radius-l, ${BorderRadiusL})`,
+                    px: PadXl,
+                    py: PadM,
+                    '&:hover': {
+                        backgroundColor: `var(--color-background-hover, ${Colors.ColorBackgroundHoverLight})`
+                    }
+                },
+                children: [
+                    isAll ? /*#__PURE__*/ jsx(AppsRounded, {
+                        sx: {
+                            fontSize: IconXs,
+                            color: 'inherit'
+                        }
+                    }) : /*#__PURE__*/ jsx(FolderOutlined, {
+                        sx: {
+                            fontSize: IconXs,
+                            color: 'inherit'
+                        }
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        component: "span",
+                        sx: {
+                            whiteSpace: 'nowrap'
+                        },
+                        children: isAll ? resolvedAllFoldersLabel : current?.label ?? resolvedAllFoldersLabel
+                    }),
+                    /*#__PURE__*/ jsx(KeyboardArrowDown, {
+                        sx: {
+                            fontSize: IconXs,
+                            color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
+                            transition: 'transform 150ms',
+                            transform: open ? 'rotate(180deg)' : 'rotate(0)'
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Popper, {
+                anchorEl: anchorEl,
+                open: open,
+                placement: "bottom-start",
+                disablePortal: true,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [
+                                0,
+                                4
+                            ]
+                        }
+                    }
+                ],
+                style: {
+                    zIndex: 10
+                },
+                children: /*#__PURE__*/ jsx(ClickAwayListener, {
+                    onClickAway: ()=>setAnchorEl(null),
+                    children: /*#__PURE__*/ jsx(Paper, {
+                        elevation: 8,
+                        sx: {
+                            minWidth: 200,
+                            borderRadius: `var(--border-radius-l, ${BorderRadiusL})`,
+                            border: '1px solid',
+                            borderColor: `var(--color-border-de-emp, ${Colors.ColorGray300})`,
+                            backgroundColor: `var(--color-background-raised, ${Colors.ColorWhite})`,
+                            boxShadow: `var(--shadow-menu-elevation, ${ShadowMenuElevation})`
+                        },
+                        children: /*#__PURE__*/ jsxs(MenuList, {
+                            dense: true,
+                            disablePadding: true,
+                            sx: {
+                                p: PadS
+                            },
+                            children: [
+                                showAllFolders && /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(MenuItem, {
+                                            selected: isAll,
+                                            onClick: ()=>{
+                                                onChange(null);
+                                                setAnchorEl(null);
+                                            },
+                                            sx: {
+                                                fontSize: 'var(--font-s-size, 12px)',
+                                                gap: SpacingXs,
+                                                py: PadM,
+                                                borderRadius: `var(--border-radius-m, ${BorderRadiusM})`,
+                                                color: `var(--color-foreground, ${Colors.ColorGray850})`
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ jsx(AppsRounded, {
+                                                    sx: {
+                                                        fontSize: IconXs,
+                                                        color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`
+                                                    }
+                                                }),
+                                                resolvedAllFoldersLabel
+                                            ]
+                                        }, "__all"),
+                                        /*#__PURE__*/ jsx(Divider, {
+                                            sx: {
+                                                my: PadXs
+                                            }
+                                        })
+                                    ]
+                                }),
+                                folders.map((f)=>/*#__PURE__*/ jsxs(MenuItem, {
+                                        selected: value === f.id,
+                                        onClick: ()=>{
+                                            onChange(f.id);
+                                            setAnchorEl(null);
+                                        },
+                                        sx: {
+                                            fontSize: 'var(--font-s-size, 12px)',
+                                            gap: SpacingXs,
+                                            py: PadM,
+                                            borderRadius: `var(--border-radius-m, ${BorderRadiusM})`,
+                                            color: `var(--color-foreground, ${Colors.ColorGray850})`
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ jsx(FolderOutlined, {
+                                                sx: {
+                                                    fontSize: IconXs,
+                                                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`
+                                                }
+                                            }),
+                                            f.label
+                                        ]
+                                    }, f.id))
+                            ]
+                        })
+                    })
+                })
+            })
+        ]
+    });
+};
+export { FolderSwitcher };

package/dist/material/components/ap-model-picker/primitives/GroupHeader.cjs

@@ -0,0 +1,139 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    GroupHeader: ()=>GroupHeader
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const KeyboardArrowRight_namespaceObject = require("@mui/icons-material/KeyboardArrowRight");
+var KeyboardArrowRight_default = /*#__PURE__*/ __webpack_require__.n(KeyboardArrowRight_namespaceObject);
+const Box_namespaceObject = require("@mui/material/Box");
+var Box_default = /*#__PURE__*/ __webpack_require__.n(Box_namespaceObject);
+const ButtonBase_namespaceObject = require("@mui/material/ButtonBase");
+var ButtonBase_default = /*#__PURE__*/ __webpack_require__.n(ButtonBase_namespaceObject);
+const Typography_namespaceObject = require("@mui/material/Typography");
+var Typography_default = /*#__PURE__*/ __webpack_require__.n(Typography_namespaceObject);
+const apollo_core_namespaceObject = require("@uipath/apollo-core");
+const GroupHeader = ({ label, hint, count, countLabel, dense, isFirst, leadingIcon, collapsible, collapsed, onToggle, 'data-testid': dataTestId })=>{
+    const resolvedCountLabel = countLabel ?? (null != count ? `${count} ${1 === count ? 'model' : 'models'}` : null);
+    const content = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            leadingIcon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box_default(), {
+                "aria-hidden": true,
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    color: `var(--color-foreground-de-emp, ${apollo_core_namespaceObject.Colors.ColorGray550})`,
+                    mr: 0.25
+                },
+                children: leadingIcon
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Typography_default(), {
+                variant: "overline",
+                sx: {
+                    fontSize: dense ? 9 : 11,
+                    fontWeight: 700,
+                    color: `var(--color-foreground-de-emp, ${apollo_core_namespaceObject.Colors.ColorGray550})`,
+                    letterSpacing: 0.7,
+                    lineHeight: 1.2,
+                    display: 'block',
+                    flex: '1 1 auto'
+                },
+                children: label
+            }),
+            null != resolvedCountLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Typography_default(), {
+                variant: "caption",
+                sx: {
+                    color: `var(--color-foreground-disable, ${apollo_core_namespaceObject.Colors.ColorGray500})`,
+                    fontSize: dense ? 10 : 11,
+                    fontWeight: 400,
+                    flexShrink: 0
+                },
+                children: resolvedCountLabel
+            }),
+            collapsible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(KeyboardArrowRight_default(), {
+                "aria-hidden": true,
+                sx: {
+                    fontSize: 18,
+                    color: `var(--color-foreground-de-emp, ${apollo_core_namespaceObject.Colors.ColorGray550})`,
+                    transition: 'transform 150ms',
+                    transform: collapsed ? 'rotate(0deg)' : 'rotate(90deg)',
+                    flexShrink: 0
+                }
+            })
+        ]
+    });
+    const baseSx = {
+        width: '100%',
+        px: dense ? 1.5 : 1.75,
+        pt: isFirst ? dense ? 0.75 : 1.5 : dense ? 1.25 : 1.75,
+        pb: dense ? 0.5 : 0.875,
+        backgroundColor: `var(--color-background-secondary, ${apollo_core_namespaceObject.Colors.ColorGray150})`,
+        borderTop: isFirst ? 'none' : `1px solid var(--color-border-grid, ${apollo_core_namespaceObject.Colors.ColorGray150})`,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        textAlign: 'left'
+    };
+    if (collapsible) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ButtonBase_default(), {
+        component: "div",
+        role: "button",
+        title: hint,
+        "data-testid": dataTestId,
+        onClick: onToggle,
+        "aria-expanded": !collapsed,
+        sx: {
+            ...baseSx,
+            cursor: 'pointer',
+            '&:hover': {
+                backgroundColor: "var(--color-background-hover, rgba(82, 96, 105, 0.078))"
+            }
+        },
+        children: content
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box_default(), {
+        title: hint,
+        role: "presentation",
+        "data-testid": dataTestId,
+        sx: baseSx,
+        children: content
+    });
+};
+exports.GroupHeader = __webpack_exports__.GroupHeader;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "GroupHeader"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/material/components/ap-model-picker/primitives/GroupHeader.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+export interface GroupHeaderProps {
+    label: string;
+    hint?: string;
+    count?: number;
+    countLabel?: string;
+    dense?: boolean;
+    isFirst?: boolean;
+    leadingIcon?: React.ReactNode;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    onToggle?: () => void;
+    'data-testid'?: string;
+}
+export declare const GroupHeader: React.FC<GroupHeaderProps>;
+//# sourceMappingURL=GroupHeader.d.ts.map

package/dist/material/components/ap-model-picker/primitives/GroupHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeader.d.ts","sourceRoot":"","sources":["../../../../../src/material/components/ap-model-picker/primitives/GroupHeader.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IAKd,IAAI,CAAC,EAAE,MAAM,CAAC;IAKd,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAM9B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAiBD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgHlD,CAAC"}

package/dist/material/components/ap-model-picker/primitives/GroupHeader.js

@@ -0,0 +1,92 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import Typography from "@mui/material/Typography";
+import { Colors } from "@uipath/apollo-core";
+const GroupHeader = ({ label, hint, count, countLabel, dense, isFirst, leadingIcon, collapsible, collapsed, onToggle, 'data-testid': dataTestId })=>{
+    const resolvedCountLabel = countLabel ?? (null != count ? `${count} ${1 === count ? 'model' : 'models'}` : null);
+    const content = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            leadingIcon && /*#__PURE__*/ jsx(Box, {
+                "aria-hidden": true,
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
+                    mr: 0.25
+                },
+                children: leadingIcon
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "overline",
+                sx: {
+                    fontSize: dense ? 9 : 11,
+                    fontWeight: 700,
+                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
+                    letterSpacing: 0.7,
+                    lineHeight: 1.2,
+                    display: 'block',
+                    flex: '1 1 auto'
+                },
+                children: label
+            }),
+            null != resolvedCountLabel && /*#__PURE__*/ jsx(Typography, {
+                variant: "caption",
+                sx: {
+                    color: `var(--color-foreground-disable, ${Colors.ColorGray500})`,
+                    fontSize: dense ? 10 : 11,
+                    fontWeight: 400,
+                    flexShrink: 0
+                },
+                children: resolvedCountLabel
+            }),
+            collapsible && /*#__PURE__*/ jsx(KeyboardArrowRight, {
+                "aria-hidden": true,
+                sx: {
+                    fontSize: 18,
+                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
+                    transition: 'transform 150ms',
+                    transform: collapsed ? 'rotate(0deg)' : 'rotate(90deg)',
+                    flexShrink: 0
+                }
+            })
+        ]
+    });
+    const baseSx = {
+        width: '100%',
+        px: dense ? 1.5 : 1.75,
+        pt: isFirst ? dense ? 0.75 : 1.5 : dense ? 1.25 : 1.75,
+        pb: dense ? 0.5 : 0.875,
+        backgroundColor: `var(--color-background-secondary, ${Colors.ColorGray150})`,
+        borderTop: isFirst ? 'none' : `1px solid var(--color-border-grid, ${Colors.ColorGray150})`,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        textAlign: 'left'
+    };
+    if (collapsible) return /*#__PURE__*/ jsx(ButtonBase, {
+        component: "div",
+        role: "button",
+        title: hint,
+        "data-testid": dataTestId,
+        onClick: onToggle,
+        "aria-expanded": !collapsed,
+        sx: {
+            ...baseSx,
+            cursor: 'pointer',
+            '&:hover': {
+                backgroundColor: "var(--color-background-hover, rgba(82, 96, 105, 0.078))"
+            }
+        },
+        children: content
+    });
+    return /*#__PURE__*/ jsx(Box, {
+        title: hint,
+        role: "presentation",
+        "data-testid": dataTestId,
+        sx: baseSx,
+        children: content
+    });
+};
+export { GroupHeader };