@trops/dash-core 0.1.570 → 0.1.572

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, isHexColor, deriveShades, TAILWIND_PALETTE, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, MenuItem, Tag2, ButtonIcon3, normalizeHex, contrastRatio, Caption2, Caption, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Divider, Caption3, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, isHexColor, deriveShades, TAILWIND_PALETTE, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, MenuItem, Tag2, ButtonIcon3, normalizeHex, contrastRatio, Caption2, Caption, getColorFamilies, getCuratedColorGrid, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Divider, Caption3, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
 export { ThemeContext } from '@trops/dash-react';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -36930,6 +36930,65 @@ var CustomHexColorPane = function CustomHexColorPane(_ref) {
   });
 };
 
+var CategorizedColorGrid = function CategorizedColorGrid(_ref) {
+  var onSelect = _ref.onSelect,
+    _ref$selectedHex = _ref.selectedHex,
+    selectedHex = _ref$selectedHex === void 0 ? null : _ref$selectedHex,
+    _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? 6 : _ref$cols;
+  var families = getColorFamilies();
+  var _useState = useState(families[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeFamily = _useState2[0],
+    setActiveFamily = _useState2[1];
+  var colors = getCuratedColorGrid(activeFamily);
+
+  // Map the `cols` prop to a Tailwind class. The pattern set is in
+  // the dash-electron safelist already (grid-cols-1..12).
+  var gridColsClass = {
+    4: "grid-cols-4",
+    6: "grid-cols-6",
+    8: "grid-cols-8",
+    9: "grid-cols-9",
+    10: "grid-cols-10",
+    12: "grid-cols-12"
+  }[cols] || "grid-cols-6";
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col gap-3 p-3",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex flex-row gap-2 flex-wrap",
+      children: families.map(function (family) {
+        var isActive = activeFamily === family;
+        return /*#__PURE__*/jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setActiveFamily(family);
+          },
+          className: "px-3 py-1 rounded-full text-xs font-medium transition-colors ".concat(isActive ? "bg-blue-600 text-white" : "bg-gray-700 text-gray-300 hover:bg-gray-600"),
+          children: family
+        }, family);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "grid ".concat(gridColsClass, " gap-1"),
+      children: colors.map(function (hex) {
+        var isSelected = selectedHex && hex.toLowerCase() === selectedHex.toLowerCase();
+        return /*#__PURE__*/jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return onSelect(hex);
+          },
+          title: hex,
+          className: "aspect-square rounded transition-transform hover:scale-110 focus:scale-110 focus:outline-none ".concat(isSelected ? "ring-2 ring-white scale-110" : ""),
+          style: {
+            backgroundColor: hex
+          },
+          "aria-label": "Select color ".concat(hex)
+        }, hex);
+      })
+    })]
+  });
+};
+
 var AvailableColorsGridPane = function AvailableColorsGridPane(_ref) {
   var _ref$currentColor = _ref.currentColor,
     currentColor = _ref$currentColor === void 0 ? null : _ref$currentColor,
@@ -36990,36 +37049,56 @@ var AvailableColorsGridPane = function AvailableColorsGridPane(_ref) {
       });
     });
   }
-  return (
-    /*#__PURE__*/
-    // <LayoutContainer
-    //     direction="col"
-    //     scrollable={false}
-    //     className="space-y-1"
-    //     height={"h-full"}
-    // >
-    jsxs(DashPanel, {
+
+  // The picker renders inside a modal so it has room for the full
+  // categorized grid without the user having to scroll within a
+  // cramped left-column. Mount/unmount of this component is driven
+  // by the parent (ThemeMenuPane) based on `selectedColor` state —
+  // so `isOpen` is effectively always `true` while mounted, and
+  // closing the modal triggers `onCancel` to unmount.
+  var isMain = shade !== null;
+  var title = isMain ? "Pick ".concat(capitalizeFirstLetter(colorType || "color"), " color") : "Available Colors";
+  return /*#__PURE__*/jsx(Modal, {
+    isOpen: true,
+    setIsOpen: function setIsOpen() {
+      return handleCancel();
+    },
+    width: "w-3/4",
+    height: "h-3/4",
+    children: /*#__PURE__*/jsxs(DashPanel, {
       height: "h-full",
       scrollable: true,
       children: [/*#__PURE__*/jsx(DashPanel.Header, {
-        title: "AvailableColors"
-      }), /*#__PURE__*/jsxs(DashPanel.Body, {
+        title: title
+      }), /*#__PURE__*/jsx(DashPanel.Body, {
         scrollable: true,
         space: true,
-        children: [/*#__PURE__*/jsx("div", {
+        children: isMain ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(CategorizedColorGrid, {
+            cols: 12,
+            onSelect: function onSelect(hex) {
+              return handleChooseColor({
+                colorName: hex,
+                colorType: colorType,
+                shade: shade || 500,
+                panelType: "main"
+              });
+            }
+          }), /*#__PURE__*/jsx(CustomHexColorPane, {
+            onApply: function onApply(hex) {
+              return handleChooseColor({
+                colorName: hex,
+                colorType: colorType,
+                shade: shade || 500,
+                panelType: "main"
+              });
+            },
+            label: "Custom hex for ".concat(colorType || "channel")
+          })]
+        }) : /*#__PURE__*/jsx("div", {
           className: "flex flex-col space-y-1",
           children: renderAvailableColors()
-        }), shade !== null && /*#__PURE__*/jsx(CustomHexColorPane, {
-          onApply: function onApply(hex) {
-            return handleChooseColor({
-              colorName: hex,
-              colorType: colorType,
-              shade: shade || 500,
-              panelType: "main"
-            });
-          },
-          label: "Custom hex for ".concat(colorType || "channel")
-        })]
+        })
       }), onCancel && /*#__PURE__*/jsx(DashPanel.Footer, {
         children: /*#__PURE__*/jsx(Button, {
           title: "Cancel",
@@ -37028,8 +37107,7 @@ var AvailableColorsGridPane = function AvailableColorsGridPane(_ref) {
         })
       })]
     })
-    // </LayoutContainer>
-  );
+  });
 };
 
 var ThemeMenuPane = function ThemeMenuPane(_ref) {