colibri-ui 0.8.1 → 0.8.4

package/esm/lib/keyboard.js

@@ -0,0 +1,25 @@
+var Keys = {
+  BACKSPACE: "Backspace",
+  TAB: "Tab",
+  ENTER: "Enter",
+  CAPS_LOCK: "CapsLock",
+  ESC: "Escape",
+  SPACE: " ",
+  PAGE_UP: "PageUp",
+  PAGE_DOWN: "PageDown",
+  END: "End",
+  HOME: "Home",
+  LEFT: "ArrowLeft",
+  UP: "ArrowUp",
+  RIGHT: "ArrowRight",
+  DOWN: "ArrowDown",
+  INSERT: "Insert",
+  DELETE: "Delete"
+};
+function isKey(eventKey, keys) {
+  return keys.some(function (value) {
+    return Keys[value] === eventKey || value === eventKey;
+  });
+}
+
+export { Keys, isKey };

package/esm/libs/numbers/leadingZeros.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns a string of requested characters length with leading zeros if initial value is shorter
+ */
+export declare function leadingZeros(num: number | string, charsCount: number): string;

package/{src/components/libs/numbers/leadingZeros.ts → esm/libs/numbers/leadingZeros.js}

@@ -1,12 +1,12 @@
 /**
  * Returns a string of requested characters length with leading zeros if initial value is shorter
  */
