@amboss/design-system 1.15.2 → 1.15.3

package/build/cjs/src/index.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var visualConfig = require('../build-tokens/visualConfig.js');
+var react = require('@emotion/react');
+var cache = require('@emotion/cache');
+var Card = require('./components/Card/Card.js');
+var CardBox = require('./components/Card/CardBox.js');
+var Box = require('./components/Box/Box.js');
+var Inline = require('./components/Inline/Inline.js');
+var Stack = require('./components/Stack/Stack.js');
+var Header = require('./components/Typography/Header/Header.js');
+var Text = require('./components/Typography/Text/Text.js');
+var TextClamped = require('./components/Typography/TextClamped/TextClamped.js');
+var StyledText = require('./components/Typography/StyledText/StyledText.js');
+var Link = require('./components/Link/Link.js');
+var Icon = require('./components/Icon/Icon.js');
+var Button = require('./components/Button/Button.js');
+var Divider = require('./components/Divider/Divider.js');
+var Columns = require('./components/Column/Columns.js');
+var Tabs = require('./components/Tabs/Tabs.js');
+var Badge = require('./components/Badge/Badge.js');
+var SearchResult = require('./components/SearchResult/SearchResult.js');
+var ToggleButton = require('./components/Form/ToggleButton/ToggleButton.js');
+var DropdownMenu = require('./components/DropdownMenu/DropdownMenu.js');
+var FormFieldGroup = require('./components/Form/FormFieldGroup/FormFieldGroup.js');
+var Checkbox = require('./components/Form/Checkbox/Checkbox.js');
+var Toggle = require('./components/Form/Toggle/Toggle.js');
+var Radio = require('./components/Form/Radio/Radio.js');
+var RadioButton = require('./components/Form/RadioButton/RadioButton.js');
+var Textarea = require('./components/Form/Textarea/Textarea.js');
+var Select = require('./components/Form/Select/Select.js');
+var SubThemeProvider = require('./components/SubThemeProvider/SubThemeProvider.js');
+var PictogramButton = require('./components/PictogramButton/PictogramButton.js');
+var MediaViewerBar = require('./components/MediaViewerBar/MediaViewerBar.js');
+var SegmentedProgressBar = require('./components/SegmentedProgressBar/SegmentedProgressBar.js');
+var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
+var Container = require('./components/Container/Container.js');
+var RoundButton = require('./components/RoundButton/RoundButton.js');
+var Notification = require('./components/Notification/Notification.js');
+var Logo = require('./components/Logo/Logo.js');
+var MediaItem = require('./components/MediaItem/MediaItem.js');
+var Callout = require('./components/Callout/Callout.js');
+var Modal = require('./components/Patterns/Modal/Modal.js');
+var ButtonGroup = require('./components/Patterns/ButtonGroup/ButtonGroup.js');
+var Collapsible = require('./components/Collapsible/Collapsible.js');
+var LoadingSpinner = require('./components/LoadingSpinner/LoadingSpinner.js');
+var Pagination = require('./components/Pagination/Pagination.js');
+var SegmentedControl = require('./components/Form/SegmentedControl/SegmentedControl.js');
+var Tooltip = require('./components/Tooltip/Tooltip.js');
+var Tag = require('./components/Tag/Tag.js');
+var Input = require('./components/Form/Input/Input.js');
+var PasswordInput = require('./components/Form/PasswordInput/PasswordInput.js');
+var DataTable = require('./components/DataTable/DataTable.js');
+var useDataTableSort = require('./components/DataTable/useDataTableSort.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cache__default = /*#__PURE__*/_interopDefault(cache);
+
+const {
+  dark,
+  light
+} = visualConfig.ambossVisualConfiguration;
+
+Object.defineProperty(exports, 'CacheProvider', {
+  enumerable: true,
+  get: function () { return react.CacheProvider; }
+});
+Object.defineProperty(exports, 'ThemeProvider', {
+  enumerable: true,
+  get: function () { return react.ThemeProvider; }
+});
+Object.defineProperty(exports, 'createCache', {
+  enumerable: true,
+  get: function () { return cache__default.default; }
+});
+exports.Card = Card.Card;
+exports.CardBox = CardBox.CardBox;
+exports.Box = Box.Box;
+exports.Inline = Inline.Inline;
+exports.Stack = Stack.Stack;
+exports.H1 = Header.H1;
+exports.H2 = Header.H2;
+exports.H3 = Header.H3;
+exports.H4 = Header.H4;
+exports.H5 = Header.H5;
+exports.H6 = Header.H6;
+exports.Text = Text.Text;
+exports.TextClamped = TextClamped.TextClamped;
+exports.StyledText = StyledText.StyledText;
+exports.makeStyledJSX = StyledText.makeStyledJSX;
+exports.Link = Link.Link;
+exports.Icon = Icon.Icon;
+exports.Button = Button.Button;
+exports.Divider = Divider.Divider;
+exports.Column = Columns.Column;
+exports.Columns = Columns.Columns;
+exports.Tabs = Tabs.Tabs;
+exports.Badge = Badge.Badge;
+exports.SearchResult = SearchResult.SearchResult;
+exports.ToggleButton = ToggleButton.ToggleButton;
+exports.DropdownMenu = DropdownMenu.DropdownMenu;
+exports.FormFieldGroup = FormFieldGroup.FormFieldGroup;
+exports.Checkbox = Checkbox.Checkbox;
+exports.Toggle = Toggle.Toggle;
+exports.Radio = Radio.Radio;
+exports.RadioButton = RadioButton.RadioButton;
+exports.Textarea = Textarea.Textarea;
+exports.Select = Select.Select;
+exports.SubThemeProvider = SubThemeProvider.SubThemeProvider;
+exports.PictogramButton = PictogramButton.PictogramButton;
+exports.MediaViewerBar = MediaViewerBar.MediaViewerBar;
+exports.SegmentedProgressBar = SegmentedProgressBar.SegmentedProgressBar;
+exports.ProgressBar = ProgressBar.ProgressBar;
+exports.Container = Container.Container;
+exports.RoundButton = RoundButton.RoundButton;
+exports.Notification = Notification.Notification;
+exports.Logo = Logo.Logo;
+exports.MediaItem = MediaItem.MediaItem;
+exports.Callout = Callout.Callout;
+exports.Modal = Modal.Modal;
+exports.ButtonGroup = ButtonGroup.ButtonGroup;
+exports.Collapsible = Collapsible.Collapsible;
+exports.CollapsibleHeader = Collapsible.CollapsibleHeader;
+exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
+exports.Pagination = Pagination.Pagination;
+exports.SegmentedControl = SegmentedControl.SegmentedControl;
+exports.Tooltip = Tooltip.Tooltip;
+exports.Tag = Tag.Tag;
+exports.Input = Input.Input;
+exports.PasswordInput = PasswordInput.PasswordInput;
+exports.BaseDataTable = DataTable.BaseDataTable;
+exports.DataTable = DataTable.DataTable;
+exports.useDataTableSort = useDataTableSort.useDataTableSort;
+exports.dark = dark;
+exports.light = light;

package/build/cjs/src/shared/ScreenReaderText.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+// Content required to be read by screen readers but visually hidden
+const ScreenReaderText = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "ezjk5ml0"
+} : {
+  target: "ezjk5ml0",
+  label: "ScreenReaderText"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1a6jdgo",
+  styles: "width:1px;height:1px;position:absolute;left:-10000px;top:0;overflow:hidden"
+} : {
+  name: "1a6jdgo",
+  styles: "width:1px;height:1px;position:absolute;left:-10000px;top:0;overflow:hidden",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNjcmVlblJlYWRlclRleHQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2dDIiwiZmlsZSI6IlNjcmVlblJlYWRlclRleHQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuLy8gQ29udGVudCByZXF1aXJlZCB0byBiZSByZWFkIGJ5IHNjcmVlbiByZWFkZXJzIGJ1dCB2aXN1YWxseSBoaWRkZW5cbmV4cG9ydCBjb25zdCBTY3JlZW5SZWFkZXJUZXh0ID0gc3R5bGVkLmRpdih7XG4gIHdpZHRoOiAxLFxuICBoZWlnaHQ6IDEsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIGxlZnQ6IFwiLTEwMDAwcHhcIixcbiAgdG9wOiAwLFxuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbn0pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+exports.ScreenReaderText = ScreenReaderText;

package/build/cjs/src/shared/flattenChildren.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var reactIs = require('react-is');
+
+/**
+ * Copied from https://github.com/grrowl/react-keyed-flatten-children (since ESM import doesn't work with the module)
+ *
+ * Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray),
+ * this utility takes children and returns them as an array for introspection or filtering.
+ *
+ * Different from `Children.toArray`, it will flatten arrays and `React.Fragment`s into a regular, one-dimensional
+ * array while ensuring element and fragment keys are preserved, unique, and stable between renders.
+ */
+
+const flattenChildren = function (children) {
+  let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let keys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return React.Children.toArray(children).reduce((acc, node, nodeIndex) => {
+    if (reactIs.isFragment(node)) {
+      acc.push(...flattenChildren(node.props.children, depth + 1, keys.concat(String(node.key || nodeIndex))));
+    } else if ( /*#__PURE__*/React.isValidElement(node)) {
+      acc.push( /*#__PURE__*/React.cloneElement(node, {
+        key: keys.concat(String(node.key)).join(".")
+      }));
+    } else if (typeof node === "string" || typeof node === "number") {
+      acc.push(node);
+    }
+    return acc;
+  }, []);
+};
+
+exports.flattenChildren = flattenChildren;

package/build/cjs/src/shared/informDeprecation.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const informDeprecation = function (property, value, location) {
+  let details = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
+  if (property === undefined) return;
+  if (property === value) {
+    // eslint-disable-next-line no-console
+    console.error(`value ${JSON.stringify(value)} is depricated in ${location} \n ${details}`);
+  }
+};
+
+exports.informDeprecation = informDeprecation;

package/build/cjs/src/shared/mediaQueries.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var _breakpoints = require('../../build-tokens/_breakpoints.json.js');
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/*
+ Although, mq implementation supports any property type, the following types are specified to provide type safety. If you need support for a new type, add it here.
+*/
+
+// this thing probably deserves to be a separate library, like facepaint for emotion
+function getMq(breakpointRules) {
+  const keys = breakpointRules;
+  return rules => {
+    const res = {};
+    keys.forEach(key => {
+      res[key] = {};
+    });
+    res[`@media screen`] = {};
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Object.entries(rules).forEach(_ref => {
+      let [cssProperty, [prop, map]] = _ref;
+      if (Array.isArray(prop)) {
+        const sm = prop[0];
+        const md = prop[1] || prop[0];
+        const lg = prop[2] || prop[1] || prop[0];
+        const [s, m, l] = keys;
+        res[s][cssProperty] = map[sm];
+        res[m][cssProperty] = map[md];
+        res[l][cssProperty] = map[lg];
+      } else {
+        res[`@media screen`][cssProperty] = map[prop];
+      }
+    });
+    return res;
+  };
+}
+const mq = getMq([`@media (max-width: ${_breakpoints.default.medium.value}px)`, `@media (min-width: ${_breakpoints.default.medium.value}px) and (max-width: ${_breakpoints.default.large.value}px)`, `@media (min-width: ${_breakpoints.default.large.value}px)`]);
+function getMqValue(breakpointRules) {
+  const keys = breakpointRules;
+  return rules => {
+    const res = {};
+    keys.forEach(key => {
+      res[key] = {};
+    });
+    res[`@media screen`] = {};
+    Object.entries(rules).forEach(_ref2 => {
+      let [cssProperty, cssValues] = _ref2;
+      if (Array.isArray(cssValues)) {
+        breakpointRules.forEach((breakpoint, index) => {
+          let i = index;
+          while (!cssValues[i] && i !== 0) {
+            i -= 1;
+          }
+          res[breakpoint][cssProperty] = cssValues[i];
+        });
+      } else {
+        res[`@media screen`][cssProperty] = cssValues;
+      }
+    });
+    return res;
+  };
+}
+const mqValue = getMqValue([`@media (max-width: ${_breakpoints.default.medium.value}px)`, `@media (min-width: ${_breakpoints.default.medium.value}px) and (max-width: ${_breakpoints.default.large.value}px)`, `@media (min-width: ${_breakpoints.default.large.value}px)`]);
+
+exports.mq = mq;
+exports.mqValue = mqValue;

package/build/cjs/src/shared/useAutoPosition.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var useWindow = require('./useWindow.js');
+var useDocument = require('./useDocument.js');
+
+const useAutoPosition = (anchorRef, contentRef, isActive) => {
+  const [verticalPosition, setVerticalPosition] = React.useState("down");
+  const [horizontalPosition, setHorizontalPosition] = React.useState("left");
+  const document = useDocument.useDocument();
+  const window = useWindow.useWindow();
+  React.useLayoutEffect(() => {
+    if (!contentRef) return;
+    if (isActive) {
+      const maxHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+      const rect = contentRef.current.getBoundingClientRect();
+      const anchorHeight = anchorRef.current.getBoundingClientRect().height;
+      const anchorX = anchorRef.current.getBoundingClientRect().x;
+      const screenWidth = window.innerWidth;
+      const isUp = rect.top + rect.height > maxHeight;
+      const isDown = rect.top - anchorHeight < rect.height;
+      const isLeft = anchorX > screenWidth / 2;
+      const isRight = anchorX < screenWidth / 2;
+      if (isUp) {
+        setVerticalPosition("up");
+      } else if (isDown) {
+        setVerticalPosition("down");
+      }
+      if (isLeft) {
+        setHorizontalPosition("left");
+      } else if (isRight) {
+        setHorizontalPosition("right");
+      }
+    } else {
+      setVerticalPosition("down");
+      setHorizontalPosition("left");
+    }
+  }, [anchorRef, contentRef, document.documentElement.clientHeight, isActive, window.innerHeight, window.innerWidth]);
+  return [verticalPosition, horizontalPosition];
+};
+
+exports.useAutoPosition = useAutoPosition;

package/build/cjs/src/shared/useDocument.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function useDocument() {
+  return document;
+}
+
+exports.useDocument = useDocument;

package/build/cjs/src/shared/useHover.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+
+function useHover(ref) {
+  const [hovered, setHovered] = React.useState(false);
+  const handleMouseOver = () => setHovered(true);
+  const handleMouseOut = () => setHovered(false);
+  React.useEffect(() => {
+    if (!ref) return undefined;
+    const node = ref.current;
+    if (node) {
+      node.addEventListener("mouseover", handleMouseOver);
+      node.addEventListener("mouseout", handleMouseOut);
+      return () => {
+        node.removeEventListener("mouseover", handleMouseOver);
+        node.removeEventListener("mouseout", handleMouseOut);
+      };
+    }
+    return undefined;
+  }, [ref]);
+  if (!ref) return null;
+  return hovered;
+}
+
+exports.useHover = useHover;

package/build/cjs/src/shared/useKeyboard.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var useDocument = require('./useDocument.js');
+
+/**
+ * useKeyboard handles activation of keyboard hotkeys on a given element.
+ * @param {Record<string, (e: KeyboardEvent) => {}} config - A map of keyboardEvent code to function.
+ * @param {RefObject} ref - The element which the keyboard config has to apply on.
+ * @param {boolean} isActive - A flag to determine when the keyboard config has to be applied.
+ *
+ * Example:
+ * useKeyboard({
+ *  Escape: closeMenu,
+ *  ArrowUp: () => { doSomething() },
+ *  KeyB: () => { console.log("bagi") },
+ * }, menuRef, menuOpen)
+ *
+ * This mean that these keyboard shortcuts will be applied on menuRef when the menu is opened.
+ */
+
+function useKeyboard(config, ref, isActive) {
+  const document = useDocument.useDocument();
+  const handleKeyboard = event => {
+    if (!isActive) return;
+    if (document.activeElement !== ref.current && !ref.current.contains(document.activeElement)) return;
+    const targetConfigKey = Object.keys(config).find(targetKeys => targetKeys.split(" ").includes(event.code));
+    if (!targetConfigKey) return;
+    event.preventDefault();
+    const res = config[targetConfigKey](event);
+    if (res === false) {
+      event.stopPropagation();
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener("keydown", handleKeyboard);
+    return () => {
+      document.removeEventListener("keydown", handleKeyboard);
+    };
+  });
+}
+
+exports.useKeyboard = useKeyboard;

package/build/cjs/src/shared/useOnEscapePress.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var React = require('react');
+var useDocument = require('./useDocument.js');
+
+const registry = {};
+const handleEscape = event => {
+  if (!event.defaultPrevented) {
+    const handlers = Object.values(registry).reverse();
+    for (let i = 0; i < handlers.length; i += 1) {
+      const handler = handlers[i];
+      handler(event);
+      if (event.defaultPrevented) break;
+    }
+  }
+};
+const register = (id, handler) => {
+  registry[id] = handler;
+};
+const deregister = id => {
+  delete registry[id];
+};
+
+// For auto-incrementing unique identifiers for registered different handlers.
+let handlerId = 0;
+const useOnEscapePress = function (onEscape) {
+  let callbackDependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [onEscape];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const escapeCallback = React.useCallback(onEscape, callbackDependencies);
+  const document = useDocument.useDocument();
+  const handler = React.useCallback(event => {
+    if (event.key === "Escape") escapeCallback(event);
+  }, [escapeCallback]);
+  const id = React.useMemo(() => {
+    handlerId += 1;
+    return handlerId;
+  }, []);
+  React.useEffect(() => {
+    if (Object.keys(registry).length === 0) {
+      document.addEventListener("keydown", handleEscape);
+    }
+    register(id, handler);
+    return () => {
+      deregister(id);
+      if (Object.keys(registry).length === 0) {
+        document.removeEventListener("keydown", handleEscape);
+      }
+    };
+  }, [id, handler, document]);
+};
+
+exports.useOnEscapePress = useOnEscapePress;

package/build/cjs/src/shared/useOutsideClick.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var useWindow = require('./useWindow.js');
+
+/**
+ * useOutsideClick handles outside click of a given element.
+ * @param {RefObject} ref - Reference to a DOM element.
+ * @param {e: Event) => void} handler - Function invoked when a click is triggered outside the referenced element.
+ * @param {boolean} isActive - A flag to determine when the outside click event needs to be applied.
+ *
+ * Example: useOutsideClick(menuRef, closeMenu, menuIsOpen)
+ * Means that when a menu is opened, clicking outside of the menu will close the mneu.
+ */
+
+const useOutsideClick = (ref, handler, isActive) => {
+  const window = useWindow.useWindow();
+  const outsideClickEvent = React.useCallback(e => {
+    if (ref && ref.current && !ref.current.contains(e.target)) {
+      handler(e);
+    }
+  }, [handler, ref]);
+  React.useEffect(() => {
+    if (isActive) {
+      window.addEventListener("click", outsideClickEvent);
+    }
+    return () => {
+      window.removeEventListener("click", outsideClickEvent);
+    };
+  }, [isActive, window, outsideClickEvent]);
+};
+
+exports.useOutsideClick = useOutsideClick;

package/build/cjs/src/shared/useWindow.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function useWindow() {
+  return window;
+}
+
+exports.useWindow = useWindow;

package/build/esm/build-tokens/_breakpoints.json

@@ -0,0 +1,17 @@
+{
+    "small": {
+        "category": "breakpoint",
+        "value": 576,
+        "variableName": "$breakpoint-small"
+    },
+    "medium": {
+        "category": "breakpoint",
+        "value": 768,
+        "variableName": "$breakpoint-medium"
+    },
+    "large": {
+        "category": "breakpoint",
+        "value": 1280,
+        "variableName": "$breakpoint-large"
+    }
+}

package/build/esm/build-tokens/_breakpoints.json.js

@@ -0,0 +1,4 @@
+var small={category:"breakpoint",value:576,variableName:"$breakpoint-small"};var medium={category:"breakpoint",value:768,variableName:"$breakpoint-medium"};var large={category:"breakpoint",value:1280,variableName:"$breakpoint-large"};var breakpoints = {small:small,medium:medium,large:large};
+
+export { breakpoints as default, large, medium, small };
+//# sourceMappingURL=_breakpoints.json.js.map

package/build/esm/build-tokens/_breakpoints.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_breakpoints.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}