draft-components 1.0.0-beta.1 → 1.0.0-beta.11

package/{dist/hooks/use-mount-transition.js → cjs/hooks/use-mount-transition.cjs}

@@ -1,24 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMountTransition = void 0;
-const react_1 = require("react");
-const react_helpers_1 = require("../shared/react-helpers");
+'use strict';
+
+const react = require('react');
+const reactHelpers = require('../lib/react-helpers.cjs');
+
 function useMountTransition({ animateFirstMount = false, isShown, durationMs, enterFrom, enterTo, }) {
-    const [isMounted, setIsMounted] = (0, react_1.useState)(isShown);
-    const [hasEnterToClass, setHasEnterToClass] = (0, react_1.useState)(false);
-    const firstMount = (0, react_1.useRef)(true);
-    const prefersReducedMotion = (0, react_1.useMemo)(() => window.matchMedia('(prefers-reduced-motion: reduce)'), []);
+    const [isMounted, setIsMounted] = react.useState(isShown);
+    const [hasEnterToClass, setHasEnterToClass] = react.useState(false);
+    const firstMount = react.useRef(true);
+    const prefersReducedMotion = react.useMemo(() => window.matchMedia('(prefers-reduced-motion: reduce)'), []);
     const disableTransition = (prefersReducedMotion.matches ||
         (!animateFirstMount && firstMount.current));
     if (disableTransition) {
         durationMs = 0;
     }
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         if (!isShown) {
             firstMount.current = false;
         }
     }, [isShown]);
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         let timeout;
         if (isShown) {
             setIsMounted(true);
@@ -34,7 +34,8 @@ function useMountTransition({ animateFirstMount = false, isShown, durationMs, en
         isMounted,
         className: disableTransition
             ? ''
-            : (0, react_helpers_1.classNames)(enterFrom, hasEnterToClass && enterTo),
+            : reactHelpers.classNames(enterFrom, hasEnterToClass && enterTo),
     };
 }
+
 exports.useMountTransition = useMountTransition;

package/cjs/index.cjs

@@ -0,0 +1,147 @@
+'use strict';
+
+const keyboardKeys = require('./lib/keyboard-keys.cjs');
+const helpers = require('./lib/helpers.cjs');
+const reactHelpers = require('./lib/react-helpers.cjs');
+const useMountTransition = require('./hooks/use-mount-transition.cjs');
+const useDisableBodyScroll = require('./hooks/use-disable-body-scroll.cjs');
+const useEscKeyDown = require('./hooks/use-esc-key-down.cjs');
+const useFocusTrap = require('./hooks/use-focus-trap.cjs');
+const alert = require('./components/alert/alert.cjs');
+const avatar = require('./components/avatar/avatar.cjs');
+const avatarGroup = require('./components/avatar-group/avatar-group.cjs');
+const badge = require('./components/badge/badge.cjs');
+const breadcrumbs = require('./components/breadcrumbs/breadcrumbs.cjs');
+const breadcrumbsItem = require('./components/breadcrumbs/breadcrumbs-item.cjs');
+const button = require('./components/button/button.cjs');
+const iconButton = require('./components/button/icon-button.cjs');
+const buttonGroup = require('./components/button-group/button-group.cjs');
+const caption = require('./components/caption/caption.cjs');
+const checkbox = require('./components/checkbox/checkbox.cjs');
+const colorPicker = require('./components/color-picker/color-picker.cjs');
+const datePicker = require('./components/date-picker/date-picker.cjs');
+const dateRangePicker = require('./components/date-picker/date-range-picker.cjs');
+const datePickerPopover = require('./components/date-picker-popover/date-picker-popover.cjs');
+const dateRangePickerPopover = require('./components/date-range-picker-popover/date-range-picker-popover.cjs');
+const dialog = require('./components/dialog/dialog.cjs');
+const dialogHeader = require('./components/dialog/dialog-header.cjs');
+const dialogBody = require('./components/dialog/dialog-body.cjs');
+const dialogFooter = require('./components/dialog/dialog-footer.cjs');
+const emptyState = require('./components/empty-state/empty-state.cjs');
+const filePicker = require('./components/file-picker/file-picker.cjs');
+const filterButtons = require('./components/filter-buttons/filter-buttons.cjs');
+const filterButton = require('./components/filter-buttons/filter-button.cjs');
+const formField = require('./components/form-field/form-field.cjs');
+const label = require('./components/label/label.cjs');
+const menu = require('./components/menu/menu.cjs');
+const menuItem = require('./components/menu/menu-item.cjs');
+const menuSeparator = require('./components/menu/menu-separator.cjs');
+const navList = require('./components/nav-list/nav-list.cjs');
+const navListItem = require('./components/nav-list/nav-list-item.cjs');
+const navListTitle = require('./components/nav-list/nav-list-title.cjs');
+const passwordInput = require('./components/password-input/password-input.cjs');
+const popover = require('./components/popover/popover.cjs');
+const portal = require('./components/portal/portal.cjs');
+const positioner = require('./components/positioner/positioner.cjs');
+const radio = require('./components/radio/radio.cjs');
+const segmentedControl = require('./components/segmented-control/segmented-control.cjs');
+const select = require('./components/select/select.cjs');
+const selectionControl = require('./components/selection-control/selection-control.cjs');
+const slider = require('./components/slider/slider.cjs');
+const sliderTickMarks = require('./components/slider/slider-tick-marks.cjs');
+const spinner = require('./components/spinner/spinner.cjs');
+const _switch = require('./components/switch/switch.cjs');
+const tableContainer = require('./components/table/table-container.cjs');
+const table = require('./components/table/table.cjs');
+const tableHead = require('./components/table/table-head.cjs');
+const tableBody = require('./components/table/table-body.cjs');
+const tableRow = require('./components/table/table-row.cjs');
+const tableHeadCell = require('./components/table/table-head-cell.cjs');
+const tableCell = require('./components/table/table-cell.cjs');
+const tabs = require('./components/tabs/tabs.cjs');
+const tabList = require('./components/tabs/tab-list.cjs');
+const tab = require('./components/tabs/tab.cjs');
+const tabPanel = require('./components/tabs/tab-panel.cjs');
+const tag = require('./components/tag/tag.cjs');
+const textInput = require('./components/text-input/text-input.cjs');
+const textarea = require('./components/textarea/textarea.cjs');
+const toast = require('./components/toast/toast.cjs');
+const toastButton = require('./components/toast/toast-button.cjs');
+const toaster = require('./components/toaster/toaster.cjs');
+const tooltip = require('./components/tooltip/tooltip.cjs');
+
+
+
+exports.KeyboardKeys = keyboardKeys.KeyboardKeys;
+exports.assertIfNullable = helpers.assertIfNullable;
+exports.once = helpers.once;
+exports.classNames = reactHelpers.classNames;
+exports.focusElement = reactHelpers.focusElement;
+exports.isReactElementWithRef = reactHelpers.isReactElementWithRef;
+exports.mergeRefs = reactHelpers.mergeRefs;
+exports.useMountTransition = useMountTransition.useMountTransition;
+exports.useDisableBodyScroll = useDisableBodyScroll.useDisableBodyScroll;
+exports.useEscKeyDown = useEscKeyDown.useEscKeyDown;
+exports.useFocusTrap = useFocusTrap.useFocusTrap;
+exports.Alert = alert.Alert;
+exports.Avatar = avatar.Avatar;
+exports.AvatarGroup = avatarGroup.AvatarGroup;
+exports.Badge = badge.Badge;
+exports.Breadcrumbs = breadcrumbs.Breadcrumbs;
+exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
+exports.Button = button.Button;
+exports.IconButton = iconButton.IconButton;
+exports.ButtonGroup = buttonGroup.ButtonGroup;
+exports.Caption = caption.Caption;
+exports.Checkbox = checkbox.Checkbox;
+exports.ColorPicker = colorPicker.ColorPicker;
+exports.DatePicker = datePicker.DatePicker;
+exports.DateRangePicker = dateRangePicker.DateRangePicker;
+exports.DatePickerPopover = datePickerPopover.DatePickerPopover;
+exports.DateRangePickerPopover = dateRangePickerPopover.DateRangePickerPopover;
+exports.Dialog = dialog.Dialog;
+exports.DialogHeader = dialogHeader.DialogHeader;
+exports.DialogBody = dialogBody.DialogBody;
+exports.DialogFooter = dialogFooter.DialogFooter;
+exports.EmptyState = emptyState.EmptyState;
+exports.FilePicker = filePicker.FilePicker;
+exports.FilterButtons = filterButtons.FilterButtons;
+exports.FilterButton = filterButton.FilterButton;
+exports.FormField = formField.FormField;
+exports.Label = label.Label;
+exports.Menu = menu.Menu;
+exports.MenuItem = menuItem.MenuItem;
+exports.MenuSeparator = menuSeparator.MenuSeparator;
+exports.NavList = navList.NavList;
+exports.NavListItem = navListItem.NavListItem;
+exports.NavListTitle = navListTitle.NavListTitle;
+exports.PasswordInput = passwordInput.PasswordInput;
+exports.Popover = popover.Popover;
+exports.Portal = portal.Portal;
+exports.Positioner = positioner.Positioner;
+exports.Radio = radio.Radio;
+exports.SegmentedControl = segmentedControl.SegmentedControl;
+exports.Select = select.Select;
+exports.SelectionControl = selectionControl.SelectionControl;
+exports.Slider = slider.Slider;
+exports.SliderTickMarks = sliderTickMarks.SliderTickMarks;
+exports.Spinner = spinner.Spinner;
+exports.Switch = _switch.Switch;
+exports.TableContainer = tableContainer.TableContainer;
+exports.Table = table.Table;
+exports.TableHead = tableHead.TableHead;
+exports.TableBody = tableBody.TableBody;
+exports.TableRow = tableRow.TableRow;
+exports.TableHeadCell = tableHeadCell.TableHeadCell;
+exports.TableCell = tableCell.TableCell;
+exports.Tabs = tabs.Tabs;
+exports.TabList = tabList.TabList;
+exports.Tab = tab.Tab;
+exports.TabPanel = tabPanel.TabPanel;
+exports.Tag = tag.Tag;
+exports.TextInput = textInput.TextInput;
+exports.Textarea = textarea.Textarea;
+exports.Toast = toast.Toast;
+exports.ToastButton = toastButton.ToastButton;
+exports.Toaster = toaster.Toaster;
+exports.Tooltip = tooltip.Tooltip;

package/{dist/shared/util.js → cjs/lib/helpers.cjs}

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertIfNullable = exports.once = void 0;
+'use strict';
+
 function once(fn) {
     let called = false;
     let result;
@@ -12,10 +11,11 @@ function once(fn) {
         return result;
     };
 }
-exports.once = once;
 function assertIfNullable(value, message = 'value is null or undefined') {
     if (value == null) {
         throw Error(message);
     }
 }
+
 exports.assertIfNullable = assertIfNullable;
+exports.once = once;

package/cjs/lib/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const keyboardKeys = require('./keyboard-keys.cjs');
+const helpers = require('./helpers.cjs');
+const reactHelpers = require('./react-helpers.cjs');
+
+
+
+exports.KeyboardKeys = keyboardKeys.KeyboardKeys;
+exports.assertIfNullable = helpers.assertIfNullable;
+exports.once = helpers.once;
+exports.classNames = reactHelpers.classNames;
+exports.focusElement = reactHelpers.focusElement;
+exports.isReactElementWithRef = reactHelpers.isReactElementWithRef;
+exports.mergeRefs = reactHelpers.mergeRefs;

package/{dist/shared/keyboard-keys.js → cjs/lib/keyboard-keys.cjs}

@@ -1,7 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyboardKeys = void 0;
-exports.KeyboardKeys = {
+'use strict';
+
+const KeyboardKeys = {
     ArrowUp: 'ArrowUp',
     ArrowRight: 'ArrowRight',
     ArrowDown: 'ArrowDown',
@@ -15,3 +14,5 @@ exports.KeyboardKeys = {
     Escape: 'Escape',
     Space: ' ',
 };
+
+exports.KeyboardKeys = KeyboardKeys;

package/{dist/shared/react-helpers.js → cjs/lib/react-helpers.cjs}

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusElement = exports.isReactElementWithRef = exports.mergeRefs = exports.classNames = void 0;
-const react_1 = require("react");
+'use strict';
+
+const react = require('react');
+
 function classNames(...classes) {
     let resultString = '';
     for (const className of classes) {
@@ -21,7 +21,6 @@ function classNames(...classes) {
     }
     return resultString.trimEnd();
 }
-exports.classNames = classNames;
 function mergeRefs(...refs) {
     return (instance) => {
         for (const ref of refs) {
@@ -36,14 +35,16 @@ function mergeRefs(...refs) {
         }
     };
 }
-exports.mergeRefs = mergeRefs;
 function isReactElementWithRef(element) {
-    return (0, react_1.isValidElement)(element) && 'ref' in element;
+    return react.isValidElement(element) && 'ref' in element;
 }
-exports.isReactElementWithRef = isReactElementWithRef;
 function focusElement(element) {
     if (element != null && element instanceof HTMLElement) {
         element.focus();
     }
 }
+
+exports.classNames = classNames;
 exports.focusElement = focusElement;
+exports.isReactElementWithRef = isReactElementWithRef;
+exports.mergeRefs = mergeRefs;

package/css/draft-components-utilities.css

@@ -106,6 +106,10 @@
   font-weight: 800 !important;
 }
 
+.text-no-wrap {
+  white-space: nowrap;
+}
+
 /* Text truncation */
 
 .text-truncate {