@luscii-healthtech/web-ui 23.2.12 → 23.3.0

package/dist/components/FlyOutMenu/FlyOutMenu.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import * as FlyOutMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export declare function cn(...inputs: (string | boolean | undefined)[]): string;
+type OmitDisabled<T> = Omit<T, "disabled">;
+declare const FlyOutMenuRoot: (props: React.ComponentPropsWithoutRef<typeof FlyOutMenuPrimitive.Root>) => React.JSX.Element;
+/**
+ * The child of this component should accept a `ref` prop, otherwise
+ * the menu will not work correctly.
+ */
+declare const FlyOutMenuTrigger: React.ForwardRefExoticComponent<Omit<FlyOutMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const FlyOutMenuGroup: React.ForwardRefExoticComponent<FlyOutMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const FlyOutMenuPortal: React.FC<FlyOutMenuPrimitive.DropdownMenuPortalProps>;
+declare const FlyOutMenuContent: React.ForwardRefExoticComponent<Omit<FlyOutMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FlyOutMenuItem: React.ForwardRefExoticComponent<OmitDisabled<Omit<FlyOutMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    icon?: React.ReactNode;
+}> & React.RefAttributes<HTMLDivElement>>;
+declare const FlyOutMenuLabel: React.ForwardRefExoticComponent<Omit<FlyOutMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FlyOutMenuSeparator: React.ForwardRefExoticComponent<Omit<FlyOutMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ButtonItemProps = React.ComponentPropsWithoutRef<typeof FlyOutMenuItem> & {
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+};
+declare const FlyOutMenuButtonItem: (props: OmitDisabled<ButtonItemProps>) => React.JSX.Element;
+type SwitchItemProps = React.ComponentPropsWithoutRef<typeof FlyOutMenuPrimitive.CheckboxItem> & {
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+};
+declare const FlyOutMenuSwitchItem: React.ForwardRefExoticComponent<OmitDisabled<SwitchItemProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const FlyOutMenu: {
+    Root: typeof FlyOutMenuRoot;
+    Trigger: typeof FlyOutMenuTrigger;
+    Content: typeof FlyOutMenuContent;
+    Group: typeof FlyOutMenuGroup;
+    Label: typeof FlyOutMenuLabel;
+    Separator: typeof FlyOutMenuSeparator;
+    Portal: typeof FlyOutMenuPortal;
+    ButtonItem: typeof FlyOutMenuButtonItem;
+    SwitchItem: typeof FlyOutMenuSwitchItem;
+};
+export {};

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { default as Dropdown } from "./components/Dropdown/Dropdown";
 export { EmptyListMessage } from "./components/EmptyListMessage/EmptyListMessage";
 export { InfoField } from "./components/InfoField/InfoField";
 export { default as Input } from "./components/Input/Input";
+export { FlyOutMenu } from "./components/FlyOutMenu/FlyOutMenu";
 export { StyledInput } from "./components/Input/StyledInput";
 export { default as Line } from "./components/Line/Line";
 export { Table, type TableProps } from "./components/Table/Table";

package/dist/index.development.js

@@ -25,6 +25,8 @@ var fr = require('date-fns/locale/fr');
 var pt = require('date-fns/locale/pt');
 require('react-datepicker-v2/dist/react-datepicker.min.css');
 var omit = require('lodash.omit');
+var FlyOutMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var tailwindMerge = require('tailwind-merge');
 var ReactSelect = require('react-select');
 var groupBy = require('lodash/groupBy');
 var debounce = require('lodash.debounce');
@@ -66,6 +68,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var moment__default = /*#__PURE__*/_interopDefault(moment);
 var ReactDatePicker__default$1 = /*#__PURE__*/_interopDefault(ReactDatePicker$1);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
+var FlyOutMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(FlyOutMenuPrimitive);
 var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
@@ -3268,6 +3271,114 @@ const InfoField = (props) => {
   );
 };
 
