@dscout/particle 1.0.0-alpha.21 → 1.0.0-alpha.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dscout/particle",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "description": "A pattern library for building dscout user interfaces",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

package/styles/color_schemes/_base_colors.scss

@@ -101,7 +101,7 @@ $color--gray-50: #F4F4F4;
 $color--gray-100: #EDEDED;
 $color--gray-200: #DEDEDE;
 $color--gray-300: #BDBDBD;
-$color--gray-500: #7A7A7A;
+$color--gray-500: #747474;
 $color--gray-800: #222222;
 
 /* Primary color palette */

package/styles/components/collapsible/_base.scss

@@ -4,13 +4,20 @@
   max-height: auto;
   opacity: 1;
   overflow: visible;
-  /* This timing value needs to stay in sync with the duration defined in the
-     CollapsibleContent component */
+  /**
+   * This timing value needs to stay in sync with the duration defined in the
+   * CollapsibleContent component
+   */
   transition-duration: var(--timing--hover);
-  transition-property: max-height, opacity;
+  transition-property: margin, max-height, opacity;
   transition-delay: 0s, var(--timing--click);
 
   &--collapsed {
+    /**
+     * `display: none` is needed to prevent collapsed wrappers from affecting
+     * the gutters applied by `gap` in a flex/grid layout.
+     */
+    display: none;
     max-height: 0;
     opacity: 0;
     overflow: hidden;
@@ -18,6 +25,7 @@
   }
 
   &--transitioning {
+    display: block;
     overflow: hidden;
   }
 }

package/styles/components/container/_base.scss