-export function leadingZeros(num: number | string, charsCount: number) {
-  let str = String(num);
-
+function leadingZeros(num, charsCount) {
+  var str = String(num);
   while (str.length < charsCount) {
     str = "0" + str;
   }
-
   return str;
 }
+
+export { leadingZeros };

package/esm/libs/requestIdleCallback/index.d.ts

@@ -0,0 +1,5 @@
+type Options = {
+    timeout: number;
+};
+export declare function requestIdleCallback(callback: Function, options?: Options): void;
+export {};

package/{src/components/libs/requestIdleCallback/index.ts → esm/libs/requestIdleCallback/index.js}

@@ -1,13 +1,11 @@
-type Options = {
-  timeout: number;
-};
 // eslint-disable-next-line @typescript-eslint/ban-types
-export function requestIdleCallback(callback: Function, options?: Options) {
+function requestIdleCallback(callback, options) {
   if (typeof window !== "undefined" && "requestIdleCallback" in window) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     window.requestIdleCallback(callback, options);
   }
-
   setTimeout(callback, 10);
 }
+
+export { requestIdleCallback };

package/esm/theme_ba_variables.css

@@ -0,0 +1,151 @@
+.theme {
+--palette-black: #000;
+--palette-white: #FFF;
+--palette-bg-1: #ECEEF2;
+--palette-bg-2: #E4E6EA;
+--palette-bg-3: #D6D9E0;
+--palette-bg-4: #C9CDD6;
+--palette-bg-5: #BCC1CC;
+--palette-brand-default-1: #FCDFE2;
+--palette-brand-default-2: #FACDD2;
+--palette-brand-default-3: #F59FA7;
+--palette-primary-1: #FFE695;
+--palette-primary-2: #FFE07B;
+--palette-primary-3: #FFD85A;
+--palette-primary-4: #FFCE31;
+--palette-primary-5: #FFC818;
+--palette-secondary-1: #818b98;
+--palette-secondary-2: #59636e;
+--palette-secondary-3: #393f46;
+--palette-secondary-4: #25292e;
+--palette-secondary-5: #1f2328;
+--palette-tretiary-1: #DFE7FA;
+--palette-tretiary-2: #C0CFF8;
+--palette-tretiary-3: #AFC3F5;
+--palette-tretiary-4: #80A0ED;
+--palette-tretiary-5: #6088EA;
+--palette-alert: #FF564E;
+--palette-success: #4AC99B;
+--typography-alert: #FF564E;
+--typography-success: #4AC99B;
+--typography-secondary: rgba(0, 0, 0, .6);
+--button-primary-color: #000;
+--button-primary-bg: #FFCE31;
+--button-primary-border-color: #FFCE31;
+--button-primary-color-hovered: #000;
+--button-primary-bg-hovered: #FFCE31;
+--button-primary-border-color-hovered: #FFCE31;
+--button-primary-color-active: #000;
+--button-primary-bg-active: #FFC818;
+--button-primary-border-color-active: #FFC818;
+--button-primary-color-disabled: #C9CDD6;
+--button-primary-bg-disabled: #FFE695;
+--button-primary-border-color-disabled: #FFE695;
+--button-secondary-color: #FFF;
+--button-secondary-bg: #25292e;
+--button-secondary-border-color: #25292e;
+--button-secondary-color-hovered: #FFF;
+--button-secondary-bg-hovered: #1f2328;
+--button-secondary-border-color-hovered: #25292e;
+--button-secondary-color-active: #FFF;
+--button-secondary-bg-active: #000;
+--button-secondary-border-color-active: #1f2328;
+--button-secondary-color-disabled: #C9CDD6;
+--button-secondary-bg-disabled: #ECEEF2;
+--button-secondary-border-color-disabled: #ECEEF2;
+--button-outline-color: #000;
+--button-outline-bg: #FFF;
+--button-outline-border-color: #25292e;
+--button-outline-color-hovered: #000;
+--button-outline-bg-hovered: #ECEEF2;
+--button-outline-border-color-hovered: #25292e;
+--button-outline-color-active: #000;
+--button-outline-bg-active: #E4E6EA;
+--button-outline-border-color-active: #25292e;
+--button-outline-color-disabled: #C9CDD6;
+--button-outline-bg-disabled: #FFF;
+--button-outline-border-color-disabled: #E4E6EA;
+--button-pseudo-color: #000;
+--button-pseudo-bg: #DFE7FA;
+--button-pseudo-border-color: #DFE7FA;
+--button-pseudo-color-hovered: #000;
+--button-pseudo-bg-hovered: #DFE7FA;
+--button-pseudo-border-color-hovered: #DFE7FA;
+--button-pseudo-color-active: #000;
+--button-pseudo-bg-active: #C0CFF8;
+--button-pseudo-border-color-active: #C0CFF8;
+--button-pseudo-color-disabled: #C9CDD6;
+--button-pseudo-bg-disabled: #DFE7FA;
+--button-pseudo-border-color-disabled: #DFE7FA;
+--button-alert-color: #FFF;
+--button-alert-bg: #FF564E;
+--button-alert-border-color: #FF564E;
+--button-alert-color-hovered: #FFF;
+--button-alert-bg-hovered: #e72d24;
+--button-alert-border-color-hovered: #e72d24;
+--button-alert-color-active: #FFF;
+--button-alert-bg-active: #af2d26;
+--button-alert-border-color-active: #af2d26;
+--button-alert-color-disabled: #C9CDD6;
+--button-alert-bg-disabled: #ffeeed;
+--button-alert-border-color-disabled: #ffeeed;
+--button-success-color: #000;
+--button-success-bg: #4AC99B;
+--button-success-border-color: #4AC99B;
+--button-success-color-hovered: #000;
+--button-success-bg-hovered: #42b48b;
+--button-success-border-color-hovered: #42b48b;
+--button-success-color-active: #000;
+--button-success-bg-active: #3ba07c;
+--button-success-border-color-active: #3ba07c;
+--button-success-color-disabled: #C9CDD6;
+--button-success-bg-disabled: #ecf9f5;
+--button-success-border-color-disabled: #ecf9f5;
+--button-clear-color: #25292e;
+--button-clear-color-hovered: #25292e;
+--button-clear-color-active: #1f2328;
+--button-clear-color-disabled: #C9CDD6;
+--button-clear-bg-disabled: #FFF;
+--button-clear-border-color-disabled: #FFF;
+--input-primary-border-color: #D6D9E0;
+--input-primary-plaseholder-color: #E4E6EA;
+--input-primary-border-color-error: #FF564E;
+--input-primary-bg-error: #FFEAE2;
+--input-primary-box-shadow-color-error: #FFEAE2;
+--checkbox-bg-checked: #FFCE31;
+--checkbox-bg-hovered: #FFCE31;
+--checkbox-box-shadow-focused: #FFE695;
+--checkbox-bg-active: #FFCE31;
+--checkbox-border-color-active: #FFCE31;
+--checkbox-box-shadow-active: #FFCE31;
+--checkbox-bg-disabled: #FFE695;
+--input-radio-bg-checked: #FFCE31;
+--input-radio-bg-hovered: #FFCE31;
+--input-radio-box-shadow-focused: #FFE695;
+--input-radio-bg-focused: #FFE695;
+--input-radio-border-color-focused: #FFE695;
+--switch-bg: #E4E6EA;
+--switch-border-color: #E4E6EA;
+--switch-bg-checked: #FFC818;
+--switch-border-color-checked: #FFC818;
+--tooltip-bg: #393f46;
+--tooltip-color: #FFF;
+--status-failure: #FF564E;
+--status-failure-bg: #ffeeed;
+--status-success: #4AC99B;
+--status-success-bg: #ecf9f5;
+--status-warning: #ffc700;
+--status-warning-bg: rgba(255, 199, 0, .12);
+--status-info: #70b6f6;
+--status-info-bg: rgba(112, 182, 246, .12);
+--status-neutral: #BCC1CC;
+--status-neutral-bg: #ECEEF2;
+--promo-silver: #EDF2F7;
+--promo-gold: #FFF1B8;
+--promo-asphalt: #EAEBEB;
+--promo-tomato: #FFDEDE;
+--promo-copper: #FFE6C4;
+--promo-mint: #CCF0D2;
+--promo-sky: #D6E9FD;
+--promo-neon: #ECE2FC;
+}

package/esm/theme_default_variables.css

@@ -0,0 +1,143 @@
+.theme {
+--palette-black: #000;
+--palette-white: #FFF;
+--palette-bg-1: #ECEEF2;
+--palette-bg-2: #E4E6EA;
+--palette-bg-3: #D6D9E0;
+--palette-bg-4: #C9CDD6;
+--palette-bg-5: #BCC1CC;
+--palette-brand-default-1: #f6aadc;
+--palette-brand-default-2: #F393D2;
+--palette-brand-default-3: #ee65bf;
+--palette-primary-1: #E8F0FE;
+--palette-primary-2: #B8D2FF;
+--palette-primary-3: #73ABF8;
+--palette-primary-4: #067AFF;
+--palette-primary-5: #0066DC;
+--palette-secondary-1: #FFF1DB;
+--palette-secondary-2: #FFDAA3;
+--palette-secondary-3: #FFCA79;
+--palette-secondary-4: #F4B968;
+--palette-secondary-5: #FFAB0F;
+--palette-tretiary-1: #FFF5F0;
+--palette-tretiary-2: #FFEAE2;
+--palette-tretiary-3: #FFD8CA;
+--palette-tretiary-4: #FFA384;
+--palette-tretiary-5: #FC5200;
+--palette-alert: #FF564E;
+--palette-success: #4AC99B;
+--typography-alert: #FF564E;
+--typography-success: #4AC99B;
+--typography-secondary: rgba(0, 0, 0, .6);
+--button-primary-color: #FFF;
+--button-primary-bg: #067AFF;
+--button-primary-border-color: #067AFF;
+--button-primary-color-hovered: #FFF;
+--button-primary-bg-hovered: #0066DC;
+--button-primary-border-color-hovered: #0066DC;
+--button-primary-color-active: #FFF;
+--button-primary-bg-active: #0066DC;
+--button-primary-border-color-active: #0066DC;
+--button-primary-color-disabled: #C9CDD6;
+--button-primary-bg-disabled: #E8F0FE;
+--button-primary-border-color-disabled: #E8F0FE;
+--button-secondary-color: #FFF;
+--button-secondary-bg: #F4B968;
+--button-secondary-border-color: #F4B968;
+--button-secondary-color-hovered: #FFF;
+--button-secondary-bg-hovered: #FFAB0F;
+--button-secondary-border-color-hovered: #FFAB0F;
+--button-secondary-color-active: #FFF;
+--button-secondary-bg-active: #FFAB0F;
+--button-secondary-border-color-active: #FFAB0F;
+--button-secondary-color-disabled: #C9CDD6;
+--button-secondary-bg-disabled: #FFF1DB;
+--button-secondary-border-color-disabled: #FFF1DB;
+--button-pseudo-color: #000;
+--button-pseudo-bg: #FFF5F0;
+--button-pseudo-border-color: #FFF5F0;
+--button-pseudo-color-hovered: #000;
+--button-pseudo-bg-hovered: #FFF5F0;
+--button-pseudo-border-color-hovered: #FFF5F0;
+--button-pseudo-color-active: #000;
+--button-pseudo-bg-active: #FFEAE2;
+--button-pseudo-border-color-active: #FFEAE2;
+--button-pseudo-color-disabled: #C9CDD6;
+--button-pseudo-bg-disabled: #FFF5F0;
+--button-pseudo-border-color-disabled: #FFF5F0;
+--button-outline-color: #000;
+--button-outline-bg: #FFF;
+--button-outline-border-color: #D6D9E0;
+--button-outline-color-hovered: #000;
+--button-outline-bg-hovered: #ECEEF2;
+--button-outline-border-color-hovered: #D6D9E0;
+--button-outline-color-active: #000;
+--button-outline-bg-active: #E4E6EA;
+--button-outline-border-color-active: #D6D9E0;
+--button-outline-color-disabled: #C9CDD6;
+--button-outline-bg-disabled: #FFF;
+--button-outline-border-color-disabled: #E4E6EA;
+--button-alert-color: #FFF;
+--button-alert-bg: #FF564E;
+--button-alert-border-color: #FF564E;
+--button-alert-color-hovered: #FFF;
+--button-alert-bg-hovered: #e72d24;
+--button-alert-border-color-hovered: #e72d24;
+--button-alert-color-active: #FFF;
+--button-alert-bg-active: #af2d26;
+--button-alert-border-color-active: #af2d26;
+--button-alert-color-disabled: #C9CDD6;
+--button-alert-bg-disabled: #ffeeed;
+--button-alert-border-color-disabled: #ffeeed;
+--button-success-color: #000;
+--button-success-bg: #4AC99B;
+--button-success-border-color: #4AC99B;
+--button-success-color-hovered: #000;
+--button-success-bg-hovered: #42b48b;
+--button-success-border-color-hovered: #42b48b;
+--button-success-color-active: #000;
+--button-success-bg-active: #3ba07c;
+--button-success-border-color-active: #3ba07c;
+--button-success-color-disabled: #C9CDD6;
+--button-success-bg-disabled: #ecf9f5;
+--button-success-border-color-disabled: #ecf9f5;
+--button-clear-color: #067AFF;
+--button-clear-color-hovered: #067AFF;
+--button-clear-color-active: #0066DC;
+--button-clear-color-disabled: #C9CDD6;
+--button-clear-bg-disabled: #FFF;
+--button-clear-border-color-disabled: #FFF;
+--input-primary-border-color: #D6D9E0;
+--input-primary-plaseholder-color: #E4E6EA;
+--input-primary-border-color-error: #FF564E;
+--input-primary-bg-error: #FFEAE2;
+--input-primary-box-shadow-color-error: #FFEAE2;
+--checkbox-bg-checked: #067AFF;
+--checkbox-bg-hovered: #067AFF;
+--checkbox-box-shadow-focused: #E8F0FE;
+--checkbox-bg-active: #067AFF;
+--checkbox-border-color-active: #067AFF;
+--checkbox-box-shadow-active: #067AFF;
+--checkbox-bg-disabled: #E8F0FE;
+--input-radio-bg-checked: #067AFF;
+--input-radio-bg-hovered: #067AFF;
+--input-radio-box-shadow-focused: #E8F0FE;
+--input-radio-bg-focused: #E8F0FE;
+--input-radio-border-color-focused: #E8F0FE;
+--switch-bg: #E4E6EA;
+--switch-border-color: #E4E6EA;
+--switch-bg-checked: #0066DC;
+--switch-border-color-checked: #0066DC;
+--tooltip-bg: #000;
+--tooltip-color: #FFF;
+--status-failure: #FF564E;
+--status-failure-bg: #ffeeed;
+--status-success: #4AC99B;
+--status-success-bg: #ecf9f5;
+--status-warning: #ffc700;
+--status-warning-bg: rgba(255, 199, 0, .12);
+--status-info: #70b6f6;
+--status-info-bg: rgba(112, 182, 246, .12);
+--status-neutral: #BCC1CC;
+--status-neutral-bg: #ECEEF2;
+}

package/helpers/date/index.d.ts

@@ -0,0 +1,12 @@
+type DateFormat = string | Date;
+export declare const parse: (dateInput: DateFormat) => Date;
+export declare const getUpperMonthName: (date: DateFormat) => string;
+export declare const getShortWeekDayNameByIndex: (index: number) => string;
+export declare const shiftDate: (date: Date, days: number) => Date;
+export declare const isSameMonthAndYear: (date: Date, otherDate: Date) => boolean;
+export declare const toISODate: (date: Date) => string;
+export declare const toDMYDate: (dateISO: string) => string;
+export declare const getPeriodDates: (startDate: DateFormat, period?: number) => string;
+export declare const clearTime: (date: Date) => Date;
+export declare const getDaysDiff: (dateStart: Date, dateEnd: Date) => number;
+export {};

package/helpers/date/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var dateFns = require('date-fns');
+var locale = require('date-fns/locale');
+
+// Helper to parse date strings with fallback
+var parse = function parse(dateInput) {
+  if (!dateInput) {
+    return new Date();
+  }
+  var date = typeof dateInput === "string" ? dateFns.parseISO(dateInput) : dateInput;
+  return dateFns.isValid(date) ? date : new Date(dateInput);
+};
+// Get full month name with the first letter capitalized
+var getUpperMonthName = function getUpperMonthName(date) {
+  var parsedDate = parse(date);
+  return dateFns.format(parsedDate, "LLLL", {
+    locale: locale.enGB
+  });
+};
+// Get short weekday name by index (e.g., Mo, Tu, etc.)
+var getShortWeekDayNameByIndex = function getShortWeekDayNameByIndex(index) {
+  var firstDayOfWeek = dateFns.startOfWeek(new Date());
+  return dateFns.format(dateFns.addDays(firstDayOfWeek, index), "EEEEEE", {
+    locale: locale.enGB
+  });
+};
+// Get formatted date string with month and day
+var getDateMonth = function getDateMonth(date) {
+  var parsedDate = parse(date);
+  return dateFns.format(parsedDate, "MMMM d", {
+    locale: locale.enGB
+  });
+};
+// Shift the date by a number of days
+var shiftDate = function shiftDate(date, days) {
+  return dateFns.addDays(date, days);
+};
+// Check if two dates are in the same month and year
+var isSameMonthAndYear = function isSameMonthAndYear(date, otherDate) {
+  return date.getFullYear() === otherDate.getFullYear() && date.getMonth() === otherDate.getMonth();
+};
+// Convert date to ISO format (YYYY-MM-DD)
+var toISODate = function toISODate(date) {
+  return dateFns.format(date, "yyyy-MM-dd");
+};
+// Convert date to DMY format (dd.MM.yyyy)
+var toDMYDate = function toDMYDate(dateISO) {
+  return dateISO ? dateFns.format(new Date(dateISO), "dd.MM.yyyy") : "";
+};
+// Get the period dates as a formatted string
+var getPeriodDates = function getPeriodDates(startDate, period) {
+  if (period === void 0) {
+    period = 1;
+  }
+  var start = parse(startDate);
+  if (period === 1) {
+    return getDateMonth(start);
+  }
+  var end = shiftDate(start, period - 1);
+  var startDateFormat = isSameMonthAndYear(start, end) ? dateFns.format(start, "d") : getDateMonth(start);
+  return "".concat(startDateFormat, " \u2013 ").concat(getDateMonth(end));
+};
+// Clear time from a date
+var clearTime = function clearTime(date) {
+  return new Date(date.setHours(0, 0, 0, 0));
+};
+// Get the difference in days between two dates
+var getDaysDiff = function getDaysDiff(dateStart, dateEnd) {
+  var start = clearTime(dateStart).getTime();
+  var end = clearTime(dateEnd).getTime();
+  return Math.round((end - start) / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
+};
+
+exports.clearTime = clearTime;
+exports.getDaysDiff = getDaysDiff;
+exports.getPeriodDates = getPeriodDates;
+exports.getShortWeekDayNameByIndex = getShortWeekDayNameByIndex;
+exports.getUpperMonthName = getUpperMonthName;
+exports.isSameMonthAndYear = isSameMonthAndYear;
+exports.parse = parse;
+exports.shiftDate = shiftDate;
+exports.toDMYDate = toDMYDate;
+exports.toISODate = toISODate;

package/helpers/generateUniqID.d.ts

@@ -0,0 +1,2 @@
+declare const generateUniqID: (index: number) => string;
+export default generateUniqID;

package/helpers/on.d.ts

@@ -0,0 +1 @@
+export declare const on: <K extends keyof HTMLElementEventMap>(element: HTMLElement | null | undefined, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions) => () => void;

package/helpers/on.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var on = function on(element, type,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+listener, options) {
+  element === null || element === void 0 ? void 0 : element.addEventListener(type, listener, options);
+  return function () {
+    element === null || element === void 0 ? void 0 : element.removeEventListener(type, listener, options);
+  };
+};
+
+exports.on = on;

package/hooks/useMediaSizes/index.d.ts

@@ -0,0 +1,5 @@
+import type { BreakpointsTheme } from "../../Theme/breakpoints";
+export type QueryInputFunction = (breakpoints: BreakpointsTheme) => string;
+type QueryInput = QueryInputFunction | string;
+declare const useMediaSizes: (queryInput: QueryInput) => boolean;
+export default useMediaSizes;

package/hooks/useMediaSizes/index.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var breakpoints = require('../../Theme/breakpoints.js');
+
+var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var useMediaSizes = function useMediaSizes(queryInput) {
+  var query = typeof queryInput === "function" ? queryInput(breakpoints.default) : queryInput;
+  query = query.replace(/^@media( ?)/m, "");
+  var matchMedia = supportMatchMedia ? window.matchMedia : null;
+  var _a = React.useState(function () {
+      if (matchMedia) {
+        return matchMedia(query).matches;
+      }
+      return false;
+    }),
+    match = _a[0],
+    setMatch = _a[1];
+  React.useEffect(function () {
+    if (!matchMedia) return undefined;
+    var active = true;
+    var queryList = matchMedia(query);
+    var updateMatch = function updateMatch() {
+      if (active) {
+        setMatch(queryList.matches);
+      }
+    };
+    updateMatch();
+    queryList.addEventListener("change", updateMatch);
+    return function () {
+      active = false;
+      queryList.removeEventListener("change", updateMatch);
+    };
+  });
+  return match;
+};
+
+exports.default = useMediaSizes;

package/hooks/useOnClickOutside/index.d.ts

@@ -0,0 +1,3 @@
+import type { MutableRefObject, RefObject } from "react";
+declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T> | MutableRefObject<T | undefined>, handler: (e: MouseEvent | TouchEvent) => void): void;
+export default useOnClickOutside;

package/hooks/useOnClickOutside/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var element = {
+  current: undefined
+};
+function useOnClickOutside(ref, handler) {
+  React.useEffect(function () {
+    var previous = element;
+    element = ref;
+    var listener = function listener(event) {
+      var _a;
+      if ((ref === null || ref === void 0 ? void 0 : ref.current) !== (element === null || element === void 0 ? void 0 : element.current)) return;
+      if ((_a = element.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener, false);
+    document.addEventListener("touchstart", listener, false);
+    return function () {
+      document.removeEventListener("mousedown", listener, false);
+      document.removeEventListener("touchstart", listener, false);
+      element = previous;
+    };
+  }, [handler, ref]);
+}
+
+exports.default = useOnClickOutside;

package/hooks/useScrollLock/index.d.ts

@@ -0,0 +1,2 @@
+declare const useScrollLock: () => void;
+export default useScrollLock;

package/hooks/useScrollLock/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var useScrollLock = function useScrollLock() {
+  React.useEffect(function () {
+    var body = document.querySelector("body");
+    if (!body) return undefined;
+    var _a = body.style,
+      overflow = _a.overflow,
+      width = _a.width;
+    var scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    body.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      body.style.width = "calc(100% - ".concat(scrollBarWidth, "px)");
+    }
+    return function () {
+      body.style.overflow = overflow;
+      body.style.width = width;
+    };
+  }, []);
+};
+
+exports.default = useScrollLock;

package/hooks/useTrapFocus/index.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from "react";
+declare function useTrapFocus(refObject: RefObject<HTMLElement>): void;
+export default useTrapFocus;

package/hooks/useTrapFocus/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var getFocusableModalElements = function getFocusableModalElements(element) {
+  return element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="password"], input[type="radio"], input[type="checkbox"], select');
+};
+function useTrapFocus(refObject) {
+  React.useEffect(function () {
+    var handler = function handler(event) {
+      if (!refObject.current || event.code !== "Tab") return;
+      var focusable = Array.from(getFocusableModalElements(refObject.current));
+      var firstElement = focusable[0];
+      var lastElement = focusable[focusable.length - 1];
+      if (!lastElement || !firstElement) return;
+      var focusOutside = document.activeElement ? !focusable.includes(document.activeElement) : true;
+      if (event.shiftKey && (document.activeElement === firstElement || focusOutside)) {
+        lastElement.focus();
+        event.preventDefault();
+      } else if (!event.shiftKey && (document.activeElement === lastElement || focusOutside)) {
+        firstElement.focus();
+        event.preventDefault();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return function () {
+      document.removeEventListener("keydown", handler);
+    };
+  }, [refObject]);
+}
+
+exports.default = useTrapFocus;