+function cn(...inputs) {
+  return tailwindMerge.twMerge(classNames__default.default(inputs));
+}
+const FlyOutMenuRoot = (props) => React__namespace.createElement(FlyOutMenuPrimitive__namespace.Root, Object.assign({}, props));
+const FlyOutMenuTrigger = React__namespace.forwardRef((props, ref) => React__namespace.createElement(FlyOutMenuPrimitive__namespace.Trigger, Object.assign({ ref, asChild: true }, props)));
+const FlyOutMenuGroup = FlyOutMenuPrimitive__namespace.Group;
+const FlyOutMenuPortal = FlyOutMenuPrimitive__namespace.Portal;
+const FlyOutMenuContent = React__namespace.forwardRef((_a, ref) => {
+  var {
+    className,
+    /**
+     * "8px" is size "xxs" from the design system
+     */
+    sideOffset = 8,
+    align = "end"
+  } = _a, props = __rest(_a, ["className", "sideOffset", "align"]);
+  return React__namespace.createElement(
+    FlyOutMenuPrimitive__namespace.Portal,
+    null,
+    React__namespace.createElement(FlyOutMenuPrimitive__namespace.Content, Object.assign({ ref, align, sideOffset, className: cn("ui-z-50 ui-min-w-[8rem] ui-max-w-[30ch] ui-overflow-hidden ui-border-1 ui-border-color-border ui-bg-white ui-shadow-large ui-radius-m", "data-[state=open]:ui-animate-in data-[state=closed]:ui-animate-out data-[state=closed]:ui-fade-out-0 data-[state=open]:ui-fade-in-0 data-[state=closed]:ui-zoom-out-95 data-[state=open]:ui-zoom-in-95 data-[side=bottom]:ui-slide-in-from-top-2 data-[side=left]:ui-slide-in-from-right-2 data-[side=right]:ui-slide-in-from-left-2 data-[side=top]:ui-slide-in-from-bottom-2", className) }, props))
+  );
+});
+FlyOutMenuContent.displayName = FlyOutMenuPrimitive__namespace.Content.displayName;
+const FlyOutMenuItem = React__namespace.forwardRef((_a, ref) => {
+  var { className } = _a, props = __rest(_a, ["className"]);
+  return React__namespace.createElement(
+    FlyOutMenuPrimitive__namespace.Item,
+    Object.assign({ ref, className: cn("ui-gap-m", "ui-relative ui-flex ui-select-none ui-items-center ui-rounded-sm ui-text-sm ui-outline-none ui-transition-colors", "focus:text-accent-foreground focus:ui-bg-primary-background", className) }, props),
+    props.icon,
+    props.children
+  );
+});
+FlyOutMenuItem.displayName = FlyOutMenuPrimitive__namespace.Item.displayName;
+const FlyOutMenuLabel = React__namespace.forwardRef((_a, ref) => {
+  var { className } = _a, props = __rest(_a, ["className"]);
+  return React__namespace.createElement(
+    FlyOutMenuPrimitive__namespace.Label,
+    Object.assign({ ref, className: cn("ui-px-s ui-pb-xxs ui-pt-l", className) }, props),
+    React__namespace.createElement(Text, { variant: "strong" }, props.children)
+  );
+});
+FlyOutMenuLabel.displayName = FlyOutMenuPrimitive__namespace.Label.displayName;
+const FlyOutMenuSeparator = React__namespace.forwardRef((_a, ref) => {
+  var { className } = _a, props = __rest(_a, ["className"]);
+  return React__namespace.createElement(FlyOutMenuPrimitive__namespace.Separator, Object.assign({ ref, className: cn("ui-h-px ui-bg-color-divider", className) }, props));
+});
+FlyOutMenuSeparator.displayName = FlyOutMenuPrimitive__namespace.Separator.displayName;
+const ItemButton = (props) => {
+  const { children, icon } = props, rest = __rest(props, ["children", "icon"]);
+  return React__namespace.createElement(
+    "button",
+    Object.assign({}, rest, { className: "ui-flex ui-w-full ui-gap-s ui-p-s" }),
+    React__namespace.isValidElement(icon) ? React__namespace.cloneElement(icon, { className: "ui-flex-shrink-0" }) : null,
+    React__namespace.createElement(Text, { className: "ui-mt-[2px] ui-text-start" }, children)
+  );
+};
+const FlyOutMenuButtonItem = (props) => {
+  const { children, icon } = props, rest = __rest(props, ["children", "icon"]);
+  return React__namespace.createElement(
+    FlyOutMenuItem,
+    Object.assign({}, rest),
+    React__namespace.createElement(ItemButton, { icon }, children)
+  );
+};
+const FlyOutMenuSwitchItem = React__namespace.forwardRef((props, forwardedRef) => {
+  const { children, icon, onSelect } = props, rest = __rest(props, ["children", "icon", "onSelect"]);
+  return React__namespace.createElement(
+    FlyOutMenuPrimitive__namespace.CheckboxItem,
+    Object.assign({ ref: forwardedRef, className: "ui-outline-none focus:ui-bg-primary-background", onSelect: (event) => {
+      event.preventDefault();
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
+    } }, rest),
+    React__namespace.createElement(
+      "div",
+      { className: "ui-flex ui-w-full" },
+      React__namespace.createElement(
+        "label",
+        { className: "ui-inline-flex ui-w-full ui-cursor-pointer ui-p-s" },
+        React__namespace.isValidElement(icon) ? React__namespace.cloneElement(icon, { className: "ui-flex-shrink-0" }) : null,
+        React__namespace.createElement(
+          "div",
+          { className: "ui-inline-flex ui-w-full ui-flex-row-reverse ui-gap-m" },
+          React__namespace.createElement(
+            "div",
+            { className: "ui-peer ui-ml-auto" },
+            React__namespace.createElement("div", { className: classNames__default.default("ui-relative ui-h-6 ui-w-11 ui-rounded-full ui-transition-colors", "after:ui-absolute after:ui-start-[2px] after:ui-top-[2px] after:ui-h-5 after:ui-w-5 after:ui-rounded-full after:ui-border after:ui-border-slate-300 after:ui-bg-white after:ui-transition-all after:ui-content-['']", {
+              "ui-bg-primary-light after:ui-translate-x-full after:ui-border-white": props.checked === true,
+              "ui-bg-slate-300": !props.checked
+            }) })
+          ),
+          React__namespace.createElement(Text, { className: "ui-ml-3 ui-mt-[2px] ui-text-start" }, children)
+        )
+      )
+    )
+  );
+});
+const FlyOutMenu = {
+  Root: FlyOutMenuRoot,
+  Trigger: FlyOutMenuTrigger,
+  Content: FlyOutMenuContent,
+  Group: FlyOutMenuGroup,
+  Label: FlyOutMenuLabel,
+  Separator: FlyOutMenuSeparator,
+  Portal: FlyOutMenuPortal,
+  ButtonItem: FlyOutMenuButtonItem,
+  SwitchItem: FlyOutMenuSwitchItem
+};
+
 const Line = ({ left, right, className }) => /* @__PURE__ */ React__namespace.default.createElement(
   "div",
   {
@@ -5973,6 +6084,7 @@ exports.FirstAidKitIcon = FirstAidKitIcon;
 exports.FlagIcon = FlagIcon;
 exports.FlexColumn = FlexColumn;
 exports.FlexRow = FlexRow;
+exports.FlyOutMenu = FlyOutMenu;
 exports.ForwardIcon = ForwardIcon;
 exports.FullPageModal = FullPageModal;
 exports.GearColoredIcon = GearColoredIcon;