@@ -1,26 +1,53 @@
 @import 'themes/default';
 
 .Container {
-  --focus--offset: var(--focus--width);
-
   background-color: var(--Container____bg-color);
+  border: var(--Container____border);
   border-radius: var(--Container____radius);
-  box-shadow: var(--Container-undeditable____shadow);
-  transition: box-shadow var(--timing--hover), margin var(--timing--fade),
-    opacity var(--timing--fade);
+  box-shadow: var(--Container--uneditable____shadow);
+  outline: solid var(--Container____outline-width)
+    var(--Container____outline-color);
+  outline-offset: calc(-1 * var(--Container____outline-width));
+  transition: border var(--timing--fade), box-shadow var(--timing--hover),
+    margin var(--timing--fade), opacity var(--timing--fade),
+    outline var(--timing--fade);
 
   &--editing {
+    border: var(--Container--editing____border);
     box-shadow: var(--Container--editing____shadow);
   }
 
   &--editable {
+    border: var(--Container--editable____border);
     box-shadow: var(--Container--editable____shadow);
 
     &:focus-visible,
     &:hover {
+      border: var(--Container--editable--hover____border);
       box-shadow: var(--Container--editable--hover____shadow);
     }
   }
+
+  /**
+   * Focus outlines are rendered in a `::before` pseudo-element so that they
+   * don't interfere with outline styles applied by the `outlineColor` prop.
+   */
+  &:focus-visible {
+    position: relative;
+
+    &::before {
+      content: '';
+      border-radius: var(--Container____radius);
+      height: 100%;
+      left: 0;
+      outline: var(--focus--style) var(--focus--color) var(--focus--width);
+      outline-offset: var(--focus--width);
+      position: absolute;
+      top: 0;
+      transition: color var(--timing--fade);
+      width: 100%;
+    }
+  }
 }
 
 .Container__Header {

package/styles/components/container/themes/_theme_builder.scss

@@ -1,10 +1,16 @@
 $default-variables: (
-  "Container____bg-color": var(--color--invert),
-  "Container--uneditable____shadow": var(--shadow--s),
-  "Container--editable____shadow": var(--shadow--m),
-  "Container--editable--hover____shadow": var(--shadow--l),
-  "Container--editing____shadow": var(--shadow--xl),
-  "Container____radius": var(--radius--med),
+  'Container____bg-color': var(--color--invert),
+  'Container____border': none,
+  'Container--editing____border': none,
+  'Container--editable____border': none,
+  'Container--editable--hover____border': none,
+  'Container____outline-color': transparent,
+  'Container____outline-width': 2px,
+  'Container--uneditable____shadow': var(--shadow--s),
+  'Container--editable____shadow': var(--shadow--m),
+  'Container--editable--hover____shadow': var(--shadow--l),
+  'Container--editing____shadow': var(--shadow--xl),
+  'Container____radius': var(--radius--med)
 );
 
 @mixin generate-container-theme-variables($theme-variables: ()) {

package/styles/components/drag_and_drop/themes/_theme_builder.scss

@@ -5,9 +5,9 @@ $default-variables: (
   "Drag-and-Drop--error____border": solid 1px var(--color--alert),
   "Drag-and-Drop--success____border": solid 1px var(--color--dscout),
 
-  "Drag-and-Drop____background-color": var(--color--gray-5),
-  "Drag-and-Drop--disabled____background-color": var(--color--gray-5),
-  "Drag-and-Drop--dragged-over____background-color": var(--color--gray-4),
+  "Drag-and-Drop____background-color": var(--color--gray-6),
+  "Drag-and-Drop--disabled____background-color": var(--color--gray-6),
+  "Drag-and-Drop--dragged-over____background-color": var(--color--gray-5),
   "Drag-and-Drop--error____background-color": rgba(var(--color--alert-rgb), .05),
   "Drag-and-Drop--success____background-color": rgba(var(--color--dscout-rgb), .05),
 

package/styles/utilities/_shadows.scss

@@ -1,3 +1,7 @@
+.shadow--none {
+  box-shadow: none;
+}
+
 .shadow--s {
   box-shadow: var(--shadow--s);
 }

package/styles/utilities/_spacing.scss

@@ -1,24 +1,52 @@
-@use "sass:map";
+@use 'sass:map';
 
 $base-enums: (
   'none': 0,
-  '0\\.25': .25em,
-  '0\\.5': .5em,
-  '0\\.75': .75em,
+  '0\\.25': 0.25em,
+  '0\\.5': 0.5em,
+  '0\\.75': 0.75em,
   '1': 1em,
   '1\\.25': 1.25em,
   '1\\.5': 1.5em,
   '2': 2em,
   '3': 3em,
-  '4': 4em,
+  '4': 4em
 );
 
 $margin-enums: map.set($base-enums, 'auto', auto);
 
+/*=== Spacing ===*/
+
+@each $enum, $value in $base-enums {
+  .spacing-h--#{$enum} {
+    > * {
+      margin-right: $value;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+@each $enum, $value in $base-enums {
+  .spacing-v--#{$enum} {
+    > * {
+      margin-bottom: $value;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
 /*=== Margins ===*/
 
 @each $enum, $value in $margin-enums {
-  .margin--#{$enum} { margin: $value; }
+  .margin--#{$enum} {
+    margin: $value;
+  }
 }
 
 @each $enum, $value in $margin-enums {
@@ -36,25 +64,35 @@ $margin-enums: map.set($base-enums, 'auto', auto);
 }
 
 @each $enum, $value in $margin-enums {
-  .margin-l--#{$enum} { margin-left: $value; }
+  .margin-l--#{$enum} {
+    margin-left: $value;
+  }
 }
 
 @each $enum, $value in $margin-enums {
-  .margin-r--#{$enum} { margin-right: $value; }
+  .margin-r--#{$enum} {
+    margin-right: $value;
+  }
 }
 
 @each $enum, $value in $margin-enums {
-  .margin-b--#{$enum} { margin-bottom: $value; }
+  .margin-b--#{$enum} {
+    margin-bottom: $value;
+  }
 }
 
 @each $enum, $value in $margin-enums {
-  .margin-t--#{$enum} { margin-top: $value; }
+  .margin-t--#{$enum} {
+    margin-top: $value;
+  }
 }
 
 /*=== Padding ===*/
 
 @each $enum, $value in $base-enums {
-  .padding--#{$enum} { padding: $value; }
+  .padding--#{$enum} {
+    padding: $value;
+  }
 }
 
 @each $enum, $value in $base-enums {
@@ -72,44 +110,26 @@ $margin-enums: map.set($base-enums, 'auto', auto);
 }
 
 @each $enum, $value in $base-enums {
-  .padding-l--#{$enum} { padding-left: $value; }
-}
-
-@each $enum, $value in $base-enums {
-  .padding-r--#{$enum} { padding-right: $value; }
-}
-
-@each $enum, $value in $base-enums {
-  .padding-b--#{$enum} { padding-bottom: $value; }
+  .padding-l--#{$enum} {
+    padding-left: $value;
+  }
 }
 
 @each $enum, $value in $base-enums {
-  .padding-t--#{$enum} { padding-top: $value; }
+  .padding-r--#{$enum} {
+    padding-right: $value;
+  }
 }
 
