@woven-planet/lakefront 5.5.3 → 6.0.12

package/README.md

@@ -27,7 +27,7 @@ import { theme } from '@woven-planet/lakefront';
 ```
 
 ## Usage
-### ⚠️ <b>LakeFront requires the client application to use React 18 as well as Node 18.x. ⚠️ </b>
+### ⚠️ <b>LakeFront requires the client application to use React 18 and the Node version in the [package.json](./package.json) ⚠️ </b>
 
 
 Here is a quick example to get you started, **it's all you need**:
@@ -84,4 +84,5 @@ Please do not add information below this table, the 'npm run update-readme' will
  | [StepFunctionRenderer](https://woven-planet.github.io/lakefront/?path=/docs/lakefront-stepfunctionrenderer--step-function-renderer)        |  <details><summary>Screenshot</summary><img src="src/screenshots/StepFunctionRenderer.png"></details> | [Table](https://woven-planet.github.io/lakefront?path=/docs/lakefront-table--table)                                                                  | <details><summary>Screenshot</summary><img src="src/screenshots/Table.png"></details> |
  | [Tabs](https://woven-planet.github.io/lakefront?path=/docs/lakefront-tabs--tabs)                                                           | <details><summary>Screenshot</summary><img src="src/screenshots/Tabs.png"></details> | [TextArea](https://woven-planet.github.io/lakefront/?path=/docs/lakefront-textarea--placeholder)                                                     | <details><summary>Screenshot</summary><img src="src/screenshots/TextArea.png"></details> |
  | [Toggle](https://woven-planet.github.io/lakefront/?path=/docs/lakefront-toggle--toggle)                                                    | <details><summary>Screenshot</summary><img src="src/screenshots/Toggle.png"></details> | [TypeaheadSearch](https://woven-planet.github.io/lakefront/?path=/docs/lakefront-typeaheadsearch--search-bottom-start)                               |<details><summary>Screenshot</summary><img src="src/screenshots/TypeaheadSearch.png"></details> |
- | [ModeSelector](https://woven-planet.github.io/lakefront/?path=/docs/lakefront-modeselector--simple-mode-selector)                          | <details><summary>Screenshot</summary><img src="src/screenshots/ModeSelector.png"></details> |
+ | [ModeSelector](https://woven-planet.github.io/lakefront/?path=/docs/lakefront-modeselector--simple-mode-selector)                          | <details><summary>Screenshot</summary><img src="src/screenshots/ModeSelector.png"></details> | [Colors](https://woven-planet.github.io/lakefront/?path=/docs/lakefront-theme-colors--docs) | <details><summary>Screenshot</summary><img src="src/screenshots/Colors.png"></details> |
+[ContextMenu](https://woven-planet.github.io/lakefront/ContextMenu) | <details><summary>Screenshot</summary><img src="src/screenshots/ContextMenu.png"></details> |

package/dist/index.cjs.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import React from "react";
-import { ComponentPropsWithoutRef, FC, RefAttributes, ReactNode, ElementType, ReactElement, ChangeEvent, Dispatch, MouseEventHandler, SetStateAction, ComponentPropsWithRef, MouseEvent } from "react";
+import { ComponentPropsWithoutRef, FC, RefAttributes, ReactNode, ElementType, ReactElement, ChangeEvent, Dispatch, MouseEventHandler, SetStateAction, ComponentPropsWithRef, MouseEvent, ComponentProps } from "react";
 import { LinkProps } from "react-router-dom";
 import { GetStyles, GroupBase } from "react-select/dist/declarations/src/types";
 import { ParsedQuery } from "query-string";
+import { Theme } from "@emotion/react";
 import { Column } from "react-table";
 interface AnchorCopyProps {
     /**
@@ -387,6 +388,33 @@ interface CollapsibleProps {
  *
  */
 declare const Collapsible: FC<CollapsibleProps & Pick<ComponentPropsWithoutRef<"div">, Exclude<keyof ComponentPropsWithoutRef<"div">, keyof CollapsibleProps>>>;
+type ClickableMenuItem = {
+    key: string;
+    label: ReactNode;
+    onClick: () => void;
+    isSeparator?: false;
+    disabled?: boolean;
+};
+type SeparatorMenuItem = {
+    isSeparator: true;
+};
+type MenuItem = ClickableMenuItem | SeparatorMenuItem;
+interface ContextMenuProps {
+    /** The content that will trigger the context menu on right-click. */
+    children: ReactElement;
+    /** An array of menu item objects to be displayed. */
+    menuItems: MenuItem[];
+    /** The component or HTML tag to use as the wrapper. Defaults to 'div'. */
+    wrapper?: ElementType;
+    /**
+     * When true, the component will mount a div to the body and render the dialog through it.
+     * This is useful when the dialog would be inside a scrollable container or one with "overflow: hidden"
+     * so it doesn't get cut off. Uses IntersectionObserver and needs a polyfill if IE compatibility is needed. This
+     * defaults to `false`.
+     */
+    renderInPortal?: boolean;
+}
+declare const ContextMenu: FC<ContextMenuProps>;
 interface CopyButtonProps {
     /**
      * `Default = "Copy"` The text to display within the button.
@@ -458,6 +486,59 @@ interface DrawerProps {
  * Usage: Place this next to a flex container that has flex: 1
  */
 declare const Drawer: FC<DrawerProps>;
+declare const LAKEFRONT_COLORS: {
+    white: string;
+    akoya: string;
+    selago: string;
+    mercury: string;
+    alto: string;
+    bombay: string;
+    pavement: string;
+    dolphin: string;
+    gunpowder: string;
+    arsenic: string;
+    doveGrey: string;
+    grey30: string;
+    storm: string;
+    cinder: string;
+    black: string;
+    orange: string;
+    saturatedOrange: string;
+    gold: string;
+    yellow: string;
+    saturatedYellow: string;
+    red: string;
+    watermelon: string;
+    saturatedRed: string;
+    cranberry: string;
+    mediumPurple: string;
+    lavender: string;
+    saturatedLavender: string;
+    green: string;
+    pastelGreen: string;
+    saturatedGreen: string;
+    emerald: string;
+    saturatedTeal: string;
+    teal: string;
+    sinbad: string;
+    viking: string;
+    vista: string;
+    calmingBlue: string;
+    blue: string;
+    havelockBlue: string;
+    saturatedBlue: string;
+};
+declare const colors: typeof LAKEFRONT_COLORS;
+declare const _default: {
+    primary: string;
+    popover: string;
+};
+declare const borders: typeof _default;
+declare const zIndex: {
+    modal: number;
+    popover: number;
+    snackbar: number;
+};
 /**
  * JSONObject is a wrapper for a generic JSON object structure.
  */
@@ -478,6 +559,106 @@ interface TabDef {
     key: string;
     caption: string;
 }
+type ColorsType = typeof colors;
+type BordersType = typeof borders;
+type ZIndexType = typeof zIndex;
+interface LakefrontTheme {
+    colors: ColorsType;
+    borders: BordersType;
+    zIndex: ZIndexType;
+    DARKEN_MOST: number;
+    DARKEN_LEAST: number;
+    textColors: {
+        primary: string;
+        secondary: string;
+        h2: string;
+        h4: string;
+        error: string;
+        disabled: string;
+    };
+    backgroundColors: {
+        primary: string;
+        secondary: string;
+        third: string;
+        fourth: string;
+        fifth: string;
+        primaryWidget: string;
+        disabled: string;
+    };
+    borderColors: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+        inverted: string;
+    };
+    buttonColors: {
+        primary: string;
+        secondary: string;
+    };
+    shadowColors: {
+        boxShadow: string;
+    };
+    backgrounds: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        widget: string;
+        disabled: string;
+        inverted: string;
+        hover: string;
+    };
+    foregrounds: {
+        primary: string;
+        secondary: string;
+        error: string;
+        disabled: string;
+        info: string;
+        warning: string;
+        inverted: string;
+    };
+    lettering: {
+        primary: {
+            fontSize: number;
+            fontFamily: string;
+            fontWeight: number;
+        };
+        secondary: {
+            fontSize: number;
+            fontFamily: string;
+            fontWeight: number;
+        };
+        h1: {
+            fontSize: number;
+            fontFamily: string;
+            fontWeight: number;
+        };
+        h2: {
+            fontSize: number;
+            fontFamily: string;
+            fontWeight: number;
+        };
+        h3: {
+            fontSize: number;
+            fontFamily: string;
+            fontWeight: number;
+        };
+        h4: {
+            fontSize: number;
+            fontFamily: string;
+            fontWeight: number;
+        };
+        h5: {
+            fontSize: number;
+            fontFamily: string;
+            fontWeight: number;
+        };
+        h6: {
+            fontSize: number;
+            fontFamily: string;
+            fontWeight: number;
+        };
+    };
+}
 type MultiSelectOption = SelectOption<string>;
 interface SelectOption$0 {
     value: string | number | undefined;
@@ -2407,6 +2588,9 @@ interface TableSortByOptions {
     id: string;
     desc: boolean;
 }
+interface ContextMenuConfig {
+    getRowMenuItems: (row: any) => MenuItem[];
+}
 interface TableProps {
     /**
      * This is to set the data for the table.
@@ -2424,7 +2608,7 @@ interface TableProps {
     /**
      * This is to set the row properties.
      */
-    rowProps?: object;
+    rowProps?: ComponentProps<"tr">;
     /**
      * This is to set the display message when there is no data.
      */
@@ -2465,6 +2649,11 @@ interface TableProps {
      * This is defaulted to false.
      */
     hideHeaders?: boolean;
+    /**
+     * Configuration for the row-level context menu.
+     * If provided, a context menu will be enabled for each row.
+     */
+    contextMenuConfig?: ContextMenuConfig;
 }
 /**
  *  The Table Component is used to render table with specified columns and data.
@@ -2675,101 +2864,6 @@ interface TypeaheadSearchProps {
  * **result from the list, you'll need to spread in the props (as shown above).**
  */
 declare const TypeaheadSearch: FC<TypeaheadSearchProps & ComponentPropsWithoutRef<"input">>;
-declare const LAKEFRONT_COLORS: {
-    white: string;
-    akoya: string;
-    selago: string;
-    mercury: string;
-    pavement: string;
-    dolphin: string;
-    gunpowder: string;
-    storm: string;
-    cinder: string;
-    black: string;
-    grey30: string;
-    doveGrey: string;
-    bombay: string;
-    alto: string;
-    red: string;
-    watermelon: string;
-    orange: string;
-    yellow: string;
-    gold: string;
-    green: string;
-    pastelGreen: string;
-    emerald: string;
-    teal: string;
-    blue: string;
-    lavender: string;
-    havelockBlue: string;
-    calmingBlue: string;
-    sinbad: string;
-    cranberry: string;
-    viking: string;
-    mediumPurple: string;
-    vista: string;
-    saturatedRed: string;
-    saturatedOrange: string;
-    saturatedYellow: string;
-    saturatedBlue: string;
-    saturatedGreen: string;
-    saturatedLavender: string;
-    saturatedTeal: string;
-    arsenic: string;
-};
-declare const THEME: {
-    colors: {
-        white: string;
-        akoya: string;
-        selago: string;
-        mercury: string;
-        pavement: string;
-        dolphin: string;
-        gunpowder: string;
-        storm: string;
-        cinder: string;
-        black: string;
-        grey30: string;
-        doveGrey: string;
-        bombay: string;
-        alto: string;
-        red: string;
-        watermelon: string;
-        orange: string;
-        yellow: string;
-        gold: string;
-        green: string;
-        pastelGreen: string;
-        emerald: string;
-        teal: string;
-        blue: string;
-        lavender: string;
-        havelockBlue: string;
-        calmingBlue: string;
-        sinbad: string;
-        cranberry: string;
-        viking: string;
-        mediumPurple: string;
-        vista: string;
-        saturatedRed: string;
-        saturatedOrange: string;
-        saturatedYellow: string;
-        saturatedBlue: string;
-        saturatedGreen: string;
-        saturatedLavender: string;
-        saturatedTeal: string;
-        arsenic: string;
-    };
-    borders: {
-        primary: string;
-        popover: string;
-    };
-    zIndex: {
-        modal: number;
-        popover: number;
-        snackbar: number;
-    };
-    DARKEN_MOST: number;
-    DARKEN_LEAST: number;
-};
-export { AnchorCopy, AnchorCopyProps, BoundingBoxes, BoundingBoxesProps, BoundingBoxItemProp, BreadcrumbHeader, BreadcrumbProps, RouteProp, Breadcrumb, BreadcrumbHeaderProps, Button, ButtonProps$0 as ButtonProps, Card, CardProps, Checkbox, CheckboxProps, CheckboxGroup, CheckboxGroupProps, CheckboxGroupOption, Collapsible, CollapsibleProps, CopyButton, CopyButtonProps, Drawer, DrawerProps, Filter, getApiQueryUrl, getApiPostBody, parseInitialFilterValues, getCurrentBrowserQueryParams, getFilterBrowserQueryParams, FILTER_MODE_OPTIONS, USER_JSON_QUERY_PARAM, getDefaultValue, getDefaultJsonViewValue, getFilterAppliedCount, getUrlFromList, areSetsEqual, convertToFilterDropdownOptions, useFilter, FilterRenderProps, FilterPostBody, FilterModule, FilterSet, FilterValues, FilterHooks, FilterMap, FilterSectionHeaderProps, FilterMode, Location, UrlParameters, UpdateHistory, ContextSwitchMenuValue, ContextSwitchMenuProps, FilterBarProps, FilterJSONConfirmationModalProps, FilterJSONInputProps, FilterComponentProps, FilterContainerProps, AdditionalJSONFilterOptions, DoubleMultiSelectData, DoubleMultiSelectOptions, DoubleMultiSelectValues, DoubleMultiSelectFilterProps, DoubleMultiSelectFilterOptions, ListFilterOverrides, MultiSelectFilterProps, MultiSelectFilterOptions, RadioFilterProps, RadioFilterOptions, SingleSelectFilterProps, SingleSelectFilterOptions, TextFilterOverrides, AdditionalJSONFilter, DoubleMultiSelectFilter, ListFilter, MultiSelectFilter, RadioFilter, SingleSelectFilter, TextFilter, DurationFilter, MinMaxFilter, MinMaxInput, Header, IconButton, Input, InputProps, ItemGrid, ItemGridProps, ItemResults, ItemResultsProps, Loading, LoadingProps, MaskableImage, MaskableImageProps, ImageTagProps, Modal, ConfirmationModal, ConfirmationModalProps, ModalProps, ModeSelector, ModeSelectorProps, ModeSelectorLegendRowProps, Page, PageProps, PlaybackBar, PlaybackBarProps, HighlightsProp, usePopover, UsePopoverProps, PortalStyles, PopoverContent, ProgressBar, ProgressBarProps, CircularProgress, CircularProgressProps, DeviceProgressBar, DeviceProgressProps, DeviceProgressBarThreshold, PropertyList, Property, PropertyListProps, PropertyListVariable, RadioGroup, RadioGroupProps, RefreshToolbar, RefreshToolbarProps, Select, SelectProps, SELECT_OVERLAY_STYLES, SelectOverlayStyles, SelectPopover, SelectPopoverProps, SelectPopoverOption, Snackbar, SnackbarProps, MESSAGE_TYPES as SNACKBAR_MESSAGE_TYPES, SpeedInput, SpeedInputProps, SpeedInputVehicleSpeed, SpeedInputVehicleSpeedMode, StackBanner, StackBannerProps, StackBannerRow, StackBannerRowProps, StatusTable, StatusCard, StatusCardProps, StatusCellBadge, StatusCellBadgeProps, StatusRow, StatusRowProps, Status, StatusTableProps, StatusTableHeader, useStatusTable, StatusTableHooks, StatusTableOptions, filterData, getCompareFormat, mapTableFilters, sortData, SortOptions, sortByField, StepFunctionGraph, StepFunctionGraphProps, Table, TableProps, TableSortByOptions, Tabs, TabProps, TextArea, TextAreaProps, Toggle, ToggleProps, TransferList, ListItem, TransferListProps, TypeaheadSearch, TypeaheadSearchResultProps, TypeaheadSearchProps, TypeaheadResultItem, LAKEFRONT_COLORS as colors, THEME as theme, SelectOption, TabDef };
+declare const THEME: Theme;
+declare const DARK_THEME: Theme;
+export { AnchorCopy, AnchorCopyProps, BoundingBoxes, BoundingBoxesProps, BoundingBoxItemProp, BreadcrumbHeader, BreadcrumbProps, RouteProp, Breadcrumb, BreadcrumbHeaderProps, Button, ButtonProps$0 as ButtonProps, Card, CardProps, Checkbox, CheckboxProps, CheckboxGroup, CheckboxGroupProps, CheckboxGroupOption, Collapsible, CollapsibleProps, ContextMenu, MenuItem, CopyButton, CopyButtonProps, Drawer, DrawerProps, Filter, getApiQueryUrl, getApiPostBody, parseInitialFilterValues, getCurrentBrowserQueryParams, getFilterBrowserQueryParams, FILTER_MODE_OPTIONS, USER_JSON_QUERY_PARAM, getDefaultValue, getDefaultJsonViewValue, getFilterAppliedCount, getUrlFromList, areSetsEqual, convertToFilterDropdownOptions, useFilter, FilterRenderProps, FilterPostBody, FilterModule, FilterSet, FilterValues, FilterHooks, FilterMap, FilterSectionHeaderProps, FilterMode, Location, UrlParameters, UpdateHistory, ContextSwitchMenuValue, ContextSwitchMenuProps, FilterBarProps, FilterJSONConfirmationModalProps, FilterJSONInputProps, FilterComponentProps, FilterContainerProps, AdditionalJSONFilterOptions, DoubleMultiSelectData, DoubleMultiSelectOptions, DoubleMultiSelectValues, DoubleMultiSelectFilterProps, DoubleMultiSelectFilterOptions, ListFilterOverrides, MultiSelectFilterProps, MultiSelectFilterOptions, RadioFilterProps, RadioFilterOptions, SingleSelectFilterProps, SingleSelectFilterOptions, TextFilterOverrides, AdditionalJSONFilter, DoubleMultiSelectFilter, ListFilter, MultiSelectFilter, RadioFilter, SingleSelectFilter, TextFilter, DurationFilter, MinMaxFilter, MinMaxInput, Header, IconButton, Input, InputProps, ItemGrid, ItemGridProps, ItemResults, ItemResultsProps, Loading, LoadingProps, MaskableImage, MaskableImageProps, ImageTagProps, Modal, ConfirmationModal, ConfirmationModalProps, ModalProps, ModeSelector, ModeSelectorProps, ModeSelectorLegendRowProps, Page, PageProps, PlaybackBar, PlaybackBarProps, HighlightsProp, usePopover, UsePopoverProps, PortalStyles, PopoverContent, ProgressBar, ProgressBarProps, CircularProgress, CircularProgressProps, DeviceProgressBar, DeviceProgressProps, DeviceProgressBarThreshold, PropertyList, Property, PropertyListProps, PropertyListVariable, RadioGroup, RadioGroupProps, RefreshToolbar, RefreshToolbarProps, Select, SelectProps, SELECT_OVERLAY_STYLES, SelectOverlayStyles, SelectPopover, SelectPopoverProps, SelectPopoverOption, Snackbar, SnackbarProps, MESSAGE_TYPES as SNACKBAR_MESSAGE_TYPES, SpeedInput, SpeedInputProps, SpeedInputVehicleSpeed, SpeedInputVehicleSpeedMode, StackBanner, StackBannerProps, StackBannerRow, StackBannerRowProps, StatusTable, StatusCard, StatusCardProps, StatusCellBadge, StatusCellBadgeProps, StatusRow, StatusRowProps, Status, StatusTableProps, StatusTableHeader, useStatusTable, StatusTableHooks, StatusTableOptions, filterData, getCompareFormat, mapTableFilters, sortData, SortOptions, sortByField, StepFunctionGraph, StepFunctionGraphProps, Table, TableProps, TableSortByOptions, Tabs, TabProps, TextArea, TextAreaProps, Toggle, ToggleProps, TransferList, ListItem, TransferListProps, TypeaheadSearch, TypeaheadSearchResultProps, TypeaheadSearchProps, TypeaheadResultItem, LAKEFRONT_COLORS as colors, THEME as theme, DARK_THEME as darkTheme, SelectOption, TabDef, LakefrontTheme };