@diabolic/hangover 0.1.2 → 0.1.4

package/README.md

@@ -970,6 +970,7 @@ All visual properties are configurable via CSS custom properties:
   /* Layout */
   --hangover-nav-width: 172px;
   --hangover-content-max-width: 240px;
+  --hangover-panel-nonav-width: 240px;
   --hangover-list-max-height: 280px;
 
   --hangover-transition: 330ms ease;

package/dist/hangover.css

@@ -27,6 +27,7 @@
     0 2px 4px 0 rgba(37, 45, 91, 0.04);
   --hangover-nav-width: 172px;
   --hangover-content-max-width: 240px;
+  --hangover-panel-nonav-width: 240px;
   --hangover-list-max-height: 280px;
   --hangover-transition: 330ms ease;
 }
@@ -96,7 +97,10 @@
 }
 .hangoverDropdown-panel.hasNoNav {
   min-width: unset;
-  width: 240px;
+  width: var(--hangover-panel-nonav-width);
+}
+.hangoverDropdown-panel.hasNoNav .hangoverDropdown-column.forItems {
+  max-width: none;
 }
 .hangoverDropdown-panel-inner {
   display: flex;

package/dist/index.cjs.js

@@ -34,7 +34,8 @@ function DropdownTrigger({
   const {
     triggerRef,
     isOpen,
-    fireEvent
+    fireEvent,
+    t
   } = useDropdownContext();
   const child = react.Children.only(children);
   function handleClick(e) {
@@ -49,12 +50,14 @@ function DropdownTrigger({
     }
     child.props.onClick?.(e);
   }
+  const childChildren = child.props.children;
+  const translatedChildren = typeof childChildren === 'string' ? t(childChildren) : childChildren;
   return /*#__PURE__*/react.cloneElement(child, {
     ref: triggerRef,
     onClick: handleClick,
     'aria-expanded': isOpen,
     'aria-haspopup': 'dialog'
-  });
+  }, translatedChildren);
 }
 
 /**
@@ -393,6 +396,7 @@ function DropdownPanel({
     placement: actualPlacement,
     style: style,
     className: classNames,
+    title: t(title),
     ...rest,
     children: children
   }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -401,7 +405,7 @@ function DropdownPanel({
     style: style,
     role: "dialog",
     "aria-modal": "true",
-    "aria-label": "Dropdown",
+    "aria-label": t('Dropdown'),
     ...rest,
     children: [title && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "hangoverDropdown-panel-title",
@@ -3368,10 +3372,10 @@ function DropdownGroup({
   const visibleItemIds = react.useMemo(() => {
     const searchableItems = react.Children.toArray(children).map(child => ({
       id: child?.props?.id,
-      label: typeof child?.props?.children === 'string' ? child.props.children : ''
+      label: typeof child?.props?.children === 'string' ? t(child.props.children) : ''
     }));
     return getMatchingItemIds(searchableItems, searchQuery);
-  }, [children, searchQuery]);
+  }, [children, searchQuery, t]);
   const groupContextValue = {
     groupLabel: label,
     groupId,

package/dist/index.esm.js

@@ -30,7 +30,8 @@ function DropdownTrigger({
   const {
     triggerRef,
     isOpen,
-    fireEvent
+    fireEvent,
+    t
   } = useDropdownContext();
   const child = Children.only(children);
   function handleClick(e) {
@@ -45,12 +46,14 @@ function DropdownTrigger({
     }
     child.props.onClick?.(e);
   }
+  const childChildren = child.props.children;
+  const translatedChildren = typeof childChildren === 'string' ? t(childChildren) : childChildren;
   return /*#__PURE__*/cloneElement(child, {
     ref: triggerRef,
     onClick: handleClick,
     'aria-expanded': isOpen,
     'aria-haspopup': 'dialog'
-  });
+  }, translatedChildren);
 }
 
 /**
@@ -389,6 +392,7 @@ function DropdownPanel({
     placement: actualPlacement,
     style: style,
     className: classNames,
+    title: t(title),
     ...rest,
     children: children
   }) : /*#__PURE__*/jsxs("div", {
@@ -397,7 +401,7 @@ function DropdownPanel({
     style: style,
     role: "dialog",
     "aria-modal": "true",
-    "aria-label": "Dropdown",
+    "aria-label": t('Dropdown'),
     ...rest,
     children: [title && /*#__PURE__*/jsx("div", {
       className: "hangoverDropdown-panel-title",
@@ -3364,10 +3368,10 @@ function DropdownGroup({
   const visibleItemIds = useMemo(() => {
     const searchableItems = Children.toArray(children).map(child => ({
       id: child?.props?.id,
-      label: typeof child?.props?.children === 'string' ? child.props.children : ''
+      label: typeof child?.props?.children === 'string' ? t(child.props.children) : ''
     }));
     return getMatchingItemIds(searchableItems, searchQuery);
-  }, [children, searchQuery]);
+  }, [children, searchQuery, t]);
   const groupContextValue = {
     groupLabel: label,
     groupId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diabolic/hangover",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A headless-style, compound React dropdown/field-picker component library",
   "license": "MIT",
   "author": "bugrakaan",