-/*=== Spacing ===*/
-
 @each $enum, $value in $base-enums {
-  .spacing-h--#{$enum} {
-    > * {
-      margin-right: $value;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
+  .padding-b--#{$enum} {
+    padding-bottom: $value;
   }
 }
 
 @each $enum, $value in $base-enums {
-  .spacing-v--#{$enum} {
-    > * {
-      margin-bottom: $value;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+  .padding-t--#{$enum} {
+    padding-top: $value;
   }
 }
 

package/lib/cjs/components/collapsible.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-interface CollapsibleStateProviderProps {
-    initialCollapsed?: boolean;
-    children: ({ isCollapsed, toggleCollapsed }: {
-        isCollapsed: boolean;
-        toggleCollapsed: () => void;
-    }) => React.JSX.Element;
-}
-export declare function CollapsibleStateProvider({ initialCollapsed, children }: CollapsibleStateProviderProps): React.JSX.Element;
-export {};

package/lib/cjs/components/collapsible.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleStateProvider = void 0;
-var react_1 = require("react");
-function CollapsibleStateProvider(_a) {
-    var _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, children = _a.children;
-    var _c = (0, react_1.useState)(initialCollapsed), isCollapsed = _c[0], setIsCollapsed = _c[1];
-    function handleToggleCollapsed() {
-        setIsCollapsed(function (prevCollapsed) { return !prevCollapsed; });
-    }
-    return children({
-        isCollapsed: isCollapsed,
-        toggleCollapsed: handleToggleCollapsed
-    });
-}
-exports.CollapsibleStateProvider = CollapsibleStateProvider;
-//# sourceMappingURL=collapsible.js.map

package/lib/cjs/components/collapsible.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"collapsible.js","sourceRoot":"","sources":["../../../src/components/collapsible.tsx"],"names":[],"mappings":";;;AAAA,+BAAwC;AAaxC,SAAgB,wBAAwB,CAAC,EAGT;QAF9B,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,QAAQ,cAAA;IAEF,IAAA,KAAgC,IAAA,gBAAQ,EAAC,gBAAgB,CAAC,EAAzD,WAAW,QAAA,EAAE,cAAc,QAA8B,CAAC;IAEjE,SAAS,qBAAqB;QAC5B,cAAc,CAAC,UAAC,aAAa,IAAK,OAAA,CAAC,aAAa,EAAd,CAAc,CAAC,CAAC;IACpD,CAAC;IAED,OAAO,QAAQ,CAAC;QACd,WAAW,aAAA;QACX,eAAe,EAAE,qBAAqB;KACvC,CAAC,CAAC;AACL,CAAC;AAdD,4DAcC"}

package/lib/cjs/components/focus_intent.d.ts

