@edifice.io/react 2.2.3-develop-b2school.20250422110318 → 2.2.3-develop-b2school.20250423112933

package/dist/components/List/List.d.ts

@@ -25,7 +25,13 @@ export type ListProps<T> = {
      * Custom class name
      */
     className?: string;
+    /**
+     * Toolbar options
+     */
+    toolbarOptions?: {
+        shouldHideLabelsOnMobile?: boolean;
+    };
 };
 export declare const List: <T extends {
     _id: string;
-}>({ items, isCheckable, data, renderNode, onSelectedItems, className, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+}>({ items, isCheckable, data, renderNode, onSelectedItems, className, toolbarOptions, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/List.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useMediaQuery } from "@uidotdev/usehooks";
 import clsx from "clsx";
 import { useEffect, Fragment as Fragment$1 } from "react";
 import { useCheckable } from "../../hooks/useCheckable/useCheckable.js";
+import useBreakpoint from "../../hooks/useBreakpoint/useBreakpoint.js";
 import Checkbox from "../Checkbox/Checkbox.js";
 import { Toolbar } from "../Toolbar/Toolbar.js";
 const List = ({
@@ -11,7 +11,8 @@ const List = ({
   data,
   renderNode,
   onSelectedItems,
-  className
+  className,
+  toolbarOptions
 }) => {
   const {
     selectedItems,
@@ -19,7 +20,9 @@ const List = ({
     isIndeterminate,
     handleOnSelectAllItems,
     handleOnSelectItem
-  } = useCheckable(data), isDesktopDevice = useMediaQuery("only screen and (min-width: 1024px)");
+  } = useCheckable(data), {
+    lg
+  } = useBreakpoint();
   return useEffect(() => {
     selectedItems && (onSelectedItems == null || onSelectedItems(selectedItems));
   }, [onSelectedItems, selectedItems]), /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -33,8 +36,8 @@ const List = ({
             ")"
           ] })
         ] }),
-        items && /* @__PURE__ */ jsx(Toolbar, { items, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
-          "px-0 ms-auto": !isDesktopDevice
+        items && /* @__PURE__ */ jsx(Toolbar, { items, shouldHideLabelsOnMobile: toolbarOptions == null ? void 0 : toolbarOptions.shouldHideLabelsOnMobile, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
+          "px-0 ms-auto": !lg
         }) })
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "border-top" })

package/dist/components/Toolbar/Toolbar.d.ts

@@ -71,6 +71,10 @@ export interface ToolbarProps extends React.ComponentPropsWithRef<'div'> {
      * Accept optional children
      */
     children?: ReactNode;
+    /**
+     * Hide labels on mobile
+     */
+    shouldHideLabelsOnMobile?: boolean;
 }
 export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Toolbar;

package/dist/components/Toolbar/Toolbar.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useEffect, createElement } from "react";
 import clsx from "clsx";
+import useBreakpoint from "../../hooks/useBreakpoint/useBreakpoint.js";
 import { mergeRefs } from "../../utilities/refs/ref.js";
 import Tooltip from "../Tooltip/Tooltip.js";
 import Button from "../Button/Button.js";
@@ -12,9 +13,12 @@ const Toolbar = /* @__PURE__ */ forwardRef(({
   align = "space",
   isBlock = !1,
   ariaControls,
-  className
+  className,
+  shouldHideLabelsOnMobile = !1
 }, ref) => {
-  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), classes = clsx("toolbar z-1000 bg-white", className, {
+  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), {
+    lg
+  } = useBreakpoint(), classes = clsx("toolbar z-1000 bg-white", className, {
     default: variant === "default",
     "no-shadow": variant === "no-shadow",
     "d-flex": isBlock,
@@ -57,11 +61,12 @@ const Toolbar = /* @__PURE__ */ forwardRef(({
   };
   return /* @__PURE__ */ jsx("div", { ref: mergeRefs(ref, divToolbarRef), className: classes, role: "toolbar", "aria-label": "Text Formatting", "aria-controls": ariaControls, onFocus: handleFocus, onBlur: handleBlur, children: items.map((item, index) => {
     if (item.visibility === "hide") return null;
+    const hideLabel = shouldHideLabelsOnMobile && !lg;
     switch (item.type) {
       case "divider":
         return /* @__PURE__ */ jsx("div", { className: "toolbar-divider" }, item.name ?? index);
       case "button":
-        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+        return /* @__PURE__ */ jsx(Tooltip, { message: hideLabel ? renderTooltipMessage(item) : void 0, placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, children: !hideLabel && item.props.children, "aria-label": item.name, key: item.name ?? index, color: item.props.color || "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
       case "icon":
         return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(IconButton, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: item.props.variant ? item.props.variant : "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
       case "dropdown":

package/dist/modules/modals/ConfirmModal/ConfirmModal.js

@@ -23,7 +23,7 @@ function ConfirmModal({
     "yes/no": t("no"),
     "ok/cancel": t("cancel")
   };
-  return console.log("size:", size), /* @__PURE__ */ jsxs(Modal, { isOpen, onModalClose: onCancel, id, size, children: [
+  return /* @__PURE__ */ jsxs(Modal, { isOpen, onModalClose: onCancel, id, size, children: [
     /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: header }),
     /* @__PURE__ */ jsx(Modal.Body, { children: body }),
     /* @__PURE__ */ jsxs(Modal.Footer, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.2.3-develop-b2school.20250422110318",
+  "version": "2.2.3-develop-b2school.20250423112933",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -118,9 +118,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.2.3-develop-b2school.20250422110318",
-    "@edifice.io/tiptap-extensions": "2.2.3-develop-b2school.20250422110318",
-    "@edifice.io/utilities": "2.2.3-develop-b2school.20250422110318"
+    "@edifice.io/bootstrap": "2.2.3-develop-b2school.20250423112933",
+    "@edifice.io/utilities": "2.2.3-develop-b2school.20250423112933",
+    "@edifice.io/tiptap-extensions": "2.2.3-develop-b2school.20250423112933"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -151,8 +151,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.2.3-develop-b2school.20250422110318",
-    "@edifice.io/config": "2.2.3-develop-b2school.20250422110318"
+    "@edifice.io/client": "2.2.3-develop-b2school.20250423112933",
+    "@edifice.io/config": "2.2.3-develop-b2school.20250423112933"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",