colibri-ui 0.8.84 → 0.8.87

package/Datepicker/components/DatePicker/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var tslib = require('tslib');
 var React = require('react');
 var index$4 = require('../../../Dropdown/index.js');
@@ -15,92 +14,74 @@ var Calendar = require('../../../Calendar/Calendar.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var calendarSizeByDatepickerSize = {
+const calendarSizeByDatepickerSize = {
   l: "s",
   m: "xs",
   s: "xs"
 };
-var CalendarIcon = function CalendarIcon() {
-  return /*#__PURE__*/React__default.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    className: styles__default.default["calendar-icon"],
-    strokeWidth: 1.5,
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__default.default.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
-  }));
-};
-var DatePicker = function DatePicker(_a) {
+const CalendarIcon = () => (/*#__PURE__*/React__default.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  className: styles__default.default["calendar-icon"],
+  strokeWidth: 1.5,
+  stroke: "currentColor"
+}, /*#__PURE__*/React__default.default.createElement("path", {
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
+})));
+const DatePicker = _a => {
   var _b;
-  var className = _a.className,
-    endPlaceholder = _a.endPlaceholder,
-    hasError = _a.hasError,
-    hint = _a.hint,
-    label = _a.label,
-    placeholder = _a.placeholder,
-    required = _a.required,
-    _a$selectedDate = _a.selectedDate,
-    selectedDate = _a$selectedDate === void 0 ? "" : _a$selectedDate,
-    _a$selectedRange = _a.selectedRange,
-    selectedRange = _a$selectedRange === void 0 ? ["", ""] : _a$selectedRange,
-    _a$selectionMode = _a.selectionMode,
-    selectionMode = _a$selectionMode === void 0 ? "single" : _a$selectionMode,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? "m" : _a$size,
-    defaultVisibleMonth = _a.defaultVisibleMonth,
-    monthsToShow = _a.monthsToShow,
-    startPlaceholder = _a.startPlaceholder,
-    onChangeDate = _a.onChangeDate,
-    onChangeRange = _a.onChangeRange,
+  var {
+      className,
+      endPlaceholder,
+      hasError,
+      hint,
+      label,
+      placeholder,
+      required,
+      selectedDate = "",
+      selectedRange = ["", ""],
+      selectionMode = "single",
+      size = "m",
+      defaultVisibleMonth,
+      monthsToShow,
+      startPlaceholder,
+      onChangeDate,
+      onChangeRange
+    } = _a,
     calendarProps = tslib.__rest(_a, ["className", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "defaultVisibleMonth", "monthsToShow", "startPlaceholder", "onChangeDate", "onChangeRange"]);
-  var _useState = React.useState(selectedDate),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    date = _useState2[0],
-    setDate = _useState2[1];
-  var _useState3 = React.useState(selectedRange),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    range = _useState4[0],
-    setRange = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray__default.default(_useState5, 2),
-    isOpen = _useState6[0],
-    setIsOpen = _useState6[1];
-  var calendarValue = React.useMemo(function () {
-    return date ? index.parse(date) : null;
-  }, [date]);
-  var calendarRangeValue = React.useMemo(function () {
-    return [range[0] ? index.parse(range[0]) : null, range[1] ? index.parse(range[1]) : null];
-  }, [range]);
-  var calendarSize = calendarSizeByDatepickerSize[size];
-  var visibleMonth = (_b = calendarValue !== null && calendarValue !== void 0 ? calendarValue : calendarRangeValue[0]) !== null && _b !== void 0 ? _b : new Date();
-  var isRangeMode = selectionMode === "range";
-  React.useEffect(function () {
+  const [date, setDate] = React.useState(selectedDate);
+  const [range, setRange] = React.useState(selectedRange);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const calendarValue = React.useMemo(() => date ? index.parse(date) : null, [date]);
+  const calendarRangeValue = React.useMemo(() => [range[0] ? index.parse(range[0]) : null, range[1] ? index.parse(range[1]) : null], [range]);
+  const calendarSize = calendarSizeByDatepickerSize[size];
+  const visibleMonth = (_b = calendarValue !== null && calendarValue !== void 0 ? calendarValue : calendarRangeValue[0]) !== null && _b !== void 0 ? _b : new Date();
+  const isRangeMode = selectionMode === "range";
+  React.useEffect(() => {
     setDate(selectedDate);
   }, [selectedDate]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     setRange(selectedRange);
   }, [selectedRange]);
-  var handleDateChange = function handleDateChange(nextDate) {
-    var nextValue = index.toISODate(nextDate);
+  const handleDateChange = nextDate => {
+    const nextValue = index.toISODate(nextDate);
     setDate(nextValue);
     setIsOpen(false);
     onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(nextValue);
   };
-  var handleRangeChange = function handleRangeChange(nextRange) {
-    var nextValue = [nextRange[0] ? index.toISODate(nextRange[0]) : "", nextRange[1] ? index.toISODate(nextRange[1]) : ""];
+  const handleRangeChange = nextRange => {
+    const nextValue = [nextRange[0] ? index.toISODate(nextRange[0]) : "", nextRange[1] ? index.toISODate(nextRange[1]) : ""];
     setRange(nextValue);
     if (nextValue[0] && nextValue[1]) setIsOpen(false);
     onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange(nextValue);
   };
-  var renderCalendar = function renderCalendar() {
+  const renderCalendar = () => {
     if (isRangeMode) {
       return /*#__PURE__*/React__default.default.createElement(Calendar.Calendar, Object.assign({}, calendarProps, {
         className: className,
@@ -122,42 +103,40 @@ var DatePicker = function DatePicker(_a) {
       onChange: handleDateChange
     }));
   };
-  var renderRangeInput = function renderRangeInput() {
-    return /*#__PURE__*/React__default.default.createElement("div", {
-      className: styles__default.default["range-input"]
-    }, /*#__PURE__*/React__default.default.createElement(index$1.InputRoot, {
-      className: styles__default.default["range-control-start"],
-      disabled: false,
-      hasError: hasError,
-      size: size
-    }, /*#__PURE__*/React__default.default.createElement(index$2.BaseInput, {
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      "aria-invalid": hasError,
-      autoComplete: "off",
-      maxLength: 10,
-      placeholder: startPlaceholder !== null && startPlaceholder !== void 0 ? startPlaceholder : placeholder,
-      readOnly: true,
-      required: required,
-      value: index.toDMYDate(range[0])
-    })), /*#__PURE__*/React__default.default.createElement(index$1.InputRoot, {
-      className: styles__default.default["range-control-end"],
-      disabled: false,
-      endIcon: /*#__PURE__*/React__default.default.createElement(CalendarIcon, null),
-      hasError: hasError,
-      size: size
-    }, /*#__PURE__*/React__default.default.createElement(index$2.BaseInput, {
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      "aria-invalid": hasError,
-      autoComplete: "off",
-      maxLength: 10,
-      placeholder: endPlaceholder !== null && endPlaceholder !== void 0 ? endPlaceholder : placeholder,
-      readOnly: true,
-      required: required,
-      value: index.toDMYDate(range[1])
-    })));
-  };
+  const renderRangeInput = () => (/*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default["range-input"]
+  }, /*#__PURE__*/React__default.default.createElement(index$1.InputRoot, {
+    className: styles__default.default["range-control-start"],
+    disabled: false,
+    hasError: hasError,
+    size: size
+  }, /*#__PURE__*/React__default.default.createElement(index$2.BaseInput, {
+    "aria-expanded": isOpen,
+    "aria-haspopup": "true",
+    "aria-invalid": hasError,
+    autoComplete: "off",
+    maxLength: 10,
+    placeholder: startPlaceholder !== null && startPlaceholder !== void 0 ? startPlaceholder : placeholder,
+    readOnly: true,
+    required: required,
+    value: index.toDMYDate(range[0])
+  })), /*#__PURE__*/React__default.default.createElement(index$1.InputRoot, {
+    className: styles__default.default["range-control-end"],
+    disabled: false,
+    endIcon: /*#__PURE__*/React__default.default.createElement(CalendarIcon, null),
+    hasError: hasError,
+    size: size
+  }, /*#__PURE__*/React__default.default.createElement(index$2.BaseInput, {
+    "aria-expanded": isOpen,
+    "aria-haspopup": "true",
+    "aria-invalid": hasError,
+    autoComplete: "off",
+    maxLength: 10,
+    placeholder: endPlaceholder !== null && endPlaceholder !== void 0 ? endPlaceholder : placeholder,
+    readOnly: true,
+    required: required,
+    value: index.toDMYDate(range[1])
+  }))));
   return /*#__PURE__*/React__default.default.createElement(index$3.FormField, {
     label: label,
     required: required,

package/Datepicker/index.js

@@ -12,22 +12,23 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Datepicker = function Datepicker(_a) {
-  var className = _a.className,
-    endPlaceholder = _a.endPlaceholder,
-    hasError = _a.hasError,
-    hint = _a.hint,
-    label = _a.label,
-    placeholder = _a.placeholder,
-    required = _a.required,
-    selectedDate = _a.selectedDate,
-    selectedRange = _a.selectedRange,
-    selectionMode = _a.selectionMode,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? "m" : _a$size,
-    startPlaceholder = _a.startPlaceholder,
-    onChangeDate = _a.onChangeDate,
-    onChangeRange = _a.onChangeRange,
+const Datepicker = _a => {
+  var {
+      className,
+      endPlaceholder,
+      hasError,
+      hint,
+      label,
+      placeholder,
+      required,
+      selectedDate,
+      selectedRange,
+      selectionMode,
+      size = "m",
+      startPlaceholder,
+      onChangeDate,
+      onChangeRange
+    } = _a,
     calendarProps = tslib.__rest(_a, ["className", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange"]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(styles__default.default.root, className)

package/DotsLoader/index.js

@@ -1,29 +1,37 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var clsx = require('clsx');
 var styles = require('./DotsLoader.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var DotsLoader = function DotsLoader() {
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: styles__default.default.wrapper
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dot, true), styles__default.default.dot_first, true))
-  }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dot, true), styles__default.default.dot_second, true))
-  }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dot, true), styles__default.default.dot_third, true))
-  }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dot, true), styles__default.default.dot_fourth, true))
-  }));
-};
+const DotsLoader = () => (/*#__PURE__*/React__default.default.createElement("div", {
+  className: styles__default.default.wrapper
+}, /*#__PURE__*/React__default.default.createElement("div", {
+  className: clsx__default.default({
+    [styles__default.default.dot]: true,
+    [styles__default.default.dot_first]: true
+  })
+}), /*#__PURE__*/React__default.default.createElement("div", {
+  className: clsx__default.default({
+    [styles__default.default.dot]: true,
+    [styles__default.default.dot_second]: true
+  })
+}), /*#__PURE__*/React__default.default.createElement("div", {
+  className: clsx__default.default({
+    [styles__default.default.dot]: true,
+    [styles__default.default.dot_third]: true
+  })
+}), /*#__PURE__*/React__default.default.createElement("div", {
+  className: clsx__default.default({
+    [styles__default.default.dot]: true,
+    [styles__default.default.dot_fourth]: true
+  })
+})));
 
 exports.DotsLoader = DotsLoader;

