@nulogy/components 8.4.0 → 8.4.2

package/dist/main.js

@@ -23339,20 +23339,23 @@
     var themeContext = React__default['default'].useContext(styled.ThemeContext);
     var spaceProps = getSubset(props, propTypes.space);
     var reactSelectRef = React__default['default'].useRef(null);
+    var optionsRef = React__default['default'].useRef(options);
     React__default['default'].useEffect(function () {
       checkOptionsAreValid(options);
+      optionsRef.current = options;
     }, [options]);
     var handleChange = React__default['default'].useCallback(function (option) {
       onChange && onChange(extractValue(option, multiselect));
     }, [multiselect, onChange]);
     var handlePaste = React__default['default'].useCallback(function (e) {
       return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
-        var currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
+        var options, currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
         return regenerator.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 e.preventDefault();
+                options = optionsRef.current;
                 currentRef = reactSelectRef.current;
                 currentValue = currentRef.state.value || [];
                 clipboardData = e.clipboardData.getData("text/plain") || "";
@@ -23385,20 +23388,20 @@
                 });
                 handleChange(newValue);
 
-              case 10:
+              case 11:
               case "end":
                 return _context.stop();
             }
           }
         }, _callee);
       }));
-    }, [options]);
+    }, []);
 
     var _SelectInput = React__default['default'].useCallback(function (inputProps) {
       return /*#__PURE__*/React__default['default'].createElement(SelectInput, Object.assign({}, inputProps, multiselect ? {
         onPaste: handlePaste
       } : {}));
-    }, [handlePaste, multiselect]);
+    }, [multiselect]);
 
     React__default['default'].useEffect(function () {
       if (ref) {
@@ -42696,6 +42699,162 @@
     onHidden: function onHidden() {}
   };
 
+  var SummaryContext = /*#__PURE__*/React.createContext(undefined);
+  function useSummaryContext() {
+    var context = React.useContext(SummaryContext);
+
+    if (!context) {
+      throw new Error("Summary compound components cannot be rendered outside the Summary component");
+    }
+
+    return context;
+  }
+  var SummaryContextProvider = function SummaryContextProvider(_ref) {
+    var breakpoint = _ref.breakpoint,
+        children = _ref.children;
+    return /*#__PURE__*/React__default['default'].createElement(SummaryContext.Provider, {
+      value: {
+        breakpoint: breakpoint
+      }
+    }, children);
+  };
+
+  var SummaryWrapper = styled__default['default'](Box).withConfig({
+    displayName: "Summary__SummaryWrapper",
+    componentId: "sc-1hzufqo-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      display: "flex",
+      background: theme.colors.white,
+      gap: theme.space.x2,
+      paddingTop: theme.space.x1,
+      paddingBottom: theme.space.x1,
+      paddingLeft: theme.space.x2,
+      paddingRight: theme.space.x2,
+      borderRadius: theme.radii.medium,
+      width: "fit-content"
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      background: "none",
+      flexFlow: "wrap",
+      padding: 0,
+      paddingTop: theme.space.x2,
+      rowGap: 0
+    }, _ref2;
+  });
+  var DEFAULT_BREAKPOINT = Theme.breakpoints.medium;
+
+  var Summary = function Summary(_a) {
+    var _a$breakpoint = _a.breakpoint,
+        breakpoint = _a$breakpoint === void 0 ? DEFAULT_BREAKPOINT : _a$breakpoint,
+        children = _a.children,
+        rest = __rest(_a, ["breakpoint", "children"]);
+
+    var breakpointPx = pixelDigitsFrom$1(breakpoint);
+    return /*#__PURE__*/React__default['default'].createElement(SummaryContextProvider, {
+      breakpoint: breakpointPx
+    }, /*#__PURE__*/React__default['default'].createElement(SummaryWrapper, Object.assign({
+      breakpoint: breakpointPx
+    }, rest), children));
+  };
+
+  function useMediaQuery(query) {
+    var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
+
+    var getMatches = function getMatches(query) {
+      if (isUnsupported) {
+        return false;
+      }
+
+      return window.matchMedia(query).matches;
+    };
+
+    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);
+      handleChange();
+      matchMedia.addEventListener("change", handleChange);
+      return function () {
+        matchMedia.removeEventListener("change", handleChange);
+      };
+    }, [query]);
+    return matches;
+  }
+
+  var SummaryItemWrapper = styled__default['default'](Flex).withConfig({
+    displayName: "SummaryItem__SummaryItemWrapper",
+    componentId: "kqzify-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      gap: theme.space.half,
+      flexDirection: "column"
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      flexDirection: "row"
+    }, _ref2;
+  });
+
+  var SummaryItem = function SummaryItem(_a) {
+    var value = _a.value,
+        status = _a.status,
+        rest = __rest(_a, ["value", "status"]);
+
+    var _useSummaryContext = useSummaryContext(),
+        breakpoint = _useSummaryContext.breakpoint;
+
+    var matches = useMediaQuery("(max-width: " + breakpoint + "px)");
+    delete rest["children"];
+    return /*#__PURE__*/React__default['default'].createElement(SummaryItemWrapper, Object.assign({
+      breakpoint: breakpoint
+    }, rest), /*#__PURE__*/React__default['default'].createElement(Text, {
+      fontWeight: "medium",
+      fontSize: !matches ? "heading4" : undefined
+    }, value), status);
+  };
+
+  var Divider$1 = styled__default['default'](Box).withConfig({
+    displayName: "SummaryDivider__Divider",
+    componentId: "sc-1amkaa8-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      display: "block",
+      alignSelf: "stretch",
+      width: 1,
+      marginRight: theme.space.x1,
+      marginLeft: theme.space.x1,
+      background: theme.colors.grey
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      display: "none"
+    }, _ref2;
+  });
+
+  var SummaryDivider = function SummaryDivider(props) {
+    var _useSummaryContext = useSummaryContext(),
+        breakpoint = _useSummaryContext.breakpoint;
+
+    return /*#__PURE__*/React__default['default'].createElement(Divider$1, Object.assign({
+      breakpoint: pixelDigitsFrom$1(breakpoint)
+    }, props));
+  };
+
   var StatelessNavBarDropdownMenuClass = /*#__PURE__*/function (_React$Component) {
     _inheritsLoose__default['default'](StatelessNavBarDropdownMenuClass, _React$Component);
 
@@ -50746,24 +50905,6 @@
     }, children));
   };
 
