design-zystem 1.0.360 → 1.0.362

package/dist/index.d.mts

@@ -764,6 +764,7 @@ interface TableRowProps extends HTMLAttributes<HTMLDivElement> {
     hoverable?: boolean;
     /** Colored bar on the left edge to flag a row, e.g. one needing follow-up. Drawn over the row so columns stay aligned with unflagged rows. */
     accentColor?: string;
+    opacity?: number;
     onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     style?: CSSProperties;
     className?: string;

package/dist/index.d.ts

@@ -764,6 +764,7 @@ interface TableRowProps extends HTMLAttributes<HTMLDivElement> {
     hoverable?: boolean;
     /** Colored bar on the left edge to flag a row, e.g. one needing follow-up. Drawn over the row so columns stay aligned with unflagged rows. */
     accentColor?: string;
+    opacity?: number;
     onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     style?: CSSProperties;
     className?: string;

package/dist/index.js

@@ -3992,7 +3992,8 @@ var shouldForwardPropTableRow = (prop) => ![
   "height",
   "isClickable",
   "hoverable",
-  "accentColor"
+  "accentColor",
+  "opacity"
 ].includes(prop);
 var StyledTableRow = import_styled_components32.default.div.withConfig({
   shouldForwardProp: shouldForwardPropTableRow
@@ -4004,7 +4005,13 @@ var StyledTableRow = import_styled_components32.default.div.withConfig({
   background-color: ${(props) => props.backgroundColor || "inherit"};
   border-top: ${(props) => props.borderTop || "none"};
   height: ${(props) => props.height || ""};
-  transition: box-shadow 0.12s ease;
+  opacity: ${(props) => {
+  var _a;
+  return (_a = props.opacity) != null ? _a : 1;
+}};
+  transition:
+    box-shadow 0.12s ease,
+    opacity 0.12s ease;
   ${(props) => props.accentColor ? `position: relative;
   &::before {
     content: '';

package/dist/index.mjs

@@ -3855,7 +3855,8 @@ var shouldForwardPropTableRow = (prop) => ![
   "height",
   "isClickable",
   "hoverable",
-  "accentColor"
+  "accentColor",
+  "opacity"
 ].includes(prop);
 var StyledTableRow = styled32.div.withConfig({
   shouldForwardProp: shouldForwardPropTableRow
@@ -3867,7 +3868,13 @@ var StyledTableRow = styled32.div.withConfig({
   background-color: ${(props) => props.backgroundColor || "inherit"};
   border-top: ${(props) => props.borderTop || "none"};
   height: ${(props) => props.height || ""};
-  transition: box-shadow 0.12s ease;
+  opacity: ${(props) => {
+  var _a;
+  return (_a = props.opacity) != null ? _a : 1;
+}};
+  transition:
+    box-shadow 0.12s ease,
+    opacity 0.12s ease;
   ${(props) => props.accentColor ? `position: relative;
   &::before {
     content: '';

package/dist/ui/index.d.mts

@@ -771,9 +771,10 @@ interface DrawerProps {
     size?: string;
     /**
      * `false` : le panneau n'inerte plus la page et ne capture plus le focus — à
-     * utiliser dès qu'il ouvre lui-même une modale (sinon celle-ci, montée hors
-     * de son DOM, devient inerte et injoignable au clavier). Le clic à côté le
-     * referme quand même, sauf s'il tombe dans une modale ouverte par-dessus.
+     * utiliser dès qu'il ouvre lui-même une modale ou une liste déroulante en
+     * portal (sinon celle-ci, montée hors de son DOM, devient inerte). Le clic à
+     * côté le referme quand même, sauf s'il tombe dans une modale ou une liste
+     * ouverte par-dessus.
      */
     modal?: boolean;
     className?: string;

package/dist/ui/index.d.ts

@@ -771,9 +771,10 @@ interface DrawerProps {
     size?: string;
     /**
      * `false` : le panneau n'inerte plus la page et ne capture plus le focus — à
-     * utiliser dès qu'il ouvre lui-même une modale (sinon celle-ci, montée hors
-     * de son DOM, devient inerte et injoignable au clavier). Le clic à côté le
-     * referme quand même, sauf s'il tombe dans une modale ouverte par-dessus.
+     * utiliser dès qu'il ouvre lui-même une modale ou une liste déroulante en
+     * portal (sinon celle-ci, montée hors de son DOM, devient inerte). Le clic à
+     * côté le referme quand même, sauf s'il tombe dans une modale ou une liste
+     * ouverte par-dessus.
      */
     modal?: boolean;
     className?: string;

package/dist/ui/index.js

@@ -3524,6 +3524,7 @@ var CollapsibleContent = (_a) => {
 var import_react25 = require("react");
 var import_vaul = require("vaul");
 var import_jsx_runtime45 = require("react/jsx-runtime");
+var KEEP_OPEN_SELECTOR = '[role="dialog"], [role="listbox"], [data-drawer-keep-open]';
 var CONTENT_POSITION = {
   top: "inset-x-4 top-4 rounded-2xl",
   bottom: "inset-x-4 bottom-4 rounded-2xl",
@@ -3548,7 +3549,7 @@ var Drawer = ({
       const target = event.target;
       if (!target) return;
       if ((_a = contentRef.current) == null ? void 0 : _a.contains(target)) return;
-      if (target.closest('[role="dialog"], [data-drawer-keep-open]')) return;
+      if (target.closest(KEEP_OPEN_SELECTOR)) return;
       onClose == null ? void 0 : onClose();
     };
     document.addEventListener("pointerdown", handlePointerDown);
@@ -3569,8 +3570,7 @@ var Drawer = ({
             ref: contentRef,
             onPointerDownOutside: (event) => {
               const target = event.target;
-              if (target == null ? void 0 : target.closest('[role="dialog"], [data-drawer-keep-open]'))
-                event.preventDefault();
+              if (target == null ? void 0 : target.closest(KEEP_OPEN_SELECTOR)) event.preventDefault();
             },
             className: cn(
               "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",

package/dist/ui/index.mjs

@@ -3354,6 +3354,7 @@ var CollapsibleContent = (_a) => {
 import { useEffect as useEffect5, useRef as useRef6 } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
+var KEEP_OPEN_SELECTOR = '[role="dialog"], [role="listbox"], [data-drawer-keep-open]';
 var CONTENT_POSITION = {
   top: "inset-x-4 top-4 rounded-2xl",
   bottom: "inset-x-4 bottom-4 rounded-2xl",
@@ -3378,7 +3379,7 @@ var Drawer = ({
       const target = event.target;
       if (!target) return;
       if ((_a = contentRef.current) == null ? void 0 : _a.contains(target)) return;
-      if (target.closest('[role="dialog"], [data-drawer-keep-open]')) return;
+      if (target.closest(KEEP_OPEN_SELECTOR)) return;
       onClose == null ? void 0 : onClose();
     };
     document.addEventListener("pointerdown", handlePointerDown);
@@ -3399,8 +3400,7 @@ var Drawer = ({
             ref: contentRef,
             onPointerDownOutside: (event) => {
               const target = event.target;
-              if (target == null ? void 0 : target.closest('[role="dialog"], [data-drawer-keep-open]'))
-                event.preventDefault();
+              if (target == null ? void 0 : target.closest(KEEP_OPEN_SELECTOR)) event.preventDefault();
             },
             className: cn(
               "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.360",
+  "version": "1.0.362",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",