colibri-ui 0.8.93 → 0.8.95

package/hooks/useTrapFocus/index.js

@@ -2,16 +2,71 @@
 
 var React = require('react');
 
-const getFocusableModalElements = element => element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="password"], input[type="radio"], input[type="checkbox"], select');
-function useTrapFocus(refObject, isActive) {
+const candidateSelector = ["a[href]", "button", "textarea", 'input:not([type="hidden"])', "select", "[tabindex]", '[role="button"]'].join(",");
+// The selector only finds candidates: `[tabindex]` also matches disabled
+// controls and `[role="button"]` alone does not make an element focusable.
+const isTabbable = node => node.tabIndex >= 0 && !node.matches(":disabled");
+const getFocusableElements = element => Array.from(element.querySelectorAll(candidateSelector)).filter(isTabbable);
+// Open traps in mount order, so a closing trap can hand its saved focus to
+// traps opened on top of it.
+const focusStack = [];
+/**
+ * Moves focus into `element` when it mounts (first focusable element, or the
+ * element itself, which needs tabIndex={-1}), keeps Tab inside it while
+ * `isActive` returns true, and returns focus to the previously focused
+ * element when it unmounts.
+ */
+function useTrapFocus(element, isActive) {
+  // Read during render, before children with autoFocus take focus.
+  const previousFocusRef = React.useRef(null);
+  if (!element && typeof document !== "undefined") {
+    previousFocusRef.current = document.activeElement;
+  }
   React.useEffect(() => {
+    var _a;
+    if (!element) return;
+    const entry = {
+      element,
+      previousFocus: previousFocusRef.current
+    };
+    focusStack.push(entry);
+    if (!element.contains(document.activeElement)) {
+      ((_a = getFocusableElements(element)[0]) !== null && _a !== void 0 ? _a : element).focus();
+    }
+    return () => {
+      focusStack.splice(focusStack.indexOf(entry), 1);
+      // Traps opened from inside this one would restore focus to a removed
+      // element; give them the focus this trap saved instead.
+      focusStack.forEach(other => {
+        if (element.contains(other.previousFocus)) {
+          other.previousFocus = entry.previousFocus;
+        }
+      });
+      // Focus inside another trap stays there. Focus removed with this
+      // element falls back to body.
+      const active = document.activeElement;
+      const ownsFocus = !active || active === document.body || element.contains(active);
+      const {
+        previousFocus
+      } = entry;
+      if (ownsFocus && previousFocus instanceof HTMLElement && previousFocus.isConnected) {
+        previousFocus.focus();
+      }
+    };
+  }, [element]);
+  React.useEffect(() => {
+    if (!element) return;
     const handler = event => {
-      if (!refObject.current || event.code !== "Tab") return;
+      if (event.key !== "Tab") return;
       if (isActive && !isActive()) return;
-      const focusable = Array.from(getFocusableModalElements(refObject.current));
+      const focusable = getFocusableElements(element);
       const firstElement = focusable[0];
       const lastElement = focusable[focusable.length - 1];
-      if (!lastElement || !firstElement) return;
+      if (!lastElement || !firstElement) {
+        event.preventDefault();
+        element.focus();
+        return;
+      }
       const focusOutside = document.activeElement ? !focusable.includes(document.activeElement) : true;
       if (event.shiftKey && (document.activeElement === firstElement || focusOutside)) {
         lastElement.focus();
@@ -25,7 +80,7 @@ function useTrapFocus(refObject, isActive) {
     return () => {
       document.removeEventListener("keydown", handler);
     };
-  }, [refObject, isActive]);
+  }, [element, isActive]);
 }
 
 exports.useTrapFocus = useTrapFocus;

package/index.d.ts

@@ -52,6 +52,8 @@ export { MultiSelect } from "./MultiSelect";
 export type { MultiSelectProps } from "./MultiSelect/index.props";
 export { NumberInput } from "./NumberInput";
 export type { NumberInputGroupStyle, NumberInputProps, NumberInputSize, NumberInputValues, } from "./NumberInput";
+export { Pagination, getPaginationItems } from "./Pagination";
+export type { PaginationItem, PaginationMode, PaginationProps, PaginationSize, } from "./Pagination";
 export { Portal } from "./Portal";
 export type { PortalProps } from "./Portal/index.props";
 export { Progress } from "./Progress";

package/index.js

@@ -27,6 +27,7 @@ var index$f = require('./Menu/components/MenuItem/index.js');
 var index$g = require('./Modal/index.js');
 var index$l = require('./MultiSelect/index.js');
 require('./NumberInput/index.js');
+require('./Pagination/index.js');
 var index$m = require('./Portal/index.js');
 require('./Progress/index.js');
 var index$n = require('./RadioGroup/index.js');
@@ -78,6 +79,7 @@ var index$j = require('./Modal/components/Header/index.js');
 var index$k = require('./Modal/components/Title/index.js');
 var More = require('./Icons/More.js');
 var NumberInput = require('./NumberInput/NumberInput.js');
+var Pagination = require('./Pagination/Pagination.js');
 var Plus = require('./Icons/Plus.js');
 var Progress = require('./Progress/Progress.js');
 var Rating = require('./Rating/Rating.js');
@@ -87,6 +89,7 @@ var Shield = require('./Icons/Shield.js');
 var Slider = require('./Slider/Slider.js');
 var Trash = require('./Icons/Trash.js');
 var User = require('./Icons/User.js');
+var helpers = require('./Pagination/helpers.js');
 
 
 
@@ -166,6 +169,7 @@ exports.ModalHeader = index$j.Header;
 exports.ModalTitle = index$k.Title;
 exports.More = More.More;
 exports.NumberInput = NumberInput.NumberInput;
+exports.Pagination = Pagination.Pagination;
 exports.Plus = Plus.Plus;
 exports.Progress = Progress.Progress;
 exports.Rating = Rating.Rating;
@@ -175,3 +179,4 @@ exports.Shield = Shield.Shield;
 exports.Slider = Slider.Slider;
 exports.Trash = Trash.Trash;
 exports.User = User.User;
+exports.getPaginationItems = helpers.getPaginationItems;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.93",
+  "version": "0.8.95",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",

package/theme_ba_variables.css

@@ -608,6 +608,11 @@
 --component-calendar-fade-inline-size: 2.5rem;
 --component-calendar-day-size: 2rem;
 --component-calendar-day-radius: 0.375rem;
+--component-pagination-text: #163300;
+--component-pagination-text-current: #9FE870;
+--component-pagination-bg-current: #163300;
+--component-pagination-bg-hover: #EDF0EA;
+--component-pagination-focus-ring: #9FE870;
 --component-navigation-item-bg-selected: #163300;
 --component-chip-bg-selected: #163300;
 --component-chip-bg-selected-strong: #9FE870;

package/theme_jaipur_variables.css

@@ -608,6 +608,11 @@
 --component-calendar-fade-inline-size: 2.5rem;
 --component-calendar-day-size: 2rem;
 --component-calendar-day-radius: 0.375rem;
+--component-pagination-text: #2C2242;
+--component-pagination-text-current: #FFA8CD;
+--component-pagination-bg-current: #2C2242;
+--component-pagination-bg-hover: #F2F1EE;
+--component-pagination-focus-ring: #FFA8CD;
 --component-navigation-item-bg-selected: #2C2242;
 --component-chip-bg-selected: #2C2242;
 --component-chip-bg-selected-strong: #FFA8CD;