@nulogy/components 11.2.0 → 11.3.1

package/dist/main.js

@@ -27720,8 +27720,10 @@
     })(function (_ref3) {
       var theme = _ref3.theme;
       return {
-        position: "sticky",
+        position: "fixed",
         bottom: 0,
+        left: 0,
+        right: 0,
         marginLeft: theme.space.x1,
         marginRight: theme.space.x1,
         padding: theme.space.x2,
@@ -45028,57 +45030,61 @@
       };
     }, addStyledProps);
 
-    var ApplicationFrame = function ApplicationFrame(_a) {
-      var navBar = _a.navBar,
-          children = _a.children,
-          environment = _a.environment,
-          props = __rest$3(_a, ["navBar", "children", "environment"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({
-        flexDirection: "column",
-        minHeight: "100vh"
-      }, props), /*#__PURE__*/React__default["default"].createElement(Box, {
-        position: "sticky",
-        top: "0",
-        zIndex: "navBar"
-      }, environment && /*#__PURE__*/React__default["default"].createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default["default"].createElement(Flex, {
-        flexDirection: "column",
-        position: "relative",
-        flexGrow: 1
-      }, children));
-    };
+    function useMediaQuery(q) {
+      var _a;
 
-    function useMediaQuery(query) {
       var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
-
-      var getMatches = function getMatches(query) {
+      var theme = styled.useTheme();
+      var query = ((_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a[q]) ? "(min-width: " + theme.breakpoints[q] + ")" : q;
+      var getMatches = React.useCallback(function (query) {
         if (isUnsupported) {
           return false;
         }
 
         return window.matchMedia(query).matches;
-      };
+      }, [isUnsupported]);
 
       var _useState = React.useState(getMatches(query)),
           matches = _useState[0],
           setMatches = _useState[1];
 
-      function handleChange() {
-        setMatches(getMatches(query));
-      }
-
       React.useEffect(function () {
         if (isUnsupported) return;
         var matchMedia = window.matchMedia(query);
+
+        function handleChange() {
+          setMatches(getMatches(query));
+        }
+
         handleChange();
         matchMedia.addEventListener("change", handleChange);
         return function () {
           matchMedia.removeEventListener("change", handleChange);
         };
-      }, [query]);
+      }, [getMatches, isUnsupported, query]);
       return matches;
     }
 
+    var ApplicationFrame = function ApplicationFrame(_a) {
+      var navBar = _a.navBar,
+          children = _a.children,
+          environment = _a.environment,
+          props = __rest$3(_a, ["navBar", "children", "environment"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({
+        flexDirection: "column",
+        minHeight: "100vh"
+      }, props), /*#__PURE__*/React__default["default"].createElement(Box, {
+        position: "sticky",
+        top: "0",
+        zIndex: "navBar"
+      }, environment && /*#__PURE__*/React__default["default"].createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default["default"].createElement(Flex, {
+        flexDirection: "column",
+        position: "relative",
+        flexGrow: 1
+      }, children));
+    };
+
     var Header = function Header(_a) {
       var _b, _c;
 
@@ -49829,6 +49835,7 @@
 
     var de_DE = {
       "close menu": "Men\xFC schlie\xDFen",
+      "menu options": "Men\xFCoptionen",
       close: "Schlie\xDFen",
       "collapse row": "Zeile verbergen",
       "date range": "Datumsbereich",
@@ -49870,6 +49877,7 @@
     };
     var en_US = {
       "close menu": "Close menu",
+      "menu options": "Menu options",
       close: "Close",
       "collapse row": "Collapse row",
       "date range": "Date range",
@@ -49911,6 +49919,7 @@
     };
     var es_MX = {
       "close menu": "Cerrar men\xFA",
+      "menu options": "Opciones del men\xFA",
       close: "Cerrar",
       "collapse row": "Colapsar fila",
       "date range": "Rango de fechas",
@@ -49952,6 +49961,7 @@
     };
     var fr_FR = {
       "close menu": "Fermer le menu",
+      "menu options": "Options du menu",
       close: "Fermer",
       "collapse row": "R\xE9duire la ligne",
       "date range": "Plage de dates",
@@ -49993,6 +50003,7 @@
     };
     var nl_NL = {
       "close menu": "Menu sluiten",
+      "menu options": "Menu-opties",
       close: "Sluiten",
       "collapse row": "Rij samenvouwen",
       "date range": "Datumbereik",
@@ -50034,6 +50045,7 @@
     };
     var pl_PL = {
       "close menu": "Zamknij menu",
+      "menu options": "Opcje menu",
       close: "Zamknij",
       "collapse row": "Zwi\u0144 wiersz",
       "date range": "Zakres daty",
@@ -50075,6 +50087,7 @@
     };
     var pt_BR = {
       "close menu": "Fechar menu",
+      "menu options": "Op\xE7\xF5es do menu",
       close: "Fechar",
       "collapse row": "Recolher fila",
       "date range": "Intervalo de datas",
@@ -50115,7 +50128,8 @@
       "time range": "Intervalo de hor\xE1rios"
     };
     var ro_RO = {
-      "close menu": "Close menu",
+      "close menu": "\xCEnchidere meniu",
+      "menu options": "Op\u021Biuni meniu",
       close: "\xCEnchidere",
       "collapse row": "Restr\xE2ngere r\xE2nd",
       "date range": "Interval dat\u0103",
@@ -50157,6 +50171,7 @@
     };
     var zh_CN = {
       "close menu": "\u5173\u95ED\u83DC\u5355",
+      "menu options": "\u83DC\u5355\u9009\u9879",
       close: "\u5173\u95ED",
       "collapse row": "\u6298\u53E0\u884C",
       "date range": "\u65E5\u671F\u8303\u56F4",
@@ -50321,7 +50336,13 @@
           small: "768px",
           medium: "1024px",
           large: "1360px",
-          extraLarge: "1920px"
+          extraLarge: "1920px",
+          phonePortrait: "320px",
+          phoneLandscape: "640px",
+          tabletPortrait: "768px",
+          tabletLandscape: "1024px",
+          laptop: "1280px",
+          desktop: "1440px"
         },
         zIndices: {
           content: 100,
@@ -50469,7 +50490,13 @@
           small: "768px",
           medium: "1024px",
           large: "1360px",
-          extraLarge: "1920px"
+          extraLarge: "1920px",
+          phonePortrait: "320px",
+          phoneLandscape: "640px",
+          tabletPortrait: "768px",
+          tabletLandscape: "1024px",
+          laptop: "1280px",
+          desktop: "1440px"
         },
         zIndices: {
           content: 100,
@@ -50617,7 +50644,13 @@
           small: "768px",
           medium: "1024px",
           large: "1360px",
-          extraLarge: "1920px"
+          extraLarge: "1920px",
+          phonePortrait: "320px",
+          phoneLandscape: "640px",
+          tabletPortrait: "768px",
+          tabletLandscape: "1024px",
+          laptop: "1280px",
+          desktop: "1440px"
         },
         zIndices: {
           content: 100,
@@ -50765,7 +50798,13 @@
           small: "768px",
           medium: "1024px",
           large: "1360px",
-          extraLarge: "1920px"
+          extraLarge: "1920px",
+          phonePortrait: "320px",
+          phoneLandscape: "640px",
+          tabletPortrait: "768px",
+          tabletLandscape: "1024px",
+          laptop: "1280px",
+          desktop: "1440px"
         },
         zIndices: {
           content: 100,
@@ -54558,6 +54597,7 @@
     exports.TruncatedText = TruncatedText;
     exports.addStyledProps = addStyledProps;
     exports.toast = toast;
+    exports.useMediaQuery = useMediaQuery;
     exports.useWindowDimensions = useWindowDimensions;
 
     Object.defineProperty(exports, '__esModule', { value: true });

package/dist/main.module.js

@@ -27703,8 +27703,10 @@ var Footer = styled.div.withConfig({
 })(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    position: "sticky",
+    position: "fixed",
     bottom: 0,
+    left: 0,
+    right: 0,
     marginLeft: theme.space.x1,
     marginRight: theme.space.x1,
     padding: theme.space.x2,
@@ -45011,57 +45013,61 @@ var Divider$1 = styled.hr.withConfig({
   };
 }, addStyledProps);
 
-var ApplicationFrame = function ApplicationFrame(_a) {
-  var navBar = _a.navBar,
-      children = _a.children,
-      environment = _a.environment,
-      props = __rest$3(_a, ["navBar", "children", "environment"]);
-
-  return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
-    flexDirection: "column",
-    minHeight: "100vh"
-  }, props), /*#__PURE__*/React__default.createElement(Box, {
-    position: "sticky",
-    top: "0",
-    zIndex: "navBar"
-  }, environment && /*#__PURE__*/React__default.createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default.createElement(Flex, {
-    flexDirection: "column",
-    position: "relative",
-    flexGrow: 1
-  }, children));
-};
+function useMediaQuery(q) {
+  var _a;
 
-function useMediaQuery(query) {
   var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
-
-  var getMatches = function getMatches(query) {
+  var theme = useTheme();
+  var query = ((_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a[q]) ? "(min-width: " + theme.breakpoints[q] + ")" : q;
+  var getMatches = useCallback(function (query) {
     if (isUnsupported) {
       return false;
     }
 
     return window.matchMedia(query).matches;
-  };
+  }, [isUnsupported]);
 
   var _useState = useState(getMatches(query)),
       matches = _useState[0],
       setMatches = _useState[1];
 
-  function handleChange() {
-    setMatches(getMatches(query));
-  }
-
   useEffect(function () {
     if (isUnsupported) return;
     var matchMedia = window.matchMedia(query);
+
+    function handleChange() {
+      setMatches(getMatches(query));
+    }
+
     handleChange();
     matchMedia.addEventListener("change", handleChange);
     return function () {
       matchMedia.removeEventListener("change", handleChange);
     };
-  }, [query]);
+  }, [getMatches, isUnsupported, query]);
   return matches;
 }
 
+var ApplicationFrame = function ApplicationFrame(_a) {
+  var navBar = _a.navBar,
+      children = _a.children,
+      environment = _a.environment,
+      props = __rest$3(_a, ["navBar", "children", "environment"]);
+
+  return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
+    flexDirection: "column",
+    minHeight: "100vh"
+  }, props), /*#__PURE__*/React__default.createElement(Box, {
+    position: "sticky",
+    top: "0",
+    zIndex: "navBar"
+  }, environment && /*#__PURE__*/React__default.createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default.createElement(Flex, {
+    flexDirection: "column",
+    position: "relative",
+    flexGrow: 1
+  }, children));
+};
+
 var Header = function Header(_a) {
   var _b, _c;
 
@@ -49812,6 +49818,7 @@ var i18next = new I18n();
 
 var de_DE = {
   "close menu": "Men\xFC schlie\xDFen",
+  "menu options": "Men\xFCoptionen",
   close: "Schlie\xDFen",
   "collapse row": "Zeile verbergen",
   "date range": "Datumsbereich",
@@ -49853,6 +49860,7 @@ var de_DE = {
 };
 var en_US = {
   "close menu": "Close menu",
+  "menu options": "Menu options",
   close: "Close",
   "collapse row": "Collapse row",
   "date range": "Date range",
@@ -49894,6 +49902,7 @@ var en_US = {
 };
 var es_MX = {
   "close menu": "Cerrar men\xFA",
+  "menu options": "Opciones del men\xFA",
   close: "Cerrar",
   "collapse row": "Colapsar fila",
   "date range": "Rango de fechas",
@@ -49935,6 +49944,7 @@ var es_MX = {
 };
 var fr_FR = {
   "close menu": "Fermer le menu",
+  "menu options": "Options du menu",
   close: "Fermer",
   "collapse row": "R\xE9duire la ligne",
   "date range": "Plage de dates",
@@ -49976,6 +49986,7 @@ var fr_FR = {
 };
 var nl_NL = {
   "close menu": "Menu sluiten",
+  "menu options": "Menu-opties",
   close: "Sluiten",
   "collapse row": "Rij samenvouwen",
   "date range": "Datumbereik",
@@ -50017,6 +50028,7 @@ var nl_NL = {
 };
 var pl_PL = {
   "close menu": "Zamknij menu",
+  "menu options": "Opcje menu",
   close: "Zamknij",
   "collapse row": "Zwi\u0144 wiersz",
   "date range": "Zakres daty",
@@ -50058,6 +50070,7 @@ var pl_PL = {
 };
 var pt_BR = {
   "close menu": "Fechar menu",
+  "menu options": "Op\xE7\xF5es do menu",
   close: "Fechar",
   "collapse row": "Recolher fila",
   "date range": "Intervalo de datas",
@@ -50098,7 +50111,8 @@ var pt_BR = {
   "time range": "Intervalo de hor\xE1rios"
 };
 var ro_RO = {
-  "close menu": "Close menu",
+  "close menu": "\xCEnchidere meniu",
+  "menu options": "Op\u021Biuni meniu",
   close: "\xCEnchidere",
   "collapse row": "Restr\xE2ngere r\xE2nd",
   "date range": "Interval dat\u0103",
@@ -50140,6 +50154,7 @@ var ro_RO = {
 };
 var zh_CN = {
   "close menu": "\u5173\u95ED\u83DC\u5355",
+  "menu options": "\u83DC\u5355\u9009\u9879",
   close: "\u5173\u95ED",
   "collapse row": "\u6298\u53E0\u884C",
   "date range": "\u65E5\u671F\u8303\u56F4",
@@ -50304,7 +50319,13 @@ var themes = {
       small: "768px",
       medium: "1024px",
       large: "1360px",
-      extraLarge: "1920px"
+      extraLarge: "1920px",
+      phonePortrait: "320px",
+      phoneLandscape: "640px",
+      tabletPortrait: "768px",
+      tabletLandscape: "1024px",
+      laptop: "1280px",
+      desktop: "1440px"
     },
     zIndices: {
       content: 100,
@@ -50452,7 +50473,13 @@ var themes = {
       small: "768px",
       medium: "1024px",
       large: "1360px",
-      extraLarge: "1920px"
+      extraLarge: "1920px",
+      phonePortrait: "320px",
+      phoneLandscape: "640px",
+      tabletPortrait: "768px",
+      tabletLandscape: "1024px",
+      laptop: "1280px",
+      desktop: "1440px"
     },
     zIndices: {
       content: 100,
@@ -50600,7 +50627,13 @@ var themes = {
       small: "768px",
       medium: "1024px",
       large: "1360px",
-      extraLarge: "1920px"
+      extraLarge: "1920px",
+      phonePortrait: "320px",
+      phoneLandscape: "640px",
+      tabletPortrait: "768px",
+      tabletLandscape: "1024px",
+      laptop: "1280px",
+      desktop: "1440px"
     },
     zIndices: {
       content: 100,
@@ -50748,7 +50781,13 @@ var themes = {
       small: "768px",
       medium: "1024px",
       large: "1360px",
-      extraLarge: "1920px"
+      extraLarge: "1920px",
+      phonePortrait: "320px",
+      phoneLandscape: "640px",
+      tabletPortrait: "768px",
+      tabletLandscape: "1024px",
+      laptop: "1280px",
+      desktop: "1440px"
     },
     zIndices: {
       content: 100,
@@ -54442,4 +54481,4 @@ var TruncatedText = function TruncatedText(_a) {
   }, props), children);
 };
 
-export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBarBackground, NotificationTypes, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, toast, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBarBackground, NotificationTypes, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, toast, useMediaQuery, useWindowDimensions };

package/dist/src/TopBar/TopBar.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { BackLink } from "./components/BackLink";
+import { Menu } from "./components/Menu";
+import { MenuItem } from "./components/MenuItem";
+import { PageTitle } from "./components/PageTitle";
+export interface TopBarProps {
+    children?: React.ReactNode;
+}
+export default function Root({ children }: TopBarProps): React.JSX.Element;
+export declare const TopBar: {
+    Root: typeof Root;
+    PageTitle: typeof PageTitle;
+    BackLink: typeof BackLink;
+    Menu: typeof Menu;
+    MenuItem: typeof MenuItem;
+};

package/dist/src/TopBar/TopBar.styled.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { StyledProps } from "../StyledProps";
+declare const MenuItemList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+declare const Header: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+declare const Navigation: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+declare const StylelessButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledProps, never>;
+declare const MenuButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledProps, never>;
+declare const NavigationItemsList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+declare const StyledBackLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
+declare const StyledPageTitle: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+declare const Overlay: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("@reach/utils/dist/declarations/src/polymorphic").Merge<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+    as?: "div";
+}>>, import("styled-components").DefaultTheme, {}, never>;
+declare const TileLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
+declare const StyledMenuItem: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, import("styled-components").DefaultTheme, {}, never>;
+export { Navigation, Header, NavigationItemsList, StyledBackLink, StyledPageTitle, Overlay, TileLink, StylelessButton, MenuItemList, MenuButton, StyledMenuItem, };

package/dist/src/TopBar/components/BackLink.d.ts

@@ -0,0 +1,7 @@
+import React, { ComponentProps } from "react";
+import { MaxWidthProps } from "styled-system";
+import { StyledBackLink } from "../TopBar.styled";
+interface BackLinkProps extends MaxWidthProps, ComponentProps<typeof StyledBackLink> {
+}
+export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): React.JSX.Element;
+export {};

package/dist/src/TopBar/components/Menu.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function Menu({ children, defaultOpened, ...props }: {
+    defaultOpened?: boolean;
+    children: React.ReactNode;
+    "aria-label"?: string;
+}): React.JSX.Element;

package/dist/src/TopBar/components/MenuItem.d.ts

@@ -0,0 +1,11 @@
+import { IconName } from "@nulogy/icons";
+import React, { ComponentProps } from "react";
+import { TileLink } from "../TopBar.styled";
+interface MenuItemProps extends ComponentProps<typeof TileLink> {
+    title: string;
+    description?: string;
+    icon: IconName;
+}
+export declare function MenuItem({ description, title, icon, ...props }: MenuItemProps): React.JSX.Element;
+export type MenuItems = MenuItemProps[];
+export {};

package/dist/src/TopBar/components/PageTitle.d.ts

@@ -0,0 +1,3 @@
+import React, { ComponentProps } from "react";
+import { StyledPageTitle } from "../TopBar.styled";
+export declare function PageTitle({ children, ...props }: ComponentProps<typeof StyledPageTitle>): React.JSX.Element;

package/dist/src/TopBar/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TOPBAR: {
+    themedHeight: string;
+};

package/dist/src/TopBar/stories/TopBar.backButton.story.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+declare const _default: {
+    parameters: {
+        layout: string;
+        chromatic: {
+            modes: {
+                locale: string;
+                desktopScale: string;
+                theme: string;
+                viewports: number[];
+            };
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const WithNoLabel: () => React.JSX.Element;
+export declare const WithACustomMaxWidth: () => React.JSX.Element;
+export declare const WithARouterLink: () => React.JSX.Element;

package/dist/src/TopBar/stories/TopBar.menu.story.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+declare const _default: {
+    parameters: {
+        layout: string;
+        chromatic: {
+            delay: number;
+            modes: {
+                locale: string;
+                desktopScale: string;
+                theme: string;
+                viewports: number[];
+            };
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const withDefaultOpenMenu: () => React.JSX.Element;
+export declare const WithOneMenuItem: () => React.JSX.Element;
+export declare const WithTwoItems: () => React.JSX.Element;
+export declare const WithThreeItems: () => React.JSX.Element;
+export declare const WithRouterLinks: () => React.JSX.Element;

package/dist/src/TopBar/stories/TopBar.story.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+        chromatic: {
+            modes: {
+                locale: string;
+                desktopScale: string;
+                theme: string;
+                viewports: number[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithALongTitle: () => React.JSX.Element;
+export declare const WithAnApplicationFrame: () => React.JSX.Element;

package/dist/src/TopBar/stories/fixtures.d.ts

@@ -0,0 +1,2 @@
+import { MenuItems } from "../components/MenuItem";
+export declare const menuItems: MenuItems;

package/dist/src/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1,2 +1,4 @@
-declare function useMediaQuery(query: string): boolean;
+import { Breakpoints } from "../../theme";
+type Query = keyof Breakpoints | (string & {});
+declare function useMediaQuery(q: Query): boolean;
 export default useMediaQuery;

package/dist/src/index.d.ts

@@ -20,6 +20,7 @@ export { DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText
 export { FieldLabel, HelpText, RequirementText } from "./FieldLabel";
 export { Flex } from "./Flex";
 export { Field, Fieldset, Form, FormSection } from "./Form";
+export { default as useMediaQuery } from "./hooks/useMediaQuery";
 export { Icon, InlineIcon } from "./Icon";
 export { Input } from "./Input";
 export { ApplicationFrame, Header, Page, Sidebar } from "./Layout";

package/dist/src/theme/theme.type.d.ts

@@ -112,6 +112,12 @@ export interface Breakpoints {
     medium: string;
     large: string;
     extraLarge: string;
+    phonePortrait: string;
+    phoneLandscape: string;
+    tabletPortrait: string;
+    tabletLandscape: string;
+    laptop: string;
+    desktop: string;
 }
 interface ZIndices {
     content: number;

package/dist/src/theme/useNDSTheme.d.ts

@@ -8,6 +8,12 @@ export declare const buildBreakPoints: (breakpointsConfig: Readonly<Breakpoints>
     medium: string;
     large: string;
     extraLarge: string;
+    phonePortrait: string;
+    phoneLandscape: string;
+    tabletPortrait: string;
+    tabletLandscape: string;
+    laptop: string;
+    desktop: string;
 };
 export declare const getThemeByVariant: (variant: ComponentVariant, isTabletSize: boolean, featureFlags: FeatureFlags) => DefaultNDSThemeType;
 export declare function useNDSTheme(variant?: ComponentVariant, customTheme?: ThemeType): DefaultNDSThemeType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "11.2.0",
+  "version": "11.3.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -16,7 +16,8 @@
     "clean:storybook": "rm -rf node_modules/.cache/storybook && rm -rf ./storybook-static",
     "build": "rollup -c",
     "build:storybook": "build-storybook",
-    "check": "yarn check:types && yarn check:lint && yarn check:format",
+    "warn:prepush": "echo \"Make sure you also run all the other CI steps before pushing by running 'yarn ci'\"",
+    "check": "yarn warn:prepush && yarn check:types && yarn check:lint && yarn check:format",
     "check:types": "tsc && cd cypress && tsc --noEmit",
     "check:lint": "eslint --config ./.eslintrc .'*/**/*.{js,ts,tsx}'",
     "check:format": "prettier -c .",
@@ -68,7 +69,7 @@
     "@babel/preset-env": "7.3.1",
     "@babel/preset-typescript": "^7.10.4",
     "@nulogy/eslint-config-nulogy": "^1.0.0",
-    "@nulogy/icons": "^4.36.0",
+    "@nulogy/icons": "^4.37.2",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@semantic-release/changelog": "^6.0.2",
@@ -173,7 +174,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-push": "yarn run ci"
+      "pre-push": "yarn run check"
     }
   },
   "jest": {