-  var useMediaQuery = function useMediaQuery(query) {
-    var _useState = React.useState(window.matchMedia(query).matches),
-        matches = _useState[0],
-        setMatches = _useState[1];
-
-    React.useEffect(function () {
-      var handler = function handler(e) {
-        setMatches(e.matches);
-      };
-
-      window.matchMedia(query).addEventListener("change", handler);
-      return function () {
-        window.removeEventListener("change", handler);
-      };
-    }, []);
-    return matches;
-  };
-
   var Header = function Header(_a) {
     var _b, _c;
 
@@ -51245,6 +51386,9 @@
   exports.SmallNavBar = SmallNavBar;
   exports.SortingTable = SortingTable;
   exports.StatusIndicator = StatusIndicator;
+  exports.Summary = Summary;
+  exports.SummaryDivider = SummaryDivider;
+  exports.SummaryItem = SummaryItem;
   exports.Switch = Switch;
   exports.Switcher = Switcher;
   exports.Tab = Tab;

package/dist/main.module.js

@@ -23313,20 +23313,23 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var themeContext = React__default.useContext(ThemeContext$1);
   var spaceProps = getSubset(props, propTypes.space);
   var reactSelectRef = React__default.useRef(null);
+  var optionsRef = React__default.useRef(options);
   React__default.useEffect(function () {
     checkOptionsAreValid(options);
+    optionsRef.current = options;
   }, [options]);
   var handleChange = React__default.useCallback(function (option) {
     onChange && onChange(extractValue(option, multiselect));
   }, [multiselect, onChange]);
   var handlePaste = React__default.useCallback(function (e) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
-      var currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
+      var options, currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
       return regenerator.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               e.preventDefault();
+              options = optionsRef.current;
               currentRef = reactSelectRef.current;
               currentValue = currentRef.state.value || [];
               clipboardData = e.clipboardData.getData("text/plain") || "";
@@ -23359,20 +23362,20 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
               });
               handleChange(newValue);
 
