@overmap-ai/blocks 1.0.27 → 1.0.28

package/dist/constants.d.ts

@@ -1,2 +1,3 @@
 import { Size } from "./typings";
 export declare const SizeMapping: Record<Size, "1" | "2" | "3">;
+export declare const DEFAULT_ICON_SIZE = "15px";

package/dist/index.d.ts

@@ -3,8 +3,10 @@ export * from "./Breadcrumb";
 export * from "./Buttons";
 export * from "./ButtonGroup";
 export * from "./Dialogs";
+export * from "./DialogMenu";
 export * from "./Flex";
 export * from "./BaseMenuGroups";
+export * from "./CollapsibleTree";
 export * from "./ContextMenu";
 export * from "./ContextActionMenu";
 export * from "./ContextMultiSelectMenu";
@@ -13,6 +15,7 @@ export * from "./DropdownMenu";
 export * from "./DropdownItemMenu";
 export * from "./DropdownSelect";
 export * from "./DropdownMultiSelect";
+export * from "./DownloadButtonUtility";
 export * from "./HoverUtility";
 export * from "./Select";
 export * from "./MultiSelect";
@@ -31,11 +34,16 @@ export * from "./ToggleGroup";
 export * from "./Toolbar";
 export * from "./Toast";
 export * from "./Tooltip";
+export * from "./ToggleButton";
 export * from "./Text";
+export * from "./RiIcon";
 export * from "./Theme";
 export * from "./Separator";
 export * from "./OvermapErrorBoundary";
-export { useSeverityColor, useViewportSize, useKeyboardShortcut, useStopEventPropagation, useTextFilter, splitTextForEllipsisAndExpansion, } from "./utils.ts";
+export * from "./OvermapItem";
+export * from "./OvermapItemGroup";
+export * from "./OvermapInputItem";
+export { useSeverityColor, useViewportSize, useKeyboardShortcut, useStopEventPropagation, useTextFilter, splitTextForEllipsisAndExpansion, useSize, } from "./utils";
 export * from "./Checkbox";
 export * from "./Table";
 export * from "./Spinner";

package/dist/style.css

@@ -50,7 +50,7 @@
 }
 ._hoverSpin360Clockwise_r73gr_35:hover:not(:disabled) svg {
   transform: rotate(360deg) !important;
-}@keyframes _spin_isifr_9 {
+}@keyframes _spin_1oknc_9 {
   0% {
     transform: rotate(0deg);
   }
@@ -58,13 +58,13 @@
     transform: rotate(360deg);
   }
 }
-._spinner_isifr_9 {
+._spinner_1oknc_9 {
   width: 16px;
   height: 16px;
   border-radius: 9999px;
-  border: 2px solid white;
+  border: 2px solid var(--gray-12);
   border-bottom: 2px solid transparent;
-  animation: _spin_isifr_9 1s linear infinite;
+  animation: _spin_1oknc_9 1s linear infinite;
 }._merged_wdgxo_1 > .rt-BaseButton:not(:first-of-type):not(:last-of-type) {
   border-radius: 0;
 }
@@ -85,6 +85,88 @@
   border-bottom-left-radius: 0;
 }._separators_1f7v1_1 > *:not(:last-of-type) {
   border-bottom: 1px solid var(--gray-a6);
+}._OverlayContent_1nr9w_1 {
+  position: fixed;
+  inset: 0;
+}
+
+._OverlayOverlay_1nr9w_6 {
+  position: fixed;
+  inset: 0;
+}._DialogMenuItem_1ojd2_1 {
+  position: relative;
+  outline: none;
+  user-select: none;
+}
+._DialogMenuItem_1ojd2_1:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: transparent;
+  border-radius: var(--radius-2);
+}
+._DialogMenuItem_1ojd2_1:hover:after, ._DialogMenuItem_1ojd2_1:focus-within:after {
+  background-color: var(--gray-a3);
+}
+._DialogMenuItem_1ojd2_1:active:after {
+  background-color: var(--gray-a4);
+}._light_1u8fs_1 span {
+  color: var(--gray-a3);
+}
+._light_1u8fs_1 [role=separator] {
+  background-color: var(--gray-a3);
+}
+
+._bold_1u8fs_8 span {
+  color: var(--gray-a9);
+}
+._bold_1u8fs_8 [role=separator] {
+  background-color: var(--gray-a9);
+}
+
+._full_1u8fs_15 span {
+  color: var(--gray-a12);
+}
+._full_1u8fs_15 [role=separator] {
+  background-color: var(--gray-a12);
+}
+
+._Text_1u8fs_22 {
+  color: var(--gray-a6);
+}._OvermapInputItem_1jgzv_1 {
+  outline: none;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  font-size: inherit;
+}._DialogContentScrollArea_i3a60_1 {
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+  margin-right: calc(-1 * var(--space-3));
+}
+._DialogContentScrollArea_i3a60_1 > [data-orientation=vertical] {
+  right: calc(-1 * var(--scrollarea-scrollbar-size)) !important;
+}._DialogMenuWrapper_16hy0_1 {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  padding: var(--space-9) var(--space-3) var(--space-3) var(--space-3);
+}
+
+._DialogMenu_16hy0_1 {
+  pointer-events: all;
+  outline: none;
+  background: var(--color-background);
+  width: min(500px, 100%);
+  height: max-content;
+  max-height: 50%;
+  border-radius: var(--radius-2);
+  box-shadow: var(--shadow-5);
 }._BaseMenuItem_5r3et_1 {
   font-size: var(--font-size-2);
 }
