ab-ui-library 1.4.4 → 1.4.5

package/components/Modal/Modal.js

@@ -106,7 +106,7 @@ var Modal = function Modal(props) {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
     lineHeight: "large",
     size: "large",
-    weight: 'bolder',
+    weight: 'bold',
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-title") : ''
   }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
     className: 'mt-12',
@@ -115,6 +115,7 @@ var Modal = function Modal(props) {
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-title") : ''
   }, subtitle) : null), closeIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
     className: 'modal__close ml-16',
+    size: 'large',
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-close-button") : '',
     iconProps: {
       Component: IconDismiss

package/components/Modal/ModalConfirmation.js

@@ -102,7 +102,7 @@ var ModalConfirmation = function ModalConfirmation(props) {
     size: 'medium',
     iconProps: iconProps
   }) : null, title ? /*#__PURE__*/React.createElement(Text, {
-    weight: "bolder",
+    weight: "bold",
     lineHeight: "large",
     size: "large",
     dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-modal-title") : ''

package/components/SideNavigation/SideNavigation.d.ts

@@ -1,3 +1,3 @@
+/// <reference types="react" />
 import type { TSideNavigationPropTypes } from './types';
-import type { JSX } from 'react';
 export declare const SideNavigation: (props: TSideNavigationPropTypes) => JSX.Element;

package/components/SideNavigation/SideNavigation.js

@@ -1,5 +1,4 @@
-import { _ as _slicedToArray } from '../../slicedToArray-803a4350.js';
-import React, { useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.js';
 import { IconPanelRight } from '../SVGIcons/IconPanelRight.js';
@@ -16,6 +15,7 @@ import '../Checkbox/Checkbox.js';
 import '../../defineProperty-0a4bc507.js';
 import '../../typeof-6b0bdcf3.js';
 import '../Popover/Popover.js';
+import '../../slicedToArray-803a4350.js';
 import '../../hooks/useGetTooltipStyles.js';
 import '../../hooks/useGetElemSizes.js';
 import '../../hooks/useGetElemPositions.js';
@@ -35,34 +35,17 @@ import '../ButtonIcon/consts.js';
 
 var SideNavigation = function SideNavigation(props) {
   var children = props.children,
-    _props$isOpen = props.isOpen,
-    isOpen = _props$isOpen === void 0 ? true : _props$isOpen,
-    setOpen = props.setOpen,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     logo = props.logo,
     logoClosed = props.logoClosed,
-    logoUrl = props.logoUrl;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPined = _useState2[0],
-    setPined = _useState2[1];
-  var onMouseEnter = function onMouseEnter() {
-    if (!isPined) {
-      setOpen === null || setOpen === void 0 || setOpen(true);
-    }
-  };
-  var onMouseLeave = function onMouseLeave() {
-    if (!isPined) {
-      setOpen === null || setOpen === void 0 || setOpen(false);
-    }
-  };
-  var onPin = function onPin() {
-    setPined(!isPined);
-  };
-  var onClose = function onClose() {
-    setOpen === null || setOpen === void 0 || setOpen(false);
-  };
+    logoUrl = props.logoUrl,
+    isOpen = props.isOpen,
+    isPined = props.isPined,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onPin = props.onPin,
+    onClose = props.onClose;
   return /*#__PURE__*/React.createElement("div", {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

package/components/SideNavigation/index.js

@@ -1,6 +1,5 @@
 export { SideNavigation } from './SideNavigation.js';
 export { NavigationItem } from './NavigationItem/index.js';
-import '../../slicedToArray-803a4350.js';
 import 'react';
 import 'classnames';
 import '../ButtonIcon/ButtonIcon.js';
@@ -12,6 +11,7 @@ import '../Checkbox/Checkbox.js';
 import '../../defineProperty-0a4bc507.js';
 import '../../typeof-6b0bdcf3.js';
 import '../Popover/Popover.js';
+import '../../slicedToArray-803a4350.js';
 import '../../hooks/useGetTooltipStyles.js';
 import '../../hooks/useGetElemSizes.js';
 import '../../hooks/useGetElemPositions.js';

package/components/SideNavigation/types.d.ts

@@ -1,6 +1,15 @@
 import type { JSX, ReactNode } from 'react';
 import type { ISVGIconProps } from '../SVGIcons/types';
-export interface TSideNavigationPropTypes {
+export interface SideNavigationControls {
+    isPined?: boolean;
+    isOpen?: boolean;
+    onOpen?: (open: boolean) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onPin?: () => void;
+    onClose?: () => void;
+}
+export interface TSideNavigationPropTypes extends SideNavigationControls {
     className?: string;
     logo?: string;
     logoUrl?: string;
@@ -9,8 +18,6 @@ export interface TSideNavigationPropTypes {
     showAction?: boolean;
     children: ReactNode;
     pinSidebar?: boolean;
-    isOpen?: boolean;
-    setOpen?: (arg: boolean) => void;
     sidebarOpenIconProps?: ISVGIconProps;
     sidebarCloseIconProps?: ISVGIconProps;
 }

package/hooks/useSideNavigation.d.ts

@@ -0,0 +1,2 @@
+import type { SideNavigationControls } from '../components/SideNavigation/types';
+export declare const useSideNavigationControls: () => SideNavigationControls;

package/hooks/useSideNavigation.js

@@ -0,0 +1,47 @@
+import { _ as _slicedToArray } from '../slicedToArray-803a4350.js';
+import { useState, useCallback } from 'react';
+
+var useSideNavigationControls = function useSideNavigationControls() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPined = _useState2[0],
+    setPined = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var onOpen = useCallback(function (open) {
+    setIsOpen(open);
+  }, []);
+  var onMouseEnter = useCallback(function () {
+    if (!isPined) {
+      onOpen(true);
+    }
+  }, [isPined, onOpen]);
+  var onMouseLeave = useCallback(function () {
+    if (!isPined) {
+      onOpen(false);
+    }
+  }, [isPined, onOpen]);
+  var onPin = useCallback(function () {
+    setPined(function (prev) {
+      var newState = !prev;
+      if (!newState) onOpen(false);
+      return newState;
+    });
+  }, [onOpen]);
+  var onClose = useCallback(function () {
+    onOpen(false);
+  }, [onOpen]);
+  return {
+    isPined: isPined,
+    isOpen: isOpen,
+    onOpen: onOpen,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onPin: onPin,
+    onClose: onClose
+  };
+};
+
+export { useSideNavigationControls };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-ui-library",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "UI library for AM",
   "main": "./index.js",
   "module": "./index.js",

package/stories/SideNavigation.stories.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { TSideNavigationPropTypes } from '../components/SideNavigation/types';
 declare const _default: {
     title: string;
-    component: (props: TSideNavigationPropTypes) => React.JSX.Element;
+    component: (props: TSideNavigationPropTypes) => JSX.Element;
     argTypes: {};
 };
 export default _default;