-            case 10:
+            case 11:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     }));
-  }, [options]);
+  }, []);
 
   var _SelectInput = React__default.useCallback(function (inputProps) {
     return /*#__PURE__*/React__default.createElement(SelectInput, Object.assign({}, inputProps, multiselect ? {
       onPaste: handlePaste
     } : {}));
-  }, [handlePaste, multiselect]);
+  }, [multiselect]);
 
   React__default.useEffect(function () {
     if (ref) {
@@ -42670,6 +42673,162 @@ Toast.defaultProps = {
   onHidden: function onHidden() {}
 };
 
+var SummaryContext = /*#__PURE__*/createContext(undefined);
+function useSummaryContext() {
+  var context = useContext(SummaryContext);
+
+  if (!context) {
+    throw new Error("Summary compound components cannot be rendered outside the Summary component");
+  }
+
+  return context;
+}
+var SummaryContextProvider = function SummaryContextProvider(_ref) {
+  var breakpoint = _ref.breakpoint,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(SummaryContext.Provider, {
+    value: {
+      breakpoint: breakpoint
+    }
+  }, children);
+};
+
+var SummaryWrapper = styled(Box).withConfig({
+  displayName: "Summary__SummaryWrapper",
+  componentId: "sc-1hzufqo-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    display: "flex",
+    background: theme.colors.white,
+    gap: theme.space.x2,
+    paddingTop: theme.space.x1,
+    paddingBottom: theme.space.x1,
+    paddingLeft: theme.space.x2,
+    paddingRight: theme.space.x2,
+    borderRadius: theme.radii.medium,
+    width: "fit-content"
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    background: "none",
+    flexFlow: "wrap",
+    padding: 0,
+    paddingTop: theme.space.x2,
+    rowGap: 0
+  }, _ref2;
+});
+var DEFAULT_BREAKPOINT = Theme.breakpoints.medium;
+
+var Summary = function Summary(_a) {
+  var _a$breakpoint = _a.breakpoint,
+      breakpoint = _a$breakpoint === void 0 ? DEFAULT_BREAKPOINT : _a$breakpoint,
+      children = _a.children,
+      rest = __rest(_a, ["breakpoint", "children"]);
+
+  var breakpointPx = pixelDigitsFrom$1(breakpoint);
+  return /*#__PURE__*/React__default.createElement(SummaryContextProvider, {
+    breakpoint: breakpointPx
+  }, /*#__PURE__*/React__default.createElement(SummaryWrapper, Object.assign({
+    breakpoint: breakpointPx
+  }, rest), children));
+};
+
+function useMediaQuery(query) {
+  var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
+
+  var getMatches = function getMatches(query) {
+    if (isUnsupported) {
+      return false;
+    }
+
+    return window.matchMedia(query).matches;
+  };
+
+  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);
+    handleChange();
+    matchMedia.addEventListener("change", handleChange);
+    return function () {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+  return matches;
+}
+
+var SummaryItemWrapper = styled(Flex).withConfig({
+  displayName: "SummaryItem__SummaryItemWrapper",
+  componentId: "kqzify-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    gap: theme.space.half,
+    flexDirection: "column"
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    flexDirection: "row"
+  }, _ref2;
+});
+
+var SummaryItem = function SummaryItem(_a) {
+  var value = _a.value,
+      status = _a.status,
+      rest = __rest(_a, ["value", "status"]);
+
+  var _useSummaryContext = useSummaryContext(),
+      breakpoint = _useSummaryContext.breakpoint;
+
+  var matches = useMediaQuery("(max-width: " + breakpoint + "px)");
+  delete rest["children"];
+  return /*#__PURE__*/React__default.createElement(SummaryItemWrapper, Object.assign({
+    breakpoint: breakpoint
+  }, rest), /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "medium",
+    fontSize: !matches ? "heading4" : undefined
+  }, value), status);
+};
+
+var Divider$1 = styled(Box).withConfig({
+  displayName: "SummaryDivider__Divider",
+  componentId: "sc-1amkaa8-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    display: "block",
+    alignSelf: "stretch",
+    width: 1,
+    marginRight: theme.space.x1,
+    marginLeft: theme.space.x1,
+    background: theme.colors.grey
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    display: "none"
+  }, _ref2;
+});
+
+var SummaryDivider = function SummaryDivider(props) {
+  var _useSummaryContext = useSummaryContext(),
+      breakpoint = _useSummaryContext.breakpoint;
+
+  return /*#__PURE__*/React__default.createElement(Divider$1, Object.assign({
+    breakpoint: pixelDigitsFrom$1(breakpoint)
+  }, props));
+};
+
 var StatelessNavBarDropdownMenuClass = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose$2(StatelessNavBarDropdownMenuClass, _React$Component);
 
