@oliasoft-open-source/react-ui-library 3.3.5 → 3.3.7

package/dist/global.css

@@ -3918,7 +3918,7 @@ html[data-theme='dark'] {
   --color-border-button-hover: var(--color-border);
   --color-text-button-muted: rgba(255, 255, 255, 0.4);
 }
-._button_msniv_375 {
+._button_q96hr_375 {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -3944,79 +3944,82 @@ html[data-theme='dark'] {
   min-height: 38px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-._button_msniv_375:hover {
+._button_q96hr_375:hover {
   background: var(--color-background-button-default-hover);
   border-color: var(--color-border-button-hover);
 }
-._button_msniv_375:active {
+._button_q96hr_375:focus {
+  box-shadow: var(--shadow-focus);
+}
+._button_q96hr_375:active {
   background: var(--color-background-button-default-active);
   box-shadow: none;
 }
-._button_msniv_375._active_msniv_409 {
+._button_q96hr_375._active_q96hr_412:not(._green_q96hr_412):not(._red_q96hr_412):not(._orange_q96hr_412) {
   border-color: var(--color-background-button-primary);
   color: var(--color-text-primary);
   position: relative;
   z-index: 2;
 }
-._button_msniv_375:hover,
-._button_msniv_375:focus,
-._button_msniv_375:active {
+._button_q96hr_375:hover,
+._button_q96hr_375:focus,
+._button_q96hr_375:active {
   position: relative;
   z-index: 1;
 }
-._button_msniv_375 ._icon_msniv_421 {
+._button_q96hr_375 ._icon_q96hr_424 {
   margin: 0 8px 0 -4px;
 }
-._button_msniv_375 ._icon_msniv_421 svg {
+._button_q96hr_375 ._icon_q96hr_424 svg {
   height: 14px;
   width: 14px;
 }
-._iconOnly_msniv_428 {
+._iconOnly_q96hr_431 {
   padding: 0.78571429em 0.78571429em 0.78571429em;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-._iconOnly_msniv_428 ._icon_msniv_421 {
+._iconOnly_q96hr_431 ._icon_q96hr_424 {
   margin: 0;
   line-height: 0;
 }
-._basic_msniv_438 {
+._basic_q96hr_441 {
   color: var(--color-text-primary);
   background: transparent;
   box-shadow: none !important;
   border: none !important;
 }
-._basic_msniv_438._muted_msniv_444 {
+._basic_q96hr_441._muted_q96hr_447 {
   color: var(--color-text-button-muted);
 }
-._basic_msniv_438:hover,
-._basic_msniv_438:focus {
+._basic_q96hr_441:hover,
+._basic_q96hr_441:focus {
   color: var(--color-text-primary-hover);
   background: rgba(0, 0, 0, 0.05);
 }
-._basic_msniv_438:active,
-._basic_msniv_438._active_msniv_409 {
+._basic_q96hr_441:active,
+._basic_q96hr_441._active_q96hr_412 {
   color: var(--color-text-primary-active);
   background: rgba(0, 0, 0, 0.1);
 }
-._disabled_msniv_457 {
+._disabled_q96hr_460 {
   cursor: default;
   pointer-events: none !important;
   color: var(--color-text-faint) !important;
   box-shadow: none !important;
 }
-._disabled_msniv_457:not(._active_msniv_409):not(._basic_msniv_438) {
+._disabled_q96hr_460:not(._active_q96hr_412):not(._basic_q96hr_441) {
   background: var(--color-background-disabled) !important;
   border: 1px solid var(--color-border) !important;
 }
-._small_msniv_467 {
+._small_q96hr_470 {
   font-size: 12px;
   min-height: 24px;
   padding: 0 0.75rem;
 }
-._pill_msniv_472,
-._round_msniv_473 {
+._pill_q96hr_475,
+._round_q96hr_476 {
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-size: 13px;
@@ -4025,108 +4028,114 @@ html[data-theme='dark'] {
   display: inline-flex;
   align-items: center;
 }
-._round_msniv_473 {
+._round_q96hr_476 {
   padding: 0;
   width: 38px;
   line-height: 1;
 }
-._round_msniv_473._small_msniv_467 {
+._round_q96hr_476._small_q96hr_470 {
   width: 24px;
 }
-._orange_msniv_490 {
+._orange_q96hr_412 {
   background-color: var(--color-background-button-primary);
 }
-._orange_msniv_490:hover,
-._orange_msniv_490:focus {
+._orange_q96hr_412:hover,
+._orange_q96hr_412:focus {
   background-color: var(--color-background-button-primary-hover);
 }
-._orange_msniv_490:active {
+._orange_q96hr_412:active,
+._orange_q96hr_412._active_q96hr_412 {
   background-color: var(--color-background-button-primary-active);
 }
-._red_msniv_500 {
+._red_q96hr_412 {
   background-color: var(--color-background-button-error);
 }
-._red_msniv_500:hover,
-._red_msniv_500:focus {
+._red_q96hr_412:hover,
+._red_q96hr_412:focus {
   background-color: var(--color-background-button-error-hover);
 }
-._red_msniv_500:active {
+._red_q96hr_412:active,
+._red_q96hr_412._active_q96hr_412 {
   background-color: var(--color-background-button-error-active);
 }
-._green_msniv_510 {
+._green_q96hr_412 {
   background-color: var(--color-background-button-success);
 }
-._green_msniv_510:hover,
-._green_msniv_510:focus {
+._green_q96hr_412:hover,
+._green_q96hr_412:focus {
   background-color: var(--color-background-button-success-hover);
 }
-._green_msniv_510:active {
+._green_q96hr_412:active,
+._green_q96hr_412._active_q96hr_412 {
   background-color: var(--color-background-button-success-active);
 }
-._orange_msniv_490,
-._red_msniv_500,
-._green_msniv_510 {
+._orange_q96hr_412,
+._red_q96hr_412,
+._green_q96hr_412 {
   color: #fff;
 }
-._orange_msniv_490:hover,
-._red_msniv_500:hover,
-._green_msniv_510:hover,
-._orange_msniv_490:focus,
-._red_msniv_500:focus,
-._green_msniv_510:focus {
+._orange_q96hr_412:hover,
+._red_q96hr_412:hover,
+._green_q96hr_412:hover,
+._orange_q96hr_412:focus,
+._red_q96hr_412:focus,
+._green_q96hr_412:focus {
   color: #fff;
 }
-._orange_msniv_490:active,
-._red_msniv_500:active,
-._green_msniv_510:active {
+._orange_q96hr_412:active,
+._red_q96hr_412:active,
+._green_q96hr_412:active,
+._orange_q96hr_412._active_q96hr_412,
+._red_q96hr_412._active_q96hr_412,
+._green_q96hr_412._active_q96hr_412 {
   color: #fff;
 }
-._inverted_msniv_538 {
+._inverted_q96hr_547 {
   background-color: transparent;
   border-color: var(--color-text);
   box-shadow: none;
 }
-._inverted_msniv_538:hover,
-._inverted_msniv_538:focus,
-._inverted_msniv_538:active {
+._inverted_q96hr_547:hover,
+._inverted_q96hr_547:focus,
+._inverted_q96hr_547:active {
   box-shadow: none;
 }
-._inverted_msniv_538._orange_msniv_490 {
+._inverted_q96hr_547._orange_q96hr_412 {
   color: var(--color-background-button-primary);
   border-color: var(--color-background-button-primary);
 }
-._inverted_msniv_538._red_msniv_500 {
+._inverted_q96hr_547._red_q96hr_412 {
   color: var(--color-background-button-error);
   border-color: var(--color-background-button-error);
 }
-._inverted_msniv_538._green_msniv_510 {
+._inverted_q96hr_547._green_q96hr_412 {
   color: var(--color-background-button-success);
   border-color: var(--color-background-button-success);
 }
-._inverted_msniv_538._orange_msniv_490:hover,
-._inverted_msniv_538._red_msniv_500:hover,
-._inverted_msniv_538._green_msniv_510:hover,
-._inverted_msniv_538._orange_msniv_490:focus,
-._inverted_msniv_538._red_msniv_500:focus,
-._inverted_msniv_538._green_msniv_510:focus,
-._inverted_msniv_538._orange_msniv_490:active,
-._inverted_msniv_538._red_msniv_500:active,
-._inverted_msniv_538._green_msniv_510:active {
+._inverted_q96hr_547._orange_q96hr_412:hover,
+._inverted_q96hr_547._red_q96hr_412:hover,
+._inverted_q96hr_547._green_q96hr_412:hover,
+._inverted_q96hr_547._orange_q96hr_412:focus,
+._inverted_q96hr_547._red_q96hr_412:focus,
+._inverted_q96hr_547._green_q96hr_412:focus,
+._inverted_q96hr_547._orange_q96hr_412:active,
+._inverted_q96hr_547._red_q96hr_412:active,
+._inverted_q96hr_547._green_q96hr_412:active {
   color: white;
   box-shadow: none;
 }
-._groupOrderFirst_msniv_572,
-._groupOrderMiddle_msniv_573,
-._groupOrderLast_msniv_574 {
+._groupOrderFirst_q96hr_581,
+._groupOrderMiddle_q96hr_582,
+._groupOrderLast_q96hr_583 {
   margin-right: 0;
 }
-._groupOrderFirst_msniv_572,
-._groupOrderMiddle_msniv_573 {
+._groupOrderFirst_q96hr_581,
+._groupOrderMiddle_q96hr_582 {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
-._groupOrderLast_msniv_574,
-._groupOrderMiddle_msniv_573 {
+._groupOrderLast_q96hr_583,
+._groupOrderMiddle_q96hr_582 {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }

package/dist/index.js

@@ -10018,26 +10018,29 @@ Badge.propTypes = {
   margin: propTypes$1.exports.string,
   small: propTypes$1.exports.bool
 };
-const button$3 = "_button_msniv_375";
-const active$8 = "_active_msniv_409";
-const icon$6 = "_icon_msniv_421";
-const iconOnly = "_iconOnly_msniv_428";
-const basic = "_basic_msniv_438";
-const muted$1 = "_muted_msniv_444";
-const disabled$8 = "_disabled_msniv_457";
-const small$c = "_small_msniv_467";
-const pill = "_pill_msniv_472";
-const round = "_round_msniv_473";
-const orange$1 = "_orange_msniv_490";
-const red$1 = "_red_msniv_500";
-const green$1 = "_green_msniv_510";
-const inverted$1 = "_inverted_msniv_538";
-const groupOrderFirst$4 = "_groupOrderFirst_msniv_572";
-const groupOrderMiddle$4 = "_groupOrderMiddle_msniv_573";
-const groupOrderLast$4 = "_groupOrderLast_msniv_574";
+const button$3 = "_button_q96hr_375";
+const active$8 = "_active_q96hr_412";
+const green$1 = "_green_q96hr_412";
+const red$1 = "_red_q96hr_412";
+const orange$1 = "_orange_q96hr_412";
+const icon$6 = "_icon_q96hr_424";
+const iconOnly = "_iconOnly_q96hr_431";
+const basic = "_basic_q96hr_441";
+const muted$1 = "_muted_q96hr_447";
+const disabled$8 = "_disabled_q96hr_460";
+const small$c = "_small_q96hr_470";
+const pill = "_pill_q96hr_475";
+const round = "_round_q96hr_476";
+const inverted$1 = "_inverted_q96hr_547";
+const groupOrderFirst$4 = "_groupOrderFirst_q96hr_581";
+const groupOrderMiddle$4 = "_groupOrderMiddle_q96hr_582";
+const groupOrderLast$4 = "_groupOrderLast_q96hr_583";
 const buttonStyles = {
   button: button$3,
   active: active$8,
+  green: green$1,
+  red: red$1,
+  orange: orange$1,
   icon: icon$6,
   iconOnly,
   basic,
@@ -10046,9 +10049,6 @@ const buttonStyles = {
   small: small$c,
   pill,
   round,
-  orange: orange$1,
-  red: red$1,
-  green: green$1,
   inverted: inverted$1,
   groupOrderFirst: groupOrderFirst$4,
   groupOrderMiddle: groupOrderMiddle$4,
@@ -12798,6 +12798,7 @@ const styles$z = {
 const DrawerTabs = ({
   tabs: tabs2,
   activeTab,
+  open,
   background,
   handleTabClick,
   width,
@@ -12807,7 +12808,7 @@ const DrawerTabs = ({
     children: [/* @__PURE__ */ jsx("div", {
       className: styles$z.tabs,
       children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx("div", {
-        className: cx(styles$z.tab, activeTab === index2 && styles$z.active),
+        className: cx(styles$z.tab, activeTab === index2 && open ? styles$z.active : ""),
         style: {
           background
         },
@@ -12823,7 +12824,7 @@ const DrawerTabs = ({
         },
         className: styles$z.tabsContent,
         "data-testid": testId && `${testId}-content-${index2}`,
-        children: active2 && tab2.content
+        children: active2 && open && tab2.content
       }, index2);
     })]
   });
@@ -14871,6 +14872,8 @@ reactResizable.exports = function() {
 };
 var Resizable = reactResizable.exports.Resizable = Resizable$2.default;
 reactResizable.exports.ResizableBox = ResizableBox$1.default;
+const TABS_WIDTH = 37;
+const MIN_OPEN_WIDTH = 240;
 const ResizeHandle = React__default.forwardRef((props, ref2) => {
   const {
     handleAxis,
@@ -14888,32 +14891,38 @@ const DrawerResizeWrapper = ({
   width,
   right: right2,
   onResize,
-  open
+  setOpen
 }) => {
   const [isResizing2, setIsResizing] = useState(false);
-  const MINIMUM_OPEN_WIDTH = 100;
   const MAXIMUM_OPEN_WIDTH = window.innerWidth / 2;
   const handleResize = (event, {
     node,
     size: size2,
     handle
   }) => {
-    if (open) {
-      onResize(size2.width);
-    }
+    onResize(size2.width);
   };
   return onResize ? /* @__PURE__ */ jsx(Resizable, {
     width,
     height: 100,
-    minConstraints: [MINIMUM_OPEN_WIDTH, null],
+    minConstraints: [TABS_WIDTH, null],
     maxConstraints: [MAXIMUM_OPEN_WIDTH, null],
     onResize: handleResize,
-    handle: open ? /* @__PURE__ */ jsx(ResizeHandle, {}) : null,
+    handle: /* @__PURE__ */ jsx(ResizeHandle, {}),
     resizeHandles: right2 ? ["w"] : ["e"],
     axis: "x",
     className: isResizing2 ? styles$z.isResizing : "",
-    onResizeStart: () => setIsResizing(true),
-    onResizeStop: () => setIsResizing(false),
+    onResizeStart: () => {
+      setOpen(true);
+      onResize(width);
+      setIsResizing(true);
+    },
+    onResizeStop: () => {
+      setIsResizing(false);
+      if (width < TABS_WIDTH + 50) {
+        setOpen(false);
+      }
+    },
     children
   }) : /* @__PURE__ */ jsx(Fragment, {
     children
@@ -14957,18 +14966,19 @@ const Drawer = ({
   const isStandardButton = button2 === true;
   const isCustomButton = !isStandardButton && isValidElement(button2);
   const [open, setOpen] = setOpenProp ? [openProp, setOpenProp] : isStandardButton || tabs2 ? useState(openProp) : [openProp, null];
-  const [activeTab, setActiveTab] = setActiveTabProp ? [activeTabProp, setActiveTabProp] : useState(open ? defaultTabIndex : null);
+  const [activeTab, setActiveTab] = setActiveTabProp ? [activeTabProp, setActiveTabProp] : useState(defaultTabIndex);
   const openWidth = Array.isArray(width) ? width[activeTab] : width;
-  const TABS_WIDTH = 37;
   const currentWidth = open ? openWidth : tabs2 ? TABS_WIDTH : closedWidth;
   const handleTabClick = (index2) => {
-    if (activeTab === index2) {
-      setActiveTab(null);
+    if (activeTab === index2 && open) {
       setOpen(false);
-    } else {
-      setActiveTab(index2);
+    } else if (!open) {
       setOpen(true);
+      if (onResize && width < MIN_OPEN_WIDTH) {
+        onResize(MIN_OPEN_WIDTH);
+      }
     }
+    setActiveTab(index2);
     if (getActiveTab) {
       getActiveTab(tabs2[index2]);
     }
@@ -14976,7 +14986,7 @@ const Drawer = ({
   return /* @__PURE__ */ jsx(DrawerResizeWrapper, {
     width: currentWidth,
     onResize,
-    open,
+    setOpen,
     right: right2,
     children: /* @__PURE__ */ jsxs("div", {
       className: cx(styles$z.drawer, shadow2 ? styles$z.shadow : "", fixed2 ? styles$z.fixed : styles$z.inline, right2 ? styles$z.right : styles$z.left),
@@ -14994,6 +15004,7 @@ const Drawer = ({
           width: openWidth,
           testId,
           tabs: tabs2,
+          open,
           activeTab,
           background,
           handleTabClick

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "3.3.5",
+  "version": "3.3.7",
   "description": "Reusable UI components for React projects",
   "module": "./dist/index.js",
   "main": "./dist/index.js",