package/Drawer/Drawer.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var tslib = require('tslib');
 var React = require('react');
 var ReactDOM = require('react-dom');
@@ -8,71 +7,55 @@ var styles = require('./Drawer.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var cx = function cx() {
-  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
-    classNames[_key] = arguments[_key];
-  }
-  return classNames.filter(Boolean).join(" ");
-};
-var toSize = function toSize(value, fallback) {
-  return value === undefined ? fallback : typeof value === "number" ? "".concat(value, "px") : value;
-};
-var toOffset = function toOffset(value) {
-  return typeof value === "number" ? "".concat(value, "px") : value;
-};
-var focusableSelector = ["a[href]", "button:not([disabled])", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
-var Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRef) {
-  var opened = _a.opened,
-    _a$placement = _a.placement,
-    placement = _a$placement === void 0 ? "right" : _a$placement,
-    width = _a.width,
-    height = _a.height,
-    _a$offset = _a.offset,
-    offset = _a$offset === void 0 ? [0, 0] : _a$offset,
-    _a$zIndex = _a.zIndex,
-    zIndex = _a$zIndex === void 0 ? 1000 : _a$zIndex,
-    _a$asModal = _a.asModal,
-    asModal = _a$asModal === void 0 ? true : _a$asModal,
-    _a$withBlur = _a.withBlur,
-    withBlur = _a$withBlur === void 0 ? false : _a$withBlur,
-    _a$closeOnEsc = _a.closeOnEsc,
-    closeOnEsc = _a$closeOnEsc === void 0 ? true : _a$closeOnEsc,
-    _a$closeOnOverlayClic = _a.closeOnOverlayClick,
-    closeOnOverlayClick = _a$closeOnOverlayClic === void 0 ? true : _a$closeOnOverlayClic,
-    _a$borderRadius = _a.borderRadius,
-    borderRadius = _a$borderRadius === void 0 ? "none" : _a$borderRadius,
-    customBackgroundColor = _a.customBackgroundColor,
-    customContentBackgroundColor = _a.customContentBackgroundColor,
-    animationInfo = _a.animationInfo,
-    initialFocusRef = _a.initialFocusRef,
-    focusAfterRef = _a.focusAfterRef,
-    portalContainer = _a.portalContainer,
-    onClose = _a.onClose,
-    onEscKeyDown = _a.onEscKeyDown,
-    onOverlayClick = _a.onOverlayClick,
-    className = _a.className,
-    style = _a.style,
-    children = _a.children,
-    rest = tslib.__rest(_a, ["opened", "placement", "width", "height", "offset", "zIndex", "asModal", "withBlur", "closeOnEsc", "closeOnOverlayClick", "borderRadius", "customBackgroundColor", "customContentBackgroundColor", "animationInfo", "initialFocusRef", "focusAfterRef", "portalContainer", "onClose", "onEscKeyDown", "onOverlayClick", "className", "style", "children"]);
-  var panelRef = React.useRef(null);
-  var previousFocus = React.useRef(null);
-  var _useState = React.useState(opened),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    rendered = _useState2[0],
-    setRendered = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    closing = _useState4[0],
-    setClosing = _useState4[1];
-  var setPanelRef = function setPanelRef(element) {
+const cx = (...classNames) => classNames.filter(Boolean).join(" ");
+const toSize = (value, fallback) => value === undefined ? fallback : typeof value === "number" ? `${value}px` : value;
+const toOffset = value => typeof value === "number" ? `${value}px` : value;
+const focusableSelector = ["a[href]", "button:not([disabled])", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
+const Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRef) {
+  var {
+      opened,
+      placement = "right",
+      width,
+      height,
+      offset = [0, 0],
+      zIndex = 1000,
+      asModal = true,
+      withBlur = false,
+      closeOnEsc = true,
+      closeOnOverlayClick = true,
+      borderRadius = "none",
+      customBackgroundColor,
+      customContentBackgroundColor,
+      animationInfo,
+      initialFocusRef,
+      focusAfterRef,
+      portalContainer,
+      onClose,
+      onClosed,
+      onEscKeyDown,
+      onOverlayClick,
+      className,
+      style,
+      children
+    } = _a,
+    rest = tslib.__rest(_a, ["opened", "placement", "width", "height", "offset", "zIndex", "asModal", "withBlur", "closeOnEsc", "closeOnOverlayClick", "borderRadius", "customBackgroundColor", "customContentBackgroundColor", "animationInfo", "initialFocusRef", "focusAfterRef", "portalContainer", "onClose", "onClosed", "onEscKeyDown", "onOverlayClick", "className", "style", "children"]);
+  const panelRef = React.useRef(null);
+  const previousFocus = React.useRef(null);
+  const [rendered, setRendered] = React.useState(opened);
+  const [closing, setClosing] = React.useState(false);
+  // The latest callback without restarting the closing timer.
+  const onClosedRef = React.useRef(onClosed);
+  React.useEffect(() => {
+    onClosedRef.current = onClosed;
+  }, [onClosed]);
+  const setPanelRef = element => {
     panelRef.current = element;
     if (typeof forwardedRef === "function") forwardedRef(element);else if (forwardedRef) forwardedRef.current = element;
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (opened) {
       setRendered(true);
       setClosing(false);
@@ -80,40 +63,40 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRef)
     }
     if (!rendered) return;
     setClosing(true);
-    var timeout = window.setTimeout(function () {
+    const timeout = window.setTimeout(() => {
+      var _a;
       setRendered(false);
       setClosing(false);
+      (_a = onClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onClosedRef);
     }, 200);
-    return function () {
-      return window.clearTimeout(timeout);
-    };
+    return () => window.clearTimeout(timeout);
   }, [opened, rendered]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!opened || typeof document === "undefined") return;
     previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    var previousOverflow = document.body.style.overflow;
-    var focusAfterElement = focusAfterRef === null || focusAfterRef === void 0 ? void 0 : focusAfterRef.current;
+    const previousOverflow = document.body.style.overflow;
+    const focusAfterElement = focusAfterRef === null || focusAfterRef === void 0 ? void 0 : focusAfterRef.current;
     if (asModal) document.body.style.overflow = "hidden";
-    var focusFrame = window.requestAnimationFrame(function () {
+    const focusFrame = window.requestAnimationFrame(() => {
       var _a, _b, _c, _d;
-      var firstFocusable = (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector);
+      const firstFocusable = (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector);
       (_d = (_c = (_b = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) !== null && _b !== void 0 ? _b : firstFocusable) !== null && _c !== void 0 ? _c : panelRef.current) === null || _d === void 0 ? void 0 : _d.focus();
     });
-    var handleKeyDown = function handleKeyDown(event) {
+    const handleKeyDown = event => {
       if (event.key === "Escape" && closeOnEsc) {
         onEscKeyDown === null || onEscKeyDown === void 0 ? void 0 : onEscKeyDown(event);
         if (!event.defaultPrevented) onClose === null || onClose === void 0 ? void 0 : onClose();
         return;
       }
       if (!asModal || event.key !== "Tab" || !panelRef.current) return;
-      var focusable = Array.from(panelRef.current.querySelectorAll(focusableSelector));
+      const focusable = Array.from(panelRef.current.querySelectorAll(focusableSelector));
       if (!focusable.length) {
         event.preventDefault();
         panelRef.current.focus();
         return;
       }
-      var first = focusable[0];
-      var last = focusable[focusable.length - 1];
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
       if (event.shiftKey && document.activeElement === first) {
         event.preventDefault();
         last.focus();
@@ -123,7 +106,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRef)
       }
     };
     document.addEventListener("keydown", handleKeyDown);
-    return function () {
+    return () => {
       var _a;
       window.cancelAnimationFrame(focusFrame);
       document.removeEventListener("keydown", handleKeyDown);
@@ -132,8 +115,8 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRef)
     };
   }, [opened, asModal, closeOnEsc, focusAfterRef, initialFocusRef, onClose, onEscKeyDown]);
   if (!rendered || typeof document === "undefined") return null;
-  var sidePlacement = placement === "left" || placement === "right";
-  var panelStyle = Object.assign(Object.assign({}, style), {
+  const sidePlacement = placement === "left" || placement === "right";
+  const panelStyle = Object.assign(Object.assign({}, style), {
     "--drawer-width": toSize(width, sidePlacement ? "100%" : "100vw"),
     "--drawer-height": toSize(height, sidePlacement ? "100dvh" : "100%"),
     "--drawer-offset-x": toOffset(offset[0]),
@@ -143,21 +126,21 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRef)
     "--drawer-enter-animation": animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.enter,
     "--drawer-exit-animation": animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.exit
   });
-  var drawer = /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
+  const drawer = /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
     className: cx(styles__default.default.root, !asModal && styles__default.default["non-modal"], closing && styles__default.default.closing, className),
     style: {
-      zIndex: zIndex
+      zIndex
     }
   }), asModal && (/*#__PURE__*/React__default.default.createElement("div", {
     className: cx(styles__default.default.overlay, withBlur && styles__default.default["overlay-blur"]),
     "aria-hidden": "true",
-    onClick: function onClick(event) {
+    onClick: event => {
       onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick(event);
       if (closeOnOverlayClick && !event.defaultPrevented) onClose === null || onClose === void 0 ? void 0 : onClose();
     }
   })), /*#__PURE__*/React__default.default.createElement("div", {
     ref: setPanelRef,
-    className: cx(styles__default.default.panel, styles__default.default[placement], styles__default.default["radius-".concat(borderRadius)]),
+    className: cx(styles__default.default.panel, styles__default.default[placement], styles__default.default[`radius-${borderRadius}`]),
     style: panelStyle,
     role: "dialog",
     "aria-modal": asModal || undefined,
@@ -170,19 +153,18 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DrawerRoot(_a, forwardedRef)
   }, children)));
   return /*#__PURE__*/ReactDOM.createPortal(drawer, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
 });