@@ -50720,24 +50879,6 @@ var ApplicationFrame = function ApplicationFrame(_a) {
   }, children));
 };
 
-var useMediaQuery = function useMediaQuery(query) {
-  var _useState = useState(window.matchMedia(query).matches),
-      matches = _useState[0],
-      setMatches = _useState[1];
-
-  useEffect(function () {
-    var handler = function handler(e) {
-      setMatches(e.matches);
-    };
-
-    window.matchMedia(query).addEventListener("change", handler);
-    return function () {
-      window.removeEventListener("change", handler);
-    };
-  }, []);
-  return matches;
-};
-
 var Header = function Header(_a) {
   var _b, _c;
 
@@ -51143,4 +51284,4 @@ var SortingTable = function SortingTable(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBar$1 as NavBar, NavBarBackground, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBar$1 as NavBar, NavBarBackground, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, Summary, SummaryDivider, SummaryItem, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };

package/dist/src/Layout/Header.story.d.ts

@@ -11,6 +11,9 @@ declare const _default: {
     title: string;
     parameters: {
         layout: string;
+        chromatic: {
+            viewports: number[];
+        };
     };
 };
 export default _default;

package/dist/src/Select/Select.story.d.ts

@@ -109,3 +109,4 @@ export declare const UsingRefToControlFocus: {
 };
 export declare const WithCustomProps: () => JSX.Element;
 export declare const PasteCsvValueInSelect: (props: any) => JSX.Element;
+export declare const AddNewOptionOnInputChange: (props: any) => JSX.Element;

package/dist/src/Summary/Summary.story.d.ts

@@ -3,14 +3,5 @@ export declare function Default(): JSX.Element;
 export declare function WithMainInfoOnly(): JSX.Element;
 declare const _default: {
     title: string;
-    parameters: {
-        backgrounds: {
-            default: string;
-            values: {
-                name: string;
-                value: string;
-            }[];
-        };
-    };
 };
 export default _default;

package/dist/src/Summary/index.d.ts

@@ -1 +1,3 @@
 export { default as Summary } from "./Summary";
+export { default as SummaryItem } from "./SummaryItem";
+export { default as SummaryDivider } from "./SummaryDivider";

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

@@ -0,0 +1,2 @@
+import useMediaQuery from "./useMediaQuery";
+export default useMediaQuery;

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

@@ -0,0 +1,2 @@
+declare function useMediaQuery(query: string): boolean;
+export default useMediaQuery;

package/dist/src/index.d.ts

@@ -43,6 +43,7 @@ export { Breadcrumbs } from "./Breadcrumbs";
 export { ALL_NDS_LOCALES } from "./locales.const";
 export { TruncatedText } from "./TruncatedText";
 export { Toast } from "./Toast";
+export { Summary, SummaryItem, SummaryDivider } from "./Summary/index";
 export { BrandedNavBar, MenuTrigger, EnvironmentBanner, NavBarBackground, BrandLogoContainer, DesktopMenu, SmallNavBar, } from "./BrandedNavBar";
 export type { MenuTriggerProps, EnvironmentBannerProps, NavBarBackgroundProps, BrandLogoContainerProps, DesktopMenuProps, SmallNavBarProps, RenderMenuButtonProps, } from "./BrandedNavBar";
 export { AsyncSelect } from "./AsyncSelect";

package/dist/src/utils/story/simulatedAPIRequest.d.ts

@@ -0,0 +1,5 @@
+declare const simulatedAPIRequest: (inputValue: string, data: {
+    value: string;
+    label: string;
+}[], milliseconds?: number) => Promise<Response>;
+export default simulatedAPIRequest;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.4.0",
+  "version": "8.4.2",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {

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

@@ -1,2 +0,0 @@
-declare const useMediaQuery: (query: string) => boolean;
-export default useMediaQuery;