draft-components 0.65.0 → 0.70.0

package/lib/react-helpers.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mergeRefs = exports.classNames = void 0;
+const guards_1 = require("./guards");
 function classNames(...classes) {
     let classString = '';
     for (const cn of classes) {
@@ -25,15 +26,17 @@ function classNames(...classes) {
 }
 exports.classNames = classNames;
 function mergeRefs(...refs) {
-    return (value) => {
-        refs.forEach((ref) => {
-            if (typeof ref === 'function') {
-                ref(value);
-            }
-            else if (typeof ref === 'object' && ref && 'current' in ref) {
-                ref.current = value;
+    return (instance) => {
+        for (const ref of refs) {
+            if (ref) {
+                if ((0, guards_1.isFunction)(ref)) {
+                    ref(instance);
+                }
+                else {
+                    ref.current = instance;
+                }
             }
-        });
+        }
     };
 }
 exports.mergeRefs = mergeRefs;

package/lib/util.d.ts

@@ -1,7 +1,5 @@
-declare type AnyFunction = (...args: any[]) => any;
 export declare function noop(): void;
-export declare function once<T extends AnyFunction>(fn: T): (...args: Parameters<T>) => ReturnType<T>;
+export declare function once<T extends (...args: any[]) => any>(fn: T): (...args: Parameters<T>) => ReturnType<T>;
 export declare function randomInt(min: number, max: number): number;
 export declare function randomString(size: number): string;
 export declare function uniqueId(prefix?: string): string;
-export {};

package/lib/util.js

@@ -5,6 +5,7 @@ function noop() {
     return;
 }
 exports.noop = noop;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function once(fn) {
     let called = false;
     let result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "0.65.0",
+  "version": "0.70.0",
   "description": "The set of React.js components for rapid prototyping.",
   "main": "components/index.js",
   "files": [
@@ -43,50 +43,49 @@
     "react-dom": "^17"
   },
   "devDependencies": {
-    "@babel/core": "7.16.0",
-    "@babel/plugin-proposal-class-properties": "7.16.0",
-    "@babel/preset-env": "7.16.0",
-    "@babel/preset-react": "7.16.0",
-    "@babel/preset-typescript": "7.16.0",
-    "@testing-library/dom": "8.11.0",
-    "@testing-library/jest-dom": "5.15.0",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/react-hooks": "7.0.2",
+    "@babel/core": "7.17.9",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/preset-env": "7.16.11",
+    "@babel/preset-react": "7.16.7",
+    "@babel/preset-typescript": "7.16.7",
+    "@testing-library/dom": "8.13.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
-    "@types/jest": "27.0.2",
-    "@types/node": "16.11.7",
-    "@types/react": "17.0.34",
-    "@types/react-dom": "17.0.11",
-    "@types/resize-observer-browser": "0.1.6",
-    "@typescript-eslint/eslint-plugin": "5.3.1",
-    "@typescript-eslint/parser": "5.3.1",
-    "autoprefixer": "10.4.0",
+    "@types/jest": "27.4.1",
+    "@types/node": "16.11.27",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "17.0.15",
+    "@types/resize-observer-browser": "0.1.7",
+    "@typescript-eslint/eslint-plugin": "5.19.0",
+    "@typescript-eslint/parser": "5.19.0",
+    "autoprefixer": "10.4.4",
     "babel-eslint": "10.1.0",
-    "babel-loader": "8.2.3",
+    "babel-loader": "8.2.4",
     "bootstrap-icons": "1.7.0",
     "css-loader": "5.2.6",
-    "cssnano": "5.0.10",
-    "eslint": "7.32.0",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.26.1",
-    "eslint-plugin-react-hooks": "4.3.0",
-    "eslint-plugin-testing-library": "5.0.0",
-    "fs-extra": "10.0.0",
+    "cssnano": "5.1.7",
+    "eslint": "8.13.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.4.0",
+    "eslint-plugin-testing-library": "5.3.1",
+    "fs-extra": "10.1.0",
     "gulp": "4.0.2",
     "gulp-postcss": "9.0.1",
-    "gulp-sass": "5.0.0",
+    "gulp-sass": "5.1.0",
     "husky": "4.3.8",
-    "jest": "27.3.1",
-    "lint-staged": "11.2.6",
-    "postcss-loader": "4.2.0",
-    "prettier": "2.4.1",
+    "jest": "27.5.1",
+    "lint-staged": "12.3.8",
+    "postcss-loader": "4.3.0",
+    "prettier": "2.6.2",
     "react": "17.0.0",
     "react-dom": "17.0.0",
-    "react-styleguidist": "11.1.7",
-    "sass": "1.43.4",
+    "react-styleguidist": "11.2.0",
+    "sass": "1.50.0",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
-    "typescript": "4.4.4",
+    "typescript": "4.6.3",
     "webpack": "4.46.0",
     "xml2js": "0.4.23"
   },

package/scss/components/_dialog.scss

@@ -1,10 +1,7 @@
 @use '../abstracts' as dc;
 
-$dialog-pad: dc.$gap-4x;
-
 .dc-dialog-container {
   position: fixed;
-  z-index: var(--dc-zindex-overlay);
   top: 0;
   left: 0;
   display: flex;
@@ -14,7 +11,7 @@ $dialog-pad: dc.$gap-4x;
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: rgba(dc.$black, dc.$opacity-25);
+  background-color: var(--dc-dialog-backdrop-color);
 }
 
 .dc-dialog {
@@ -26,10 +23,11 @@ $dialog-pad: dc.$gap-4x;
   max-width: 100%;
   height: auto;
   margin: dc.$gap-4x;
-  padding-bottom: $dialog-pad;
+  padding-bottom: dc.$gap-4x;
   transition-property: opacity, transform;
   vertical-align: middle;
-  border-color: rgba(dc.$black, dc.$opacity-25);
+  border-color: var(--dc-dialog-border-color);
+  background: var(--dc-dialog-bg-color);
 
   & > *:first-child {
     border-top-left-radius: inherit;
@@ -42,10 +40,35 @@ $dialog-pad: dc.$gap-4x;
   }
 }
 
+.dc-dialog-container_with-animation,
+.dc-dialog-container_with-animation .dc-dialog {
+  transition-duration: 200ms;
+  transition-property: opacity, transform;
+}
+
+.dc-dialog-container_with-animation {
+  transition-timing-function: linear;
+  opacity: 0;
+}
+
+.dc-dialog-container_open {
+  opacity: 1;
+}
+
+.dc-dialog-container_with-animation .dc-dialog {
+  transition-timing-function: ease;
+  transform: scale(0.9);
+}
+
+.dc-dialog-container_open .dc-dialog {
+  transform: scale(1);
+}
+
 .dc-dialog__header {
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
+  color: var(--dc-dialog-header-color);
 }
 
 .dc-dialog__close-btn {
@@ -54,21 +77,21 @@ $dialog-pad: dc.$gap-4x;
 }
 
 .dc-dialog__description {
-  color: var(--dc-secondary-text-color);
+  color: var(--dc-dialog-description-color);
 }
 
 .dc-dialog__header-content,
 .dc-dialog__content,
 .dc-dialog__actions,
 .dc-dialog__footer {
-  padding-right: $dialog-pad;
-  padding-left: $dialog-pad;
+  padding-right: dc.$gap-4x;
+  padding-left: dc.$gap-4x;
 }
 
 .dc-dialog__header-content {
   flex: auto;
-  padding-top: $dialog-pad;
-  padding-bottom: $dialog-pad;
+  padding-top: dc.$gap-4x;
+  padding-bottom: dc.$gap-4x;
 
   & > * + * {
     margin-top: dc.$gap-1x;
@@ -83,7 +106,7 @@ $dialog-pad: dc.$gap-4x;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding-top: $dialog-pad;
+  padding-top: dc.$gap-6x;
 
   & > * + * {
     margin-left: dc.$gap-2x;

package/scss/components/_index.scss

@@ -35,6 +35,7 @@
 @import 'loading-view';
 @import 'toast';
 @import 'toaster';
+@import 'menu';
 @import 'breadcrumb';
 @import 'vertical-navigation';
 @import 'segmented-control';

package/scss/components/_menu.scss

@@ -0,0 +1,43 @@
+@use '../abstracts' as dc;
+
+.dc-menu {
+  min-width: dc.px-to-rem(128px);
+  padding: dc.$gap-1x;
+}
+
+.dc-menu__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.dc-menu__divider {
+  margin: dc.$gap-1x dc.$gap-2x;
+  border: 0.5px solid var(--dc-menu-divider-color);
+  justify-self: stretch;
+}
+
+.dc-menu-button {
+  font-size: dc.$font-size-sm;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: dc.px-to-rem(28px);
+  padding: 0 dc.$gap-3x;
+  text-align: left;
+  white-space: nowrap;
+  color: var(--dc-menu-button-color);
+  border: none;
+  border-radius: dc.$border-radius-sm;
+  background: var(--dc-menu-button-bg-color);
+  appearance: none;
+}
+
+.dc-menu-button > * + * {
+  margin-left: dc.$gap-2x;
+}
+
+.dc-menu-button:focus {
+  color: var(--dc-menu-button-focus-color);
+  outline: none;
+  background: var(--dc-menu-button-focus-bg-color);
+}

package/scss/components/_popover.scss

@@ -1,8 +1,70 @@
-.dc-popover-container {
-  z-index: var(--dc-zindex-overlay);
-}
+@use '../abstracts' as dc;
 
 .dc-popover {
   max-width: 28rem;
   max-height: 28rem;
 }
+
+.dc-popover_bubble-transition {
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: opacity, transform;
+  transform: scale(0.8);
+  opacity: 0;
+}
+
+.dc-popover_open {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.dc-popover_closing {
+}
+
+.dc-popover-container[data-position='top-start'] .dc-popover {
+  transform-origin: bottom left;
+}
+
+.dc-popover-container[data-position='top-center'] .dc-popover {
+  transform-origin: bottom center;
+}
+
+.dc-popover-container[data-position='top-right'] .dc-popover {
+  transform-origin: bottom left;
+}
+
+.dc-popover-container[data-position='right-start'] .dc-popover {
+  transform-origin: left top;
+}
+
+.dc-popover-container[data-position='right-center'] .dc-popover {
+  transform-origin: left center;
+}
+
+.dc-popover-container[data-position='right-right'] .dc-popover {
+  transform-origin: left bottom;
+}
+
+.dc-popover-container[data-position='bottom-start'] .dc-popover {
+  transform-origin: top left;
+}
+
+.dc-popover-container[data-position='bottom-center'] .dc-popover {
+  transform-origin: top center;
+}
+
+.dc-popover-container[data-position='bottom-right'] .dc-popover {
+  transform-origin: top left;
+}
+
+.dc-popover-container[data-position='left-start'] .dc-popover {
+  transform-origin: right top;
+}
+
+.dc-popover-container[data-position='left-center'] .dc-popover {
+  transform-origin: right center;
+}
+
+.dc-popover-container[data-position='left-right'] .dc-popover {
+  transform-origin: right bottom;
+}

package/scss/components/_portal.scss

@@ -0,0 +1,3 @@
+.dc-portal {
+  z-index: 1;
+}

package/scss/components/_tooltip.scss

@@ -2,14 +2,28 @@
 
 .dc-tooltip {
   font-family: var(--dc-font-base);
-  font-size: dc.$font-size-sm;
-  line-height: dc.$leading-normal;
+  font-size: dc.$font-size-xs;
+  font-weight: dc.$font-weight-normal;
+  line-height: dc.$leading-lg;
   display: inline-block;
   box-sizing: border-box;
-  width: auto;
-  max-width: 18rem;
+  max-width: dc.px-to-rem(256px);
   padding: dc.$gap-1x dc.$gap-2x;
   color: var(--dc-tooltip-text-color);
-  border-radius: dc.$border-radius-sm;
+  border-radius: dc.$border-radius-md;
   background: var(--dc-tooltip-bg-color);
+  box-shadow: dc.$shadow-sm, dc.$shadow-md;
+
+  @supports (backdrop-filter: blur()) {
+    backdrop-filter: blur(8px);
+  }
+}
+
+.dc-tooltip_fade-transition {
+  transition: opacity 150ms ease;
+  opacity: 0;
+}
+
+.dc-tooltip_show {
+  opacity: 1;
 }

package/scss/themes/_default-theme.scss

@@ -245,8 +245,8 @@
   /*------------------------------------*\
    #TOOLTIP
   \*------------------------------------*/
-  --dc-tooltip-bg-color: #{dc.$gray-800};
-  --dc-tooltip-text-color: #{dc.$gray-100};
+  --dc-tooltip-bg-color: #{rgba(dc.$gray-900, dc.$opacity-85)};
+  --dc-tooltip-text-color: #{dc.$gray-200};
 
   /*------------------------------------*\
    #TABLE
@@ -268,4 +268,22 @@
   --dc-avatar-bg2-color: #{dc.$gray-500};
   --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#{dc.$gray-400}, #{dc.$gray-500});
+
+  /*------------------------------------*\
+   #MENU
+  \*------------------------------------*/
+  --dc-menu-divider-color: #{dc.$gray-200};
+  --dc-menu-button-color: #{dc.$gray-800};
+  --dc-menu-button-bg-color: transparent;
+  --dc-menu-button-focus-color: white;
+  --dc-menu-button-focus-bg-color: #{dc.$blue-500};
+
+  /*------------------------------------*\
+   #DIALOG
+  \*------------------------------------*/
+  --dc-dialog-header-color: #{dc.$gray-900};
+  --dc-dialog-description-color: #{dc.$gray-700};
+  --dc-dialog-backdrop-color: #{rgba(dc.$gray-900, dc.$opacity-30)};
+  --dc-dialog-border-color: white;
+  --dc-dialog-bg-color: white;
 }

package/scss/utils/_margin.scss

@@ -1,6 +1,7 @@
 @use '../abstracts' as dc;
 
 $margin-scale: (
+  auto: auto,
   0: 0,
   1: dc.$gap-1x,
   2: dc.$gap-2x,
@@ -47,8 +48,3 @@ $margin-scale: (
     margin-left: $margin !important;
   }
 }
-
-.mx-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
-}

package/hooks/use-capture-focus.d.ts

@@ -1,10 +0,0 @@
-import { RefObject } from 'react';
-export interface UseCaptureFocusParams {
-    modalRef: RefObject<Element>;
-    isEnabled?: boolean;
-    shouldFocusFirstDescendant?: boolean;
-    shouldRestoreFocusAfterRelease?: boolean;
-    focusElementRefAfterCapture?: RefObject<Element>;
-    focusElementRefAfterRelease?: RefObject<Element>;
-}
-export declare function useCaptureFocus({ modalRef, isEnabled, shouldFocusFirstDescendant, shouldRestoreFocusAfterRelease, focusElementRefAfterCapture, focusElementRefAfterRelease, }: UseCaptureFocusParams): void;

package/hooks/use-capture-focus.js

@@ -1,110 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCaptureFocus = void 0;
-const react_1 = require("react");
-const stack_1 = require("../lib/stack");
-function useCaptureFocus({ modalRef, isEnabled = true, shouldFocusFirstDescendant = true, shouldRestoreFocusAfterRelease = true, focusElementRefAfterCapture, focusElementRefAfterRelease, }) {
-    (0, react_1.useEffect)(() => {
-        const modal = modalRef.current;
-        if (isEnabled && modal) {
-            const releaseFocus = captureFocus(modal, {
-                shouldFocusFirstDescendant,
-                shouldRestoreFocusAfterRelease,
-                focusElementAfterCapture: (focusElementRefAfterCapture === null || focusElementRefAfterCapture === void 0 ? void 0 : focusElementRefAfterCapture.current) || null,
-                focusElementAfterRelease: (focusElementRefAfterRelease === null || focusElementRefAfterRelease === void 0 ? void 0 : focusElementRefAfterRelease.current) || null,
-            });
-            return () => {
-                releaseFocus();
-            };
-        }
-    }, [
-        modalRef,
-        isEnabled,
-        shouldFocusFirstDescendant,
-        shouldRestoreFocusAfterRelease,
-        focusElementRefAfterCapture,
-        focusElementRefAfterRelease,
-    ]);
-}
-exports.useCaptureFocus = useCaptureFocus;
-const modalStack = new stack_1.Stack();
-let lastFocusedElement = null;
-function captureFocus(modal, { shouldFocusFirstDescendant, shouldRestoreFocusAfterRelease, focusElementAfterCapture, focusElementAfterRelease, }) {
-    const focusedElementBeforeCapture = lastFocusedElement || document.activeElement;
-    if (modalStack.isEmpty) {
-        document.addEventListener('focus', handleFocus, true);
-    }
-    modalStack.push(modal);
-    if (focusElementAfterCapture) {
-        attemptFocus(focusElementAfterCapture);
-    }
-    else if (shouldFocusFirstDescendant) {
-        attemptFocus(getFirstFocusableElement(modal));
-    }
-    return function releaseFocus() {
-        modalStack.remove(modal);
-        if (focusElementAfterRelease) {
-            attemptFocus(focusElementAfterRelease);
-        }
-        else if (shouldRestoreFocusAfterRelease &&
-            (document.activeElement == null ||
-                document.activeElement === document.body)) {
-            attemptFocus(focusedElementBeforeCapture);
-        }
-        if (modalStack.isEmpty) {
-            document.removeEventListener('focus', handleFocus, true);
-            lastFocusedElement = null;
-        }
-    };
-}
-function handleFocus(event) {
-    const focusedElement = event.target;
-    const modal = modalStack.last;
-    if (modal && focusedElement instanceof Element) {
-        if (modal.contains(focusedElement)) {
-            lastFocusedElement = focusedElement;
-        }
-        else {
-            const firstFocusableDescendant = getFirstFocusableElement(modal);
-            const lastFocusableDescendant = getLastFocusableElement(modal);
-            const nextFocusElement = lastFocusedElement === firstFocusableDescendant
-                ? lastFocusableDescendant
-                : firstFocusableDescendant;
-            if (attemptFocus(nextFocusElement)) {
-                lastFocusedElement = nextFocusElement;
-            }
-        }
-    }
-}
-const FOCUS_ELEMENTS_SELECTOR = [
-    'a[href]',
-    'area[href]',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    'button:not([disabled])',
-    'iframe',
-    '[tabindex]',
-    '[contentEditable=true]',
-]
-    .map((s) => `${s}:not([tabindex^="-"])`)
-    .join(',');
-function getFocusElements(parent) {
-    return Array.from(parent.querySelectorAll(FOCUS_ELEMENTS_SELECTOR));
-}
-function getFirstFocusableElement(parent) {
-    var _a;
-    return (_a = getFocusElements(parent)[0]) !== null && _a !== void 0 ? _a : parent;
-}
-function getLastFocusableElement(parent) {
-    var _a;
-    const focusableElements = getFocusElements(parent);
-    return (_a = focusableElements[focusableElements.length - 1]) !== null && _a !== void 0 ? _a : parent;
-}
-function attemptFocus(element) {
-    if (element instanceof HTMLElement) {
-        element.focus();
-        return element === document.activeElement;
-    }
-    return false;
-}

package/hooks/use-close-on-click-outside.d.ts

@@ -1,6 +0,0 @@
-import { RefObject } from 'react';
-export interface UseCloseOnClickOutsideParams {
-    isEnabled?: boolean;
-    ignoreElements?: Array<Element | null>;
-}
-export declare function useCloseOnClickOutside(onClose: () => void, ref: RefObject<Element>, params?: UseCloseOnClickOutsideParams): void;

package/hooks/use-close-on-click-outside.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCloseOnClickOutside = void 0;
-const react_1 = require("react");
-const guards_1 = require("../lib/guards");
-function useCloseOnClickOutside(onClose, ref, params) {
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        const isEnabled = (_a = params === null || params === void 0 ? void 0 : params.isEnabled) !== null && _a !== void 0 ? _a : true;
-        const ignoreElements = ((_b = params === null || params === void 0 ? void 0 : params.ignoreElements) !== null && _b !== void 0 ? _b : []).filter(guards_1.isHTMLElement);
-        const container = ref.current;
-        if (!isEnabled || !(0, guards_1.isFunction)(onClose) || !(0, guards_1.isHTMLElement)(container)) {
-            return;
-        }
-        const onBodyClick = (event) => {
-            const target = event.target;
-            const shouldIgnoreClick = ignoreElements.some((element) => {
-                return contains(element, target);
-            });
-            if (!shouldIgnoreClick && !contains(container, target)) {
-                onClose();
-            }
-        };
-        document.body.addEventListener('click', onBodyClick);
-        return () => {
-            document.body.removeEventListener('click', onBodyClick);
-        };
-    }, [onClose, ref, params]);
-}
-exports.useCloseOnClickOutside = useCloseOnClickOutside;
-function contains(parent, other) {
-    return other ? parent === other || parent.contains(other) : false;
-}

package/hooks/use-close-on-esc-press.d.ts

@@ -1,3 +0,0 @@
-declare type CloseCallback = () => void;
-export declare function useCloseOnEscPress(onClose: CloseCallback, isEnabled?: boolean): void;
-export {};

package/hooks/use-close-on-esc-press.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCloseOnEscPress = void 0;
-const react_1 = require("react");
-const stack_1 = require("../lib/stack");
-const util_1 = require("../lib/util");
-const guards_1 = require("../lib/guards");
-const keyboard_helpers_1 = require("../lib/keyboard-helpers");
-const callbackStack = new stack_1.Stack();
-function useCloseOnEscPress(onClose, isEnabled = true) {
-    const savedCloseCallback = (0, react_1.useRef)(util_1.noop);
-    (0, react_1.useEffect)(() => {
-        savedCloseCallback.current = () => {
-            if ((0, guards_1.isFunction)(onClose)) {
-                onClose();
-            }
-        };
-    }, [onClose]);
-    (0, react_1.useEffect)(() => {
-        if (!isEnabled) {
-            return;
-        }
-        function onEscPress(event) {
-            var _a;
-            const close = (_a = callbackStack.last) === null || _a === void 0 ? void 0 : _a.current;
-            if (event.code === keyboard_helpers_1.KeyCode.escape && close) {
-                close();
-            }
-        }
-        if (callbackStack.isEmpty) {
-            document.addEventListener('keydown', onEscPress);
-        }
-        callbackStack.push(savedCloseCallback);
-        return () => {
-            callbackStack.remove(savedCloseCallback);
-            if (callbackStack.isEmpty) {
-                document.removeEventListener('keydown', onEscPress);
-            }
-        };
-    }, [isEnabled]);
-}
-exports.useCloseOnEscPress = useCloseOnEscPress;