-var DrawerHeader = /*#__PURE__*/React.forwardRef(function DrawerHeaderRoot(_a, ref) {
-  var actions = _a.actions,
-    _a$hasClose = _a.hasClose,
-    hasClose = _a$hasClose === void 0 ? true : _a$hasClose,
-    _a$closePlacement = _a.closePlacement,
-    closePlacement = _a$closePlacement === void 0 ? "right" : _a$closePlacement,
-    _a$closeAriaLabel = _a.closeAriaLabel,
-    closeAriaLabel = _a$closeAriaLabel === void 0 ? "Close" : _a$closeAriaLabel,
-    onClose = _a.onClose,
-    className = _a.className,
-    children = _a.children,
+const DrawerHeader = /*#__PURE__*/React.forwardRef(function DrawerHeaderRoot(_a, ref) {
+  var {
+      actions,
+      hasClose = true,
+      closePlacement = "right",
+      closeAriaLabel = "Close",
+      onClose,
+      className,
+      children
+    } = _a,
     rest = tslib.__rest(_a, ["actions", "hasClose", "closePlacement", "closeAriaLabel", "onClose", "className", "children"]);
-  var closeButton = hasClose && (/*#__PURE__*/React__default.default.createElement("button", {
+  const closeButton = hasClose && (/*#__PURE__*/React__default.default.createElement("button", {
     className: styles__default.default["close-button"],
     type: "button",
     "aria-label": closeAriaLabel,
@@ -202,18 +184,22 @@ var DrawerHeader = /*#__PURE__*/React.forwardRef(function DrawerHeaderRoot(_a, r
     className: styles__default.default.actions
   }, actions), closePlacement === "right" && closeButton);
 });
-var DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerContentRoot(_a, ref) {
-  var className = _a.className,
-    children = _a.children,
+const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerContentRoot(_a, ref) {
+  var {
+      className,
+      children
+    } = _a,
     rest = tslib.__rest(_a, ["className", "children"]);
   return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
     ref: ref,
     className: cx(styles__default.default.content, className)
   }), children);
 });
-var DrawerFooter = /*#__PURE__*/React.forwardRef(function DrawerFooterRoot(_a, ref) {
-  var className = _a.className,
-    children = _a.children,
+const DrawerFooter = /*#__PURE__*/React.forwardRef(function DrawerFooterRoot(_a, ref) {
+  var {
+      className,
+      children
+    } = _a,
     rest = tslib.__rest(_a, ["className", "children"]);
   return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
     ref: ref,

package/Drawer/Drawer.module.css

@@ -17,7 +17,8 @@
 }
 
 .overlay-blur {
-  backdrop-filter: blur(var(--space-3));
+  -webkit-backdrop-filter: blur(var(--space-3));
+          backdrop-filter: blur(var(--space-3));
   background: color-mix(in srgb, var(--component-modal-overlay) 80%, transparent);
 }
 

package/Drawer/index.props.d.ts

@@ -24,6 +24,8 @@ export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onAni
     focusAfterRef?: RefObject<HTMLElement | null>;
     portalContainer?: HTMLElement | null;
     onClose?: () => void;
+    /** Called once the closing animation has finished and the drawer is removed. */
+    onClosed?: () => void;
     onEscKeyDown?: (event: KeyboardEvent) => void;
     onOverlayClick?: MouseEventHandler<HTMLDivElement>;
 }