@overmap-ai/blocks 1.0.26-table-row-loading.1 → 1.0.27-alpha.0

package/dist/index.d.ts

@@ -13,6 +13,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 +32,13 @@ export * from "./ToggleGroup";
 export * from "./Toolbar";
 export * from "./Toast";
 export * from "./Tooltip";
+export * from "./ToggleButton";
 export * from "./Text";
 export * from "./Theme";
 export * from "./Separator";
 export * from "./OvermapErrorBoundary";
-export { useSeverityColor, useViewportSize, useKeyboardShortcut, useStopEventPropagation, useTextFilter, splitTextForEllipsisAndExpansion, } from "./utils.ts";
+export * from "./OvermapItem";
+export { useSeverityColor, useViewportSize, useKeyboardShortcut, useStopEventPropagation, useTextFilter, splitTextForEllipsisAndExpansion, useSize, } from "./utils";
 export * from "./Checkbox";
 export * from "./Table";
 export * from "./Spinner";

package/dist/style.css

@@ -85,6 +85,14 @@
   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;
 }._BaseMenuItem_5r3et_1 {
   font-size: var(--font-size-2);
 }
@@ -497,27 +505,40 @@
 }
 ._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;
   text-overflow: ellipsis;
   display: block;
-}/*
-	Doubling up on the radix-themes class to increase specificity over the default.
-	Note: the class name must be "radix-themes" for nested themes to work.
-
-	See documentation at https://www.radix-ui.com/themes/docs/theme/token-reference
- */
-.radix-themes.radix-themes {
-	--cursor-button: pointer;
-	--cursor-menu-item: pointer;
-	--cursor-checkbox: pointer;
-}
-
-.rt-BaseButton {
-	/* fix the cursor token only being applied to HTML buttons */
-	cursor: var(--cursor-button);
-}
+}/*
+	Doubling up on the radix-themes class to increase specificity over the default.
+	Note: the class name must be "radix-themes" for nested themes to work.
+
+	See documentation at https://www.radix-ui.com/themes/docs/theme/token-reference
+ */
+.radix-themes.radix-themes {
+	--cursor-button: pointer;
+	--cursor-menu-item: pointer;
+	--cursor-checkbox: pointer;
+}
+
+.rt-BaseButton {
+	/* fix the cursor token only being applied to HTML buttons */
+	cursor: var(--cursor-button);
+}
 ._light_1u8fs_1 span {
   color: var(--gray-a3);
 }
@@ -545,12 +566,7 @@
   all: unset;
 }
 