@@ -1,23 +0,0 @@
-import React, { Component } from 'react';
-import type { CommonComponentProps } from '../types';
-interface FocusIntentProps extends CommonComponentProps {
-    className?: string;
-    children?: React.ReactNode;
-    id?: string;
-}
-/**
- * The `<FocusIntent />` component sets up listeners to detect when a user is
- * using a mouse or a keyboard to interact with the page. It sets a class on
- * the body to allow focus styles to be overridden for mouse users to prevent
- * focus outlines from appearing and persisting after clicking.
- */
-export declare class FocusIntent extends Component<FocusIntentProps> {
-    mouseIntent: boolean;
-    constructor(props: FocusIntentProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleMouseDown(): void;
-    handleKeyDown(): void;
-    render(): React.JSX.Element;
-}
-export {};

package/lib/cjs/components/focus_intent.js

@@ -1,92 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FocusIntent = void 0;
-var react_1 = __importStar(require("react"));
-var MOUSE_INTENT = 'mouse-intent';
-function initialIntent() {
-    return document.body.classList.contains(MOUSE_INTENT);
-}
-/**
- * The `<FocusIntent />` component sets up listeners to detect when a user is
- * using a mouse or a keyboard to interact with the page. It sets a class on
- * the body to allow focus styles to be overridden for mouse users to prevent
- * focus outlines from appearing and persisting after clicking.
- */
-var FocusIntent = /** @class */ (function (_super) {
-    __extends(FocusIntent, _super);
-    function FocusIntent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.mouseIntent = initialIntent();
-        _this.handleMouseDown = _this.handleMouseDown.bind(_this);
-        _this.handleKeyDown = _this.handleKeyDown.bind(_this);
-        return _this;
-    }
-    FocusIntent.prototype.componentDidMount = function () {
-        document.addEventListener('mousedown', this.handleMouseDown);
-        document.addEventListener('keydown', this.handleKeyDown);
-    };
-    FocusIntent.prototype.componentWillUnmount = function () {
-        document.removeEventListener('mousedown', this.handleMouseDown);
-        document.removeEventListener('keydown', this.handleKeyDown);
-    };
-    FocusIntent.prototype.handleMouseDown = function () {
-        if (!this.mouseIntent) {
-            document.body.classList.add(MOUSE_INTENT);
-            this.mouseIntent = true;
-        }
-    };
-    FocusIntent.prototype.handleKeyDown = function () {
-        if (this.mouseIntent) {
-            document.body.classList.remove(MOUSE_INTENT);
-            this.mouseIntent = false;
-        }
-    };
-    FocusIntent.prototype.render = function () {
-        var _a = this.props, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, className = _a.className, id = _a.id;
-        if (children) {
-            return (react_1.default.createElement("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: className, id: id }, this.props.children));
-        }
-        return null;
-    };
-    return FocusIntent;
-}(react_1.Component));
-exports.FocusIntent = FocusIntent;
-//# sourceMappingURL=focus_intent.js.map

package/lib/cjs/components/focus_intent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"focus_intent.js","sourceRoot":"","sources":["../../../src/components/focus_intent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyC;AAUzC,IAAM,YAAY,GAAG,cAAc,CAAC;AAEpC,SAAS,aAAa;IACpB,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;AACxD,CAAC;AAED;;;;;GAKG;AAEH;IAAiC,+BAA2B;IAG1D,qBAAY,KAAuB;QAAnC,YACE,kBAAM,KAAK,CAAC,SAMb;QAJC,KAAI,CAAC,WAAW,GAAG,aAAa,EAAE,CAAC;QAEnC,KAAI,CAAC,eAAe,GAAG,KAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACvD,KAAI,CAAC,aAAa,GAAG,KAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;;IACrD,CAAC;IAED,uCAAiB,GAAjB;QACE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3D,CAAC;IAED,0CAAoB,GAApB;QACE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAChE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9D,CAAC;IAED,qCAAe,GAAf;QACE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;IACH,CAAC;IAED,mCAAa,GAAb;QACE,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC7C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B;IACH,CAAC;IAED,4BAAM,GAAN;QACQ,IAAA,KAOF,IAAI,CAAC,KAAK,EANE,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,EAAE,QACU,CAAC;QAEf,IAAI,QAAQ,EAAE;YACZ,OAAO,CACL,qDACc,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,IAEL,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IACH,kBAAC;AAAD,CAAC,AA7DD,CAAiC,iBAAS,GA6DzC;AA7DY,kCAAW"}

package/lib/esm/components/collapsible.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-interface CollapsibleStateProviderProps {
-    initialCollapsed?: boolean;
-    children: ({ isCollapsed, toggleCollapsed }: {
-        isCollapsed: boolean;
-        toggleCollapsed: () => void;
-    }) => React.JSX.Element;
-}
-export declare function CollapsibleStateProvider({ initialCollapsed, children }: CollapsibleStateProviderProps): React.JSX.Element;
-export {};

package/lib/esm/components/collapsible.js

@@ -1,13 +0,0 @@
-import { useState } from 'react';
-export function CollapsibleStateProvider(_a) {
-    var _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, children = _a.children;
-    var _c = useState(initialCollapsed), isCollapsed = _c[0], setIsCollapsed = _c[1];
-    function handleToggleCollapsed() {
-        setIsCollapsed(function (prevCollapsed) { return !prevCollapsed; });
-    }
-    return children({
-        isCollapsed: isCollapsed,
-        toggleCollapsed: handleToggleCollapsed
-    });
-}
-//# sourceMappingURL=collapsible.js.map

package/lib/esm/components/collapsible.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"collapsible.js","sourceRoot":"","sources":["../../../src/components/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAaxC,MAAM,UAAU,wBAAwB,CAAC,EAGT;QAF9B,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,QAAQ,cAAA;IAEF,IAAA,KAAgC,QAAQ,CAAC,gBAAgB,CAAC,EAAzD,WAAW,QAAA,EAAE,cAAc,QAA8B,CAAC;IAEjE,SAAS,qBAAqB;QAC5B,cAAc,CAAC,UAAC,aAAa,IAAK,OAAA,CAAC,aAAa,EAAd,CAAc,CAAC,CAAC;IACpD,CAAC;IAED,OAAO,QAAQ,CAAC;QACd,WAAW,aAAA;QACX,eAAe,EAAE,qBAAqB;KACvC,CAAC,CAAC;AACL,CAAC"}

package/lib/esm/components/focus_intent.d.ts

@@ -1,23 +0,0 @@
-import React, { Component } from 'react';
-import type { CommonComponentProps } from '../types';
-interface FocusIntentProps extends CommonComponentProps {
-    className?: string;
-    children?: React.ReactNode;
-    id?: string;
-}
-/**
- * The `<FocusIntent />` component sets up listeners to detect when a user is
- * using a mouse or a keyboard to interact with the page. It sets a class on
- * the body to allow focus styles to be overridden for mouse users to prevent
- * focus outlines from appearing and persisting after clicking.
- */
-export declare class FocusIntent extends Component<FocusIntentProps> {
-    mouseIntent: boolean;
-    constructor(props: FocusIntentProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleMouseDown(): void;
-    handleKeyDown(): void;
-    render(): React.JSX.Element;
-}
-export {};

package/lib/esm/components/focus_intent.js

@@ -1,66 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import React, { Component } from 'react';
-var MOUSE_INTENT = 'mouse-intent';
-function initialIntent() {
-    return document.body.classList.contains(MOUSE_INTENT);
-}
-/**
- * The `<FocusIntent />` component sets up listeners to detect when a user is
- * using a mouse or a keyboard to interact with the page. It sets a class on
- * the body to allow focus styles to be overridden for mouse users to prevent
- * focus outlines from appearing and persisting after clicking.
- */
-var FocusIntent = /** @class */ (function (_super) {
-    __extends(FocusIntent, _super);
-    function FocusIntent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.mouseIntent = initialIntent();
-        _this.handleMouseDown = _this.handleMouseDown.bind(_this);
-        _this.handleKeyDown = _this.handleKeyDown.bind(_this);
-        return _this;
-    }
-    FocusIntent.prototype.componentDidMount = function () {
-        document.addEventListener('mousedown', this.handleMouseDown);
-        document.addEventListener('keydown', this.handleKeyDown);
-    };
-    FocusIntent.prototype.componentWillUnmount = function () {
-        document.removeEventListener('mousedown', this.handleMouseDown);
-        document.removeEventListener('keydown', this.handleKeyDown);
-    };
-    FocusIntent.prototype.handleMouseDown = function () {
-        if (!this.mouseIntent) {
-            document.body.classList.add(MOUSE_INTENT);
-            this.mouseIntent = true;
-        }
-    };
-    FocusIntent.prototype.handleKeyDown = function () {
-        if (this.mouseIntent) {
-            document.body.classList.remove(MOUSE_INTENT);
-            this.mouseIntent = false;
-        }
-    };
-    FocusIntent.prototype.render = function () {
-        var _a = this.props, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, className = _a.className, id = _a.id;
-        if (children) {
-            return (React.createElement("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: className, id: id }, this.props.children));
-        }
-        return null;
-    };
-    return FocusIntent;
-}(Component));
-export { FocusIntent };
-//# sourceMappingURL=focus_intent.js.map

package/lib/esm/components/focus_intent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"focus_intent.js","sourceRoot":"","sources":["../../../src/components/focus_intent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUzC,IAAM,YAAY,GAAG,cAAc,CAAC;AAEpC,SAAS,aAAa;IACpB,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;AACxD,CAAC;AAED;;;;;GAKG;AAEH;IAAiC,+BAA2B;IAG1D,qBAAY,KAAuB;QAAnC,YACE,kBAAM,KAAK,CAAC,SAMb;QAJC,KAAI,CAAC,WAAW,GAAG,aAAa,EAAE,CAAC;QAEnC,KAAI,CAAC,eAAe,GAAG,KAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACvD,KAAI,CAAC,aAAa,GAAG,KAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;;IACrD,CAAC;IAED,uCAAiB,GAAjB;QACE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3D,CAAC;IAED,0CAAoB,GAApB;QACE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAChE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9D,CAAC;IAED,qCAAe,GAAf;QACE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;IACH,CAAC;IAED,mCAAa,GAAb;QACE,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC7C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B;IACH,CAAC;IAED,4BAAM,GAAN;QACQ,IAAA,KAOF,IAAI,CAAC,KAAK,EANE,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,EAAE,QACU,CAAC;QAEf,IAAI,QAAQ,EAAE;YACZ,OAAO,CACL,2CACc,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,IAEL,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IACH,kBAAC;AAAD,CAAC,AA7DD,CAAiC,SAAS,GA6DzC"}