@amboss/design-system 1.20.4 → 1.21.1

package/build/esm/src/index.js

@@ -50,6 +50,7 @@ export { TagGroup } from './components/TagGroup/TagGroup.js';
 export { Toggletip } from './components/Toggletip/Toggletip.js';
 export { Popover } from './components/Popover/Popover.js';
 export { UserHighlightTooltip } from './components/UserHighlightTooltip/UserHighlightTooltip.js';
+export { Sheet } from './components/Sheet/Sheet.js';
 export { Input } from './components/Form/Input/Input.js';
 export { PasswordInput } from './components/Form/PasswordInput/PasswordInput.js';
 export { BaseDataTable, DataTable } from './components/DataTable/DataTable.js';

package/build/esm/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/index.ts"],"sourcesContent":["import {\n  ambossVisualConfiguration,\n  VisualConfig,\n} from \"../build-tokens/visualConfig\";\n\nexport type { VisualConfig };\nexport const { dark, light } = ambossVisualConfiguration;\nexport { ThemeProvider, CacheProvider } from \"@emotion/react\";\nexport { default as createCache } from \"@emotion/cache\";\nexport * from \"./components/Card/Card\";\nexport * from \"./components/Card/CardBox\";\nexport * from \"./components/Box/Box\";\nexport * from \"./components/Inline/Inline\";\nexport * from \"./components/Stack/Stack\";\nexport * from \"./components/Typography/Header/Header\";\nexport * from \"./components/Typography/Text/Text\";\nexport * from \"./components/Typography/TextClamped/TextClamped\";\nexport * from \"./components/Typography/StyledText/StyledText\";\nexport * from \"./components/Link/Link\";\nexport * from \"./components/Icon/Icon\";\nexport * from \"./components/Button/Button\";\nexport * from \"./components/Divider/Divider\";\nexport * from \"./components/Column/Columns\";\nexport * from \"./components/Tabs/Tabs\";\nexport * from \"./components/Badge/Badge\";\nexport * from \"./components/SearchResult/SearchResult\";\nexport * from \"./components/Form/ToggleButton/ToggleButton\";\nexport * from \"./components/DropdownMenu/DropdownMenu\";\nexport * from \"./components/Form/FormFieldGroup/FormFieldGroup\";\nexport * from \"./components/Form/Input\";\nexport * from \"./components/Form/Checkbox/Checkbox\";\nexport * from \"./components/Form/Toggle/Toggle\";\nexport * from \"./components/Form/Radio/Radio\";\nexport * from \"./components/Form/RadioButton/RadioButton\";\nexport * from \"./components/Form/Textarea/Textarea\";\nexport * from \"./components/Form/Select/Select\";\nexport * from \"./components/SubThemeProvider/SubThemeProvider\";\nexport * from \"./components/PictogramButton/PictogramButton\";\nexport * from \"./components/MediaViewerBar/MediaViewerBar\";\nexport * from \"./components/SegmentedProgressBar/SegmentedProgressBar\";\nexport * from \"./components/ProgressBar/ProgressBar\";\nexport * from \"./components/Container/Container\";\nexport * from \"./components/Form/PasswordInput\";\nexport * from \"./components/RoundButton/RoundButton\";\nexport * from \"./components/Notification/Notification\";\nexport * from \"./components/Logo/Logo\";\nexport * from \"./components/MediaItem/MediaItem\";\nexport * from \"./components/Callout/Callout\";\nexport * from \"./components/Patterns/Modal/Modal\";\nexport * from \"./components/Patterns/ButtonGroup/ButtonGroup\";\nexport * from \"./components/Collapsible/Collapsible\";\nexport * from \"./components/LoadingSpinner/LoadingSpinner\";\nexport * from \"./components/Pagination/Pagination\";\nexport * from \"./components/DataTable\";\nexport * from \"./components/Form/SegmentedControl/SegmentedControl\";\nexport * from \"./components/Tooltip/Tooltip\";\nexport * from \"./components/Tag/Tag\";\nexport * from \"./components/TagGroup/TagGroup\";\nexport * from \"./components/Toggletip/Toggletip\";\nexport * from \"./components/Popover/Popover\";\nexport * from \"./components/UserHighlightTooltip/UserHighlightTooltip\";\n"],"names":["dark","light","ambossVisualConfiguration"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMa,MAAA;EAAEA,IAAI;AAAEC,EAAAA,KAAAA;AAAM,CAAC,GAAGC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/index.ts"],"sourcesContent":["import {\n  ambossVisualConfiguration,\n  VisualConfig,\n} from \"../build-tokens/visualConfig\";\n\nexport type { VisualConfig };\nexport const { dark, light } = ambossVisualConfiguration;\nexport { ThemeProvider, CacheProvider } from \"@emotion/react\";\nexport { default as createCache } from \"@emotion/cache\";\nexport * from \"./components/Card/Card\";\nexport * from \"./components/Card/CardBox\";\nexport * from \"./components/Box/Box\";\nexport * from \"./components/Inline/Inline\";\nexport * from \"./components/Stack/Stack\";\nexport * from \"./components/Typography/Header/Header\";\nexport * from \"./components/Typography/Text/Text\";\nexport * from \"./components/Typography/TextClamped/TextClamped\";\nexport * from \"./components/Typography/StyledText/StyledText\";\nexport * from \"./components/Link/Link\";\nexport * from \"./components/Icon/Icon\";\nexport * from \"./components/Button/Button\";\nexport * from \"./components/Divider/Divider\";\nexport * from \"./components/Column/Columns\";\nexport * from \"./components/Tabs/Tabs\";\nexport * from \"./components/Badge/Badge\";\nexport * from \"./components/SearchResult/SearchResult\";\nexport * from \"./components/Form/ToggleButton/ToggleButton\";\nexport * from \"./components/DropdownMenu/DropdownMenu\";\nexport * from \"./components/Form/FormFieldGroup/FormFieldGroup\";\nexport * from \"./components/Form/Input\";\nexport * from \"./components/Form/Checkbox/Checkbox\";\nexport * from \"./components/Form/Toggle/Toggle\";\nexport * from \"./components/Form/Radio/Radio\";\nexport * from \"./components/Form/RadioButton/RadioButton\";\nexport * from \"./components/Form/Textarea/Textarea\";\nexport * from \"./components/Form/Select/Select\";\nexport * from \"./components/SubThemeProvider/SubThemeProvider\";\nexport * from \"./components/PictogramButton/PictogramButton\";\nexport * from \"./components/MediaViewerBar/MediaViewerBar\";\nexport * from \"./components/SegmentedProgressBar/SegmentedProgressBar\";\nexport * from \"./components/ProgressBar/ProgressBar\";\nexport * from \"./components/Container/Container\";\nexport * from \"./components/Form/PasswordInput\";\nexport * from \"./components/RoundButton/RoundButton\";\nexport * from \"./components/Notification/Notification\";\nexport * from \"./components/Logo/Logo\";\nexport * from \"./components/MediaItem/MediaItem\";\nexport * from \"./components/Callout/Callout\";\nexport * from \"./components/Patterns/Modal/Modal\";\nexport * from \"./components/Patterns/ButtonGroup/ButtonGroup\";\nexport * from \"./components/Collapsible/Collapsible\";\nexport * from \"./components/LoadingSpinner/LoadingSpinner\";\nexport * from \"./components/Pagination/Pagination\";\nexport * from \"./components/DataTable\";\nexport * from \"./components/Form/SegmentedControl/SegmentedControl\";\nexport * from \"./components/Tooltip/Tooltip\";\nexport * from \"./components/Tag/Tag\";\nexport * from \"./components/TagGroup/TagGroup\";\nexport * from \"./components/Toggletip/Toggletip\";\nexport * from \"./components/Popover/Popover\";\nexport * from \"./components/UserHighlightTooltip/UserHighlightTooltip\";\nexport * from \"./components/Sheet/Sheet\";\n"],"names":["dark","light","ambossVisualConfiguration"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMa,MAAA;EAAEA,IAAI;AAAEC,EAAAA,KAAAA;AAAM,CAAC,GAAGC;;;;"}

package/build/esm/src/shared/FocusTrapWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+  This wrapper is added to handle onPostDeactivate from react-focus-trap. onPostDeactivate is fired before component unmouns. Often, onDeactivate is used to unmount the component (see BasePopover and Sheet), so we don't want to handle this event again before component unmounts.
+*/
+type FocusTrapWrapperProps = {
+    focusTrapOptions: any;
+    children: React.ReactNode;
+};
+export declare const FocusTrapWrapper: ({ focusTrapOptions, children, }: FocusTrapWrapperProps) => React.ReactElement;
+export {};

package/build/esm/src/shared/FocusTrapWrapper.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import FocusTrap from 'focus-trap-react';
+
+/**
+  This wrapper is added to handle onPostDeactivate from react-focus-trap. onPostDeactivate is fired before component unmouns. Often, onDeactivate is used to unmount the component (see BasePopover and Sheet), so we don't want to handle this event again before component unmounts. 
+*/
+
+const FocusTrapWrapper = _ref => {
+  let {
+    focusTrapOptions,
+    children
+  } = _ref;
+  const [isDeactivated, setDeactivated] = useState(false);
+  const {
+    onPostDeactivate,
+    ...rest
+  } = focusTrapOptions;
+  const handleDeactivate = () => {
+    setDeactivated(true);
+  };
+  useEffect(() => {
+    if (isDeactivated) {
+      onPostDeactivate();
+    }
+  }, [isDeactivated, onPostDeactivate]);
+  return /*#__PURE__*/React.createElement(FocusTrap, {
+    focusTrapOptions: {
+      ...rest,
+      onDeactivate: handleDeactivate
+    }
+  }, children);
+};
+
+export { FocusTrapWrapper };
+//# sourceMappingURL=FocusTrapWrapper.js.map

package/build/esm/src/shared/FocusTrapWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrapWrapper.js","sources":["../../../../src/shared/FocusTrapWrapper.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport FocusTrap from \"focus-trap-react\";\n\n/**\n  This wrapper is added to handle onPostDeactivate from react-focus-trap. onPostDeactivate is fired before component unmouns. Often, onDeactivate is used to unmount the component (see BasePopover and Sheet), so we don't want to handle this event again before component unmounts. \n*/\ntype FocusTrapWrapperProps = {\n  focusTrapOptions: any;\n  children: React.ReactNode;\n};\nexport const FocusTrapWrapper = ({\n  focusTrapOptions,\n  children,\n}: FocusTrapWrapperProps): React.ReactElement => {\n  const [isDeactivated, setDeactivated] = useState(false);\n  const { onPostDeactivate, ...rest } = focusTrapOptions;\n\n  const handleDeactivate = () => {\n    setDeactivated(true);\n  };\n\n  useEffect(() => {\n    if (isDeactivated) {\n      onPostDeactivate();\n    }\n  }, [isDeactivated, onPostDeactivate]);\n\n  return (\n    <FocusTrap\n      focusTrapOptions={{\n        ...rest,\n        onDeactivate: handleDeactivate,\n      }}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"names":["FocusTrapWrapper","_ref","focusTrapOptions","children","isDeactivated","setDeactivated","useState","onPostDeactivate","rest","handleDeactivate","useEffect","React","createElement","FocusTrap","onDeactivate"],"mappings":";;;AAGA;AACA;AACA;;AAKaA,MAAAA,gBAAgB,GAAGC,IAAA,IAGiB;EAAA,IAHhB;IAC/BC,gBAAgB;AAChBC,IAAAA,QAAAA;AACqB,GAAC,GAAAF,IAAA,CAAA;EACtB,MAAM,CAACG,aAAa,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACvD,MAAM;IAAEC,gBAAgB;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAGN,gBAAgB,CAAA;EAEtD,MAAMO,gBAAgB,GAAGA,MAAM;IAC7BJ,cAAc,CAAC,IAAI,CAAC,CAAA;GACrB,CAAA;AAEDK,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIN,aAAa,EAAE;AACjBG,MAAAA,gBAAgB,EAAE,CAAA;AACpB,KAAA;AACF,GAAC,EAAE,CAACH,aAAa,EAAEG,gBAAgB,CAAC,CAAC,CAAA;AAErC,EAAA,oBACEI,KAAA,CAAAC,aAAA,CAACC,SAAS,EAAA;AACRX,IAAAA,gBAAgB,EAAE;AAChB,MAAA,GAAGM,IAAI;AACPM,MAAAA,YAAY,EAAEL,gBAAAA;AAChB,KAAA;AAAE,GAAA,EAEDN,QACQ,CAAC,CAAA;AAEhB;;;;"}

package/build/esm/src/shared/useDragDown.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+export type UseDragDownOptions = {
+    ref: RefObject<any>;
+    isVisible?: boolean;
+    onDragStart: (touchStartY: number) => void;
+    onDrag: (touchMoveY: number, offsetFromStart: number) => void;
+    onDragEnd: (touchEndY: number, offsetFromStart: number) => void;
+    onDragCancel: () => void;
+};
+/**
+ * Handle Drag down gesture for mobile web
+ */
+export declare function useDragDown({ ref, isVisible, onDragStart, onDrag, onDragEnd, onDragCancel, }: UseDragDownOptions): void;

package/build/esm/src/shared/useDragDown.js

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+
+/**
+ * Handle Drag down gesture for mobile web
+ */
+function useDragDown(_ref) {
+  let {
+    ref,
+    isVisible = false,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    onDragCancel
+  } = _ref;
+  useEffect(() => {
+    let touchStartY = 0;
+    let touchMoveY = 0;
+    let touchEndY = 0;
+    let dragCancelled = false;
+    let elm;
+    const cancelDrag = () => {
+      dragCancelled = true;
+      touchStartY = 0;
+      touchMoveY = 0;
+      touchEndY = 0;
+      onDragCancel();
+    };
+    const handleTouchStart = evt => {
+      evt.stopPropagation();
+      touchStartY = evt.changedTouches[0].screenY;
+      touchMoveY = touchStartY;
+      onDragStart(touchStartY);
+      dragCancelled = false;
+    };
+    const handleTouchEnd = evt => {
+      evt.stopPropagation();
+      if (!dragCancelled) {
+        touchEndY = evt.changedTouches[0].screenY;
+        if (touchEndY >= touchMoveY) {
+          onDragEnd(touchEndY, touchEndY - touchStartY);
+        } else {
+          // drag ended in a different direction
+          cancelDrag();
+        }
+      }
+    };
+    const handleTouchMove = evt => {
+      evt.stopPropagation();
+      if (!dragCancelled) {
+        const prevTouchMoveY = touchMoveY;
+        touchMoveY = evt.changedTouches[0].screenY;
+        if (touchMoveY > prevTouchMoveY) {
+          onDrag(touchMoveY, touchMoveY - touchStartY);
+        } else {
+          // drag ended in a different direction
+          cancelDrag();
+        }
+      }
+    };
+    if (isVisible && ref.current) {
+      elm = ref.current;
+      elm.addEventListener("touchstart", handleTouchStart, {
+        passive: true
+      });
+      elm.addEventListener("touchend", handleTouchEnd, {
+        passive: true
+      });
+      elm.addEventListener("touchmove", handleTouchMove, {
+        passive: true
+      });
+    }
+    return () => {
+      if (elm) {
+        elm.removeEventListener("touchstart", handleTouchStart);
+        elm.removeEventListener("touchend", handleTouchEnd);
+        elm.removeEventListener("touchmove", handleTouchMove);
+      }
+    };
+  }, [ref, isVisible, onDragStart, onDragCancel, onDragEnd, onDrag]);
+}
+
+export { useDragDown };
+//# sourceMappingURL=useDragDown.js.map

package/build/esm/src/shared/useDragDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDown.js","sources":["../../../../src/shared/useDragDown.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\nexport type UseDragDownOptions = {\n  /* Ref of the element you want to implement drag on */\n  ref: RefObject<any>;\n  /* Condition to start listening on touch events */\n  isVisible?: boolean;\n  /* Called on touch start */\n  onDragStart: (touchStartY: number) => void;\n  /* Called on touch move, only when move happens vertically downwards, otherwise drag is cancelled */\n  onDrag: (touchMoveY: number, offsetFromStart: number) => void;\n  /* Called on touch end, only when touch ends vertically downwards, otherwise drag is cancelled */\n  onDragEnd: (touchEndY: number, offsetFromStart: number) => void;\n  /* Called on touch cancel and on drag cancel */\n  onDragCancel: () => void;\n};\n\n/**\n * Handle Drag down gesture for mobile web\n */\nexport function useDragDown({\n  ref,\n  isVisible = false,\n  onDragStart,\n  onDrag,\n  onDragEnd,\n  onDragCancel,\n}: UseDragDownOptions): void {\n  useEffect(() => {\n    let touchStartY = 0;\n    let touchMoveY = 0;\n    let touchEndY = 0;\n    let dragCancelled = false;\n    let elm: HTMLElement;\n\n    const cancelDrag = () => {\n      dragCancelled = true;\n      touchStartY = 0;\n      touchMoveY = 0;\n      touchEndY = 0;\n      onDragCancel();\n    };\n\n    const handleTouchStart = (evt: TouchEvent) => {\n      evt.stopPropagation();\n      touchStartY = evt.changedTouches[0].screenY;\n      touchMoveY = touchStartY;\n      onDragStart(touchStartY);\n      dragCancelled = false;\n    };\n\n    const handleTouchEnd = (evt: TouchEvent) => {\n      evt.stopPropagation();\n      if (!dragCancelled) {\n        touchEndY = evt.changedTouches[0].screenY;\n\n        if (touchEndY >= touchMoveY) {\n          onDragEnd(touchEndY, touchEndY - touchStartY);\n        } else {\n          // drag ended in a different direction\n          cancelDrag();\n        }\n      }\n    };\n\n    const handleTouchMove = (evt: TouchEvent) => {\n      evt.stopPropagation();\n      if (!dragCancelled) {\n        const prevTouchMoveY = touchMoveY;\n\n        touchMoveY = evt.changedTouches[0].screenY;\n        if (touchMoveY > prevTouchMoveY) {\n          onDrag(touchMoveY, touchMoveY - touchStartY);\n        } else {\n          // drag ended in a different direction\n          cancelDrag();\n        }\n      }\n    };\n\n    if (isVisible && ref.current) {\n      elm = ref.current;\n      elm.addEventListener(\"touchstart\", handleTouchStart, { passive: true });\n      elm.addEventListener(\"touchend\", handleTouchEnd, { passive: true });\n      elm.addEventListener(\"touchmove\", handleTouchMove, { passive: true });\n    }\n\n    return () => {\n      if (elm) {\n        elm.removeEventListener(\"touchstart\", handleTouchStart);\n        elm.removeEventListener(\"touchend\", handleTouchEnd);\n        elm.removeEventListener(\"touchmove\", handleTouchMove);\n      }\n    };\n  }, [ref, isVisible, onDragStart, onDragCancel, onDragEnd, onDrag]);\n}\n"],"names":["useDragDown","_ref","ref","isVisible","onDragStart","onDrag","onDragEnd","onDragCancel","useEffect","touchStartY","touchMoveY","touchEndY","dragCancelled","elm","cancelDrag","handleTouchStart","evt","stopPropagation","changedTouches","screenY","handleTouchEnd","handleTouchMove","prevTouchMoveY","current","addEventListener","passive","removeEventListener"],"mappings":"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"}

package/build/scss/_theming.scss

@@ -9,6 +9,7 @@
     --color-background-accent-hover: #0b8363;
     --color-background-accent-active: #0a5c45;
     --color-background-accent-disabled: rgba(15, 169, 128, 0.3);
+    --color-background-elevated-default: #ffffff;
     --color-background-onAccent-default: #ffffff;
     --color-background-onAccent-hover: #ffffff;
     --color-background-onAccent-active: #ffffff;
@@ -132,6 +133,7 @@
     --color-background-accent-hover: #41a48a;
     --color-background-accent-active: #233d3d;
     --color-background-accent-disabled: rgba(40, 129, 107, 0.3);
+    --color-background-elevated-default: #24282d;
     --color-background-onAccent-default: #ffffff;
     --color-background-onAccent-hover: #ffffff;
     --color-background-onAccent-active: #ffffff;

package/build/scss/_variables.scss

@@ -7,6 +7,7 @@ $colorBackgroundAccent: var(--color-background-accent-default);
 $colorBackgroundAccentHover: var(--color-background-accent-hover);
 $colorBackgroundAccentActive: var(--color-background-accent-active);
 $colorBackgroundAccentDisabled: var(--color-background-accent-disabled);
+$colorBackgroundElevated: var(--color-background-elevated-default);
 $colorBackgroundOnAccent: var(--color-background-onAccent-default);
 $colorBackgroundOnAccentHover: var(--color-background-onAccent-hover);
 $colorBackgroundOnAccentActive: var(--color-background-onAccent-active);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "1.20.4",
+  "version": "1.21.1",
   "description": "the design system for AMBOSS products",
   "author": "Bagrat Gobedashvili",
   "license": "ISC",