-._checkboxContainer_pb9za_5 {
-  display: flex;
-  align-items: center;
-}
-
-._checkbox_pb9za_5 {
+._checkbox_yl8iy_5 {
   background-color: var(--color-panel-solid);
   width: 15px;
   height: 15px;
@@ -562,12 +578,12 @@
   box-shadow: inset 0 0 0 1px var(--gray-a7);
   cursor: var(--cursor-checkbox);
 }
-._checkbox_pb9za_5 [data-state=checked], ._checkbox_pb9za_5 [data-state=indeterminate] {
+._checkbox_yl8iy_5 [data-state=checked], ._checkbox_yl8iy_5 [data-state=indeterminate] {
   background-color: var(--accent-9);
   color: var(--accent-9-contrast);
 }
 
-._checkboxIndicator_pb9za_27 {
+._checkboxIndicator_yl8iy_22 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -578,11 +594,11 @@
   padding-right: 0.5px;
 }
 
-._checkboxLabel_pb9za_38 {
+._checkboxLabel_yl8iy_33 {
   padding-left: 0.5rem;
 }
 
-._noTextHighlight_pb9za_42 {
+._noTextHighlight_yl8iy_37 {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -591,141 +607,140 @@
   user-select: none;
 }
 
-._checkboxHidden_pb9za_51 {
+._checkboxHidden_yl8iy_46 {
   visibility: hidden;
-}._disabled_ybi8a_1 {
+}._disabled_5i91d_1 {
   color: var(--gray-a10);
 }
 
-._outerTableContainer_ybi8a_5 {
+._outerTableContainer_5i91d_5 {
   padding: 30px;
   border: 1px solid var(--gray-a4);
   border-radius: 0.5rem;
   box-shadow: var(--shadow-4);
 }
 @media only screen and (max-width: 600px) {
-  ._outerTableContainer_ybi8a_5 {
+  ._outerTableContainer_5i91d_5 {
     padding: 10px;
   }
 }
 
-._headerContainer_ybi8a_17 {
+._headerContainer_5i91d_17 {
   padding-bottom: 1rem;
 }
 
-._tableTopContainer_ybi8a_21 {
+._tableTopContainer_5i91d_21 {
   padding: 10px 0;
 }
 
-._tableContainer_ybi8a_25 {
+._tableContainer_5i91d_25 {
   flex: 1;
   overflow-y: auto;
 }
 
-._searchContainer_ybi8a_30 {
+._searchContainer_5i91d_30 {
   display: block;
   width: 250px;
 }
 @media only screen and (max-width: 600px) {
-  ._searchContainer_ybi8a_30 {
+  ._searchContainer_5i91d_30 {
     width: auto;
   }
 }
 
-._columnFilterSelect_ybi8a_40 {
+._columnFilterSelect_5i91d_40 {
   display: block;
   box-shadow: none;
 }
-._columnFilterSelect_ybi8a_40 svg {
+._columnFilterSelect_5i91d_40 svg {
   display: none;
 }
-._columnFilterSelect_ybi8a_40:hover {
+._columnFilterSelect_5i91d_40:hover {
   background-color: rgba(0, 0, 0, 0.01);
   cursor: pointer;
 }
 
-._table_ybi8a_21 {
+._table_5i91d_21 {
   border: 1px solid var(--gray-a4);
   border-radius: 3px !important;
   background-color: inherit;
-  height: auto !important;
 }
 
-._tableHeaderCell_ybi8a_59 {
+._tableHeaderCell_5i91d_58 {
   background-color: var(--color-background) !important;
   padding: 10px !important;
   border-bottom: 1px solid var(--gray-4);
   max-height: 110px;
 }
-._tableHeaderCell_ybi8a_59 svg {
+._tableHeaderCell_5i91d_58 svg {
   visibility: hidden;
 }
 @media only screen and (max-width: 600px) {
-  ._tableHeaderCell_ybi8a_59 div[title] > div:first-child {
+  ._tableHeaderCell_5i91d_58 div[title] > div:first-child {
     overflow: visible;
     white-space: normal;
   }
 }
 
-._showSortIcon_ybi8a_75 svg {
+._showSortIcon_5i91d_74 svg {
   visibility: visible;
 }
 
-._tableRow_ybi8a_79 {
+._tableRow_5i91d_78 {
   background-color: inherit;
   /* This for the CellSelect checkbox component as it does not accept a className prop */
 }
-._tableRow_ybi8a_79 span, ._tableRow_ybi8a_79 i {
+._tableRow_5i91d_78 span, ._tableRow_5i91d_78 i {
   display: inline-flex;
   place-self: center;
 }
-._tableRow_ybi8a_79 td {
+._tableRow_5i91d_78 td {
   padding-left: 10px !important;
 }
-._tableRow_ybi8a_79:hover:not(._disabled_ybi8a_1) {
+._tableRow_5i91d_78:hover:not(._disabled_5i91d_1) {
   background-color: var(--gray-a4);
 }
 
-._tableCell_ybi8a_94 {
+._tableCell_5i91d_93 {
   padding: 10px !important;
 }
-._tableCell_ybi8a_94 > div > span:first-child {
+._tableCell_5i91d_93 > div > span:first-child {
   width: 100%;
 }
-._tableCell_ybi8a_94:not(:last-of-type) {
+._tableCell_5i91d_93:not(:last-of-type) {
   padding-right: 20px !important;
 }
 
-._noDataTextContainer_ybi8a_104 {
+._noDataTextContainer_5i91d_103 {
   padding: 0.5rem 10px;
   color: #616161;
   width: max-content;
 }
 
-._tableBottomContainer_ybi8a_110 {
+._tableBottomContainer_5i91d_109 {
   padding: 15px 0;
 }
 
-._rowsPerPageContainer_ybi8a_114 {
+._rowsPerPageContainer_5i91d_113 {
   flex: 1;
 }
 @media only screen and (max-width: 600px) {
-  ._rowsPerPageContainer_ybi8a_114 {
+  ._rowsPerPageContainer_5i91d_113 {
     justify-content: center;
     padding-top: 5px;
   }
 }
 
-._rowsPerPageText_ybi8a_124 {
+._rowsPerPageText_5i91d_123 {
   padding-right: 10px;
   padding-top: 4px;
 }
 
-._pageText_ybi8a_129 {
+._pageText_5i91d_128 {
   padding-top: 4px;
 }
 
-._descriptionSecondLine_ybi8a_133 {
+._descriptionSecondLine_5i91d_132 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

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,104 +1,106 @@
-{
-  "name": "@overmap-ai/blocks",
-  "version": "1.0.26-table-row-loading.1",
-  "description": "A collection of React components for building Overmap's UI.",
-  "private": false,
-  "author": "Wôrdn Inc.",
-  "license": "UNLICENSED",
-  "type": "module",
-  "main": "dist/blocks.umd.cjs",
-  "module": "dist/blocks.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "dev": "yarn storybook",
-    "storybook": "storybook dev -p 6006",
-    "build": "tsc --noEmit && vite build",
-    "lint": "eslint src .storybook stories --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "yarn lint --fix",
-    "preview": "vite preview",
-    "prepare": "husky install",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dismissable-layer": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@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-group": "^1.0.4",
-    "@radix-ui/react-toolbar": "^1.0.4",
-    "@radix-ui/themes": "^2.0.0",
-    "@table-library/react-table-library": "^4.1.7",
-    "feather-icons-react": "^0.6.2",
-    "re-resizable": "^6.9.11",
-    "react-device-detect": "^2.2.3",
-    "react-error-boundary": "^4.0.13",
-    "react-responsive": "^9.0.2",
-    "react-transition-group": "^4.4.5"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@faker-js/faker": "^8.3.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.3",
-    "@storybook/addon-interactions": "^7.4.3",
-    "@storybook/addon-links": "^7.4.3",
-    "@storybook/blocks": "^7.4.3",
-    "@storybook/react": "^7.4.3",
-    "@storybook/react-vite": "^7.4.3",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/types": "^7.4.6",
-    "@types/node": "^20.8.10",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-responsive": "^8.0.7",
-    "@types/react-transition-group": "^4.4.8",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "classnames": "^2.3.2",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.13",
-    "husky": "^8.0.3",
-    "lint-staged": "^14.0.1",
-    "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup-plugin-polyfill-node": "^0.12.0",
-    "sass": "^1.68.0",
-    "storybook": "^7.4.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "vite-plugin-dts": "^3.5.3",
-    "vite-plugin-externalize-deps": "^0.7.0"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "yarn eslint --fix"
-    ],
-    "*.{css,scss}": [
-      "prettier --write"
-    ]
-  },
-  "files": [
-    "dist"
-  ],
-  "resolutions": {
-    "jackspeak": "2.1.1"
-  }
-}
+{
+  "name": "@overmap-ai/blocks",
+  "version": "1.0.27-alpha.0",
+  "description": "A collection of React components for building Overmap's UI.",
+  "private": false,
+  "author": "Wôrdn Inc.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "dist/blocks.umd.cjs",
+  "module": "dist/blocks.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "yarn storybook",
+    "storybook": "storybook dev -p 6006",
+    "build": "tsc --noEmit && vite build",
+    "lint": "eslint src .storybook stories --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "yarn lint --fix",
+    "preview": "vite preview",
+    "prepare": "husky install",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dismissable-layer": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@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",
+    "@react-hook/resize-observer": "^1.2.6",
+    "@table-library/react-table-library": "^4.1.7",
+    "feather-icons-react": "^0.6.2",
+    "re-resizable": "^6.9.11",
+    "react-device-detect": "^2.2.3",
+    "react-error-boundary": "^4.0.13",
+    "react-responsive": "^9.0.2",
+    "react-transition-group": "^4.4.5"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.3.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.3",
+    "@storybook/addon-interactions": "^7.4.3",
+    "@storybook/addon-links": "^7.4.3",
+    "@storybook/blocks": "^7.4.3",
+    "@storybook/react": "^7.4.3",
+    "@storybook/react-vite": "^7.4.3",
+    "@storybook/testing-library": "^0.2.1",
+    "@storybook/types": "^7.4.6",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-responsive": "^8.0.7",
+    "@types/react-transition-group": "^4.4.8",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "classnames": "^2.3.2",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.6.13",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "sass": "^1.68.0",
+    "storybook": "^7.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-dts": "^3.5.3",
+    "vite-plugin-externalize-deps": "^0.7.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "yarn eslint --fix"
+    ],
+    "*.{css,scss}": [
+      "prettier --write"
+    ]
+  },
+  "files": [
+    "dist"
+  ],
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}