@@ -497,6 +579,19 @@
 }
 ._default_1odpt_1 span {
   display: none;
+}._ToggleButton_13aus_1[data-state=on][data-variant=solid] {
+  outline: 2px solid var(--color-focus-root);
+  outline-offset: 2px;
+}
+._ToggleButton_13aus_1[data-state=on][data-variant=solid][data-accent-color=gray] {
+  outline-color: var(--accent-8);
+}
+._ToggleButton_13aus_1[data-state=on][data-variant=soft], ._ToggleButton_13aus_1[data-state=on][data-variant=surface], ._ToggleButton_13aus_1[data-state=on][data-variant=outline] {
+  background: var(--accent-9);
+  color: var(--accent-9-contrast);
+}
+._ToggleButton_13aus_1[data-state=on][data-variant=ghost] {
+  background-color: var(--accent-a5);
 }._noWrap_1wpa5_1 {
   white-space: nowrap;
   overflow: hidden;
@@ -518,30 +613,7 @@
 	/* fix the cursor token only being applied to HTML buttons */
 	cursor: var(--cursor-button);
 }
-._light_1u8fs_1 span {
-  color: var(--gray-a3);
-}
-._light_1u8fs_1 [role=separator] {
-  background-color: var(--gray-a3);
-}
-
-._bold_1u8fs_8 span {
-  color: var(--gray-a9);
-}
-._bold_1u8fs_8 [role=separator] {
-  background-color: var(--gray-a9);
-}
-
-._full_1u8fs_15 span {
-  color: var(--gray-a12);
-}
-._full_1u8fs_15 [role=separator] {
-  background-color: var(--gray-a12);
-}
-
-._Text_1u8fs_22 {
-  color: var(--gray-a6);
-}button {
+button {
   all: unset;
 }
 

package/dist/typings.d.ts

@@ -6,3 +6,7 @@ export type PropsWithClassNameAndStyle = {
     className?: string;
     style?: CSSProperties;
 };
+export type ViewportSizes = "initial" | "xs" | "sm" | "md" | "lg" | "xl";
+/** Type used to create a mapping from ViewportSizes to the desired value type T. Used to make values responsive and
+ * dynamic when the viewport size changes. */
+export type OvermapResponsive<T> = Partial<Record<ViewportSizes, T>> | T;

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 import { Responsive, ThemeOptions } from "@radix-ui/themes";
-import { ReactNode, ReactElement, SetStateAction, Dispatch } from "react";
-import { Severity } from "./typings";
+import { ReactNode, ReactElement, SetStateAction, Dispatch, RefObject } from "react";
+import { OvermapResponsive, Severity, ViewportSizes } from "./typings";
 /**
  * Returns an object with mapped key values or a single mapped value
  * @param value an object or string
@@ -11,8 +11,8 @@ export type AccentColor = ThemeOptions["accentColor"];
 /** Performs theme-sensitive mapping of a severity to radix color */
 export declare const useSeverityColor: (severity?: Severity) => AccentColor | undefined;
 export interface ViewportSize {
-    size: "initial" | "xs" | "sm" | "md" | "lg" | "xl";
-    prevSize: "initial" | "xs" | "sm" | "md" | "lg" | "xl";
+    size: ViewportSizes;
+    prevSize: ViewportSizes;
     xs: boolean;
     sm: boolean;
     md: boolean;
@@ -40,6 +40,7 @@ export declare const useStopEventPropagation: () => (event: Event) => void;
  *  @param filterFunction make sure this is wrapped in a useCallback
  *  @param values items that should be filtered on (of type T) */
 export declare function useTextFilter<T>(values: T[], filterFunction: (value: T, filterValue: string) => boolean): [T[], string, Dispatch<SetStateAction<string>>];
+export declare const useSize: (target: RefObject<HTMLDivElement>) => DOMRectReadOnly | undefined;
 /** Temporary solution for text overflow where we want the container to expand up to a max height and use ellipsis if
  * overflow still occurs. Manually break up the text into two lines and conditionally render them in separate divs.
  * The second line/div should have styling that enables ellipsis.
@@ -51,3 +52,8 @@ export declare const genericMemo: <T>(component: T) => T;
 export type AllOrNone<T> = T | {
     [K in keyof T]?: never;
 };
+/** Custom hook used to activate an OvermapResponsive value, which is simply a mapping from the different viewport sizes,
+ * those being "initial", "xs", "sm", "md", "lg", "xl", to a desired value type.
+ * @param value an OvermapResponsive value.
+ * NOTE: "initial" key must be specified on otherwise an error will be thrown */
+export declare function useOvermapResponsiveValue<T>(value: OvermapResponsive<T>): T | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@overmap-ai/blocks",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "A collection of React components for building Overmap's UI.",
   "private": false,
   "author": "Wôrdn Inc.",
@@ -23,6 +23,7 @@
     "@emotion/react": "^11.11.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dismissable-layer": "^1.0.5",
@@ -31,14 +32,16 @@
     "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/themes": "^2.0.0",
-    "@overmap-ai/react-table-library": "^0.1.1",
-    "feather-icons-react": "^0.6.2",
+    "@react-hook/resize-observer": "^1.2.6",
+    "@table-library/react-table-library": "^4.1.7",
     "re-resizable": "^6.9.11",
     "react-device-detect": "^2.2.3",
     "react-error-boundary": "^4.0.13",
+    "react-icons": "^5.2.1",
     "react-responsive": "^9.0.2",
     "react-transition-group": "^4.4.5"
   },
@@ -63,6 +66,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-responsive": "^8.0.7",
     "@types/react-transition-group": "^4.4.8",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
@@ -74,6 +78,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-storybook": "^0.6.13",
+    "feather-icons-react": "^0.7.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.3",