@stack-spot/portal-components 2.27.0 → 2.27.2

package/src/utils/accessibility.ts

@@ -1,135 +1,135 @@
-/**
- * Important for accessibility.
- * 
- * Makes it so we focus the next focusable element in the DOM hierarchy, disregarding the element passed as parameter and its children.
- * 
- * If there's no next focusable element, the first focusable element of the page will be focused. If the page doesn't contain any focusable
- * element, nothing happens.
- * 
- * @param current the reference element to focus the next. If not provided, will be the currently active element.
- */
-export function focusNextIgnoringChildren(current?: HTMLElement | null) {
-  current = current ?? document.activeElement as HTMLElement
-  while (current && !current.nextElementSibling) {
-    current = current?.parentElement
-  }
-  current = current?.nextElementSibling as HTMLElement
-  while (current && current.tabIndex < 0) {
-    current = (current.children.length ? current.firstChild : current.nextElementSibling) as HTMLElement
-  }
-  if (current) current?.focus?.()
-  else focusFirstChild(document)
-}
-
-export type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other'
-export type TagPriorityElement = TagPriority | TagPriority[]
-
-interface FocusOptions {
-  /**
-   * Instead of focusing the first element overall, focus the first according to this list of priorities.
-   * 
-   * 'other' means elements that are normally not focusable, but have positive tabIndex values.
-   */
-  priority?: TagPriorityElement[],
-  /**
-   * Ignores any element that matches this query selector.
-   */
-  ignore?: string,
-}
-
-const selectors: Record<TagPriority, string> = {
-  a: 'a[href]:not(:disabled)',
-  button: 'button:not(:disabled)',
-  input: 'input:not(:disabled):not([type="hidden"])',
-  select: 'textarea:not(:disabled)',
-  textarea: 'select:not(:disabled)',
-  other: '[tabindex]:not([tabindex="-1"])',
-}
-
-/**
- * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
- * 
- * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
- * list.
- * 
- * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
- * next element is focused instead.
- * 
- * @example
- * Suppose the children of element are: h1, button, p, input, select.
- * 1. We don't pass a priority list. The focused element will be the button.
- * 2. Our priority list is ['button']. The focused element will be the button.
- * 3. Our priority list is ['input', 'button']. The focused element will be the input.
- * 4. Our priority list is ['select', 'input']. The focused element will be the select.
- * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
- * 
- * @param element the element to search a child to focus.
- * @param options optional.
- */
-export function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority = [], ignore }: FocusOptions = {}) {
-  const allFocusableTags: TagPriority[] = ['a', 'button', 'input', 'other', 'select', 'textarea']
-  const focusableList: (NodeListOf<HTMLElement> | undefined)[] = [
-    element?.querySelectorAll(allFocusableTags.map(t => selectors[t]).join(', ')),
-  ]
-  for (const p of priority) {
-    const tags = Array.isArray(p) ? p : [p]
-    const querySelectors = tags.map(t => selectors[t])
-    focusableList.unshift(element?.querySelectorAll(querySelectors.join(', ')))
-  }
-  for (const focusable of focusableList ?? []) {
-    for (const f of focusable ?? []) {
-      if (!ignore || !f.matches(ignore)) {
-        const styles = window.getComputedStyle(f)
-        if (styles.display != 'none' && styles.visibility != 'hidden') return f.focus()
-      }
-    }
-  }
-}
-
-/**
- * Checks if an element can receive focus.
- * 
- * Elements can receive focus only if:
- * - they exist;
- * - they're visible;
- * - they're not disabled;
- * - they are a focusable tag name or have a positive tab index;
- * - they don't have a negative tab index.
- * @param element the element to check.
- * @returns true if the element is focusable, false otherwise.
- */
-export function isFocusable(element?: Element | null) {
-  if (!element) return false
-  // is disabled: return false
-  if (element.ariaDisabled || element.getAttribute('disabled') !== null) return false
-  // is invisible: return false
-  if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })) return false
-  // has tab index: return false if negative, true otherwise
-  const tabIndexStr = element.getAttribute('tabindex')
-  const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined
-  if (tabIndex !== undefined) return tabIndex >= 0
-  // check the tag name
-  return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '')
-}
-
-/**
- * Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
- * and accessibility attributes.
- * 
- * Decision making:
- * - If the element is focusable, focus it.
- * - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
- * - If the element is controlled by another, try to focus the controller, based in this same algorithm.
- * - Otherwise, try to focus its parent.
- * 
- * If no focusable element is found. Nothing happens.
- * @param element the element to focus.
- */
-export function focusAccessibleElement(element?: Element | null) {
-  let elementToFocus = element as HTMLElement | null | undefined
-  while (elementToFocus && !isFocusable(elementToFocus)) {
-    const controlledBy = elementToFocus.id ? document.querySelector(`[aria-controls="${elementToFocus.id}"]`) : undefined
-    elementToFocus = (controlledBy ?? elementToFocus.parentElement) as HTMLElement | null | undefined
-  }
-  elementToFocus?.focus?.()
-}
+/**
+ * Important for accessibility.
+ * 
+ * Makes it so we focus the next focusable element in the DOM hierarchy, disregarding the element passed as parameter and its children.
+ * 
+ * If there's no next focusable element, the first focusable element of the page will be focused. If the page doesn't contain any focusable
+ * element, nothing happens.
+ * 
+ * @param current the reference element to focus the next. If not provided, will be the currently active element.
+ */
+export function focusNextIgnoringChildren(current?: HTMLElement | null) {
+  current = current ?? document.activeElement as HTMLElement
+  while (current && !current.nextElementSibling) {
+    current = current?.parentElement
+  }
+  current = current?.nextElementSibling as HTMLElement
+  while (current && current.tabIndex < 0) {
+    current = (current.children.length ? current.firstChild : current.nextElementSibling) as HTMLElement
+  }
+  if (current) current?.focus?.()
+  else focusFirstChild(document)
+}
+
+export type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other'
+export type TagPriorityElement = TagPriority | TagPriority[]
+
+interface FocusOptions {
+  /**
+   * Instead of focusing the first element overall, focus the first according to this list of priorities.
+   * 
+   * 'other' means elements that are normally not focusable, but have positive tabIndex values.
+   */
+  priority?: TagPriorityElement[],
+  /**
+   * Ignores any element that matches this query selector.
+   */
+  ignore?: string,
+}
+
+const selectors: Record<TagPriority, string> = {
+  a: 'a[href]:not(:disabled)',
+  button: 'button:not(:disabled)',
+  input: 'input:not(:disabled):not([type="hidden"])',
+  select: 'textarea:not(:disabled)',
+  textarea: 'select:not(:disabled)',
+  other: '[tabindex]:not([tabindex="-1"])',
+}
+
+/**
+ * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
+ * 
+ * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
+ * list.
+ * 
+ * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
+ * next element is focused instead.
+ * 
+ * @example
+ * Suppose the children of element are: h1, button, p, input, select.
+ * 1. We don't pass a priority list. The focused element will be the button.
+ * 2. Our priority list is ['button']. The focused element will be the button.
+ * 3. Our priority list is ['input', 'button']. The focused element will be the input.
+ * 4. Our priority list is ['select', 'input']. The focused element will be the select.
+ * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
+ * 
+ * @param element the element to search a child to focus.
+ * @param options optional.
+ */
+export function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority = [], ignore }: FocusOptions = {}) {
+  const allFocusableTags: TagPriority[] = ['a', 'button', 'input', 'other', 'select', 'textarea']
+  const focusableList: (NodeListOf<HTMLElement> | undefined)[] = [
+    element?.querySelectorAll(allFocusableTags.map(t => selectors[t]).join(', ')),
+  ]
+  for (const p of priority) {
+    const tags = Array.isArray(p) ? p : [p]
+    const querySelectors = tags.map(t => selectors[t])
+    focusableList.unshift(element?.querySelectorAll(querySelectors.join(', ')))
+  }
+  for (const focusable of focusableList ?? []) {
+    for (const f of focusable ?? []) {
+      if (!ignore || !f.matches(ignore)) {
+        const styles = window.getComputedStyle(f)
+        if (styles.display != 'none' && styles.visibility != 'hidden') return f.focus()
+      }
+    }
+  }
+}
+
+/**
+ * Checks if an element can receive focus.
+ * 
+ * Elements can receive focus only if:
+ * - they exist;
+ * - they're visible;
+ * - they're not disabled;
+ * - they are a focusable tag name or have a positive tab index;
+ * - they don't have a negative tab index.
+ * @param element the element to check.
+ * @returns true if the element is focusable, false otherwise.
+ */
+export function isFocusable(element?: Element | null) {
+  if (!element) return false
+  // is disabled: return false
+  if (element.ariaDisabled || element.getAttribute('disabled') !== null) return false
+  // is invisible: return false
+  if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })) return false
+  // has tab index: return false if negative, true otherwise
+  const tabIndexStr = element.getAttribute('tabindex')
+  const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined
+  if (tabIndex !== undefined) return tabIndex >= 0
+  // check the tag name
+  return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '')
+}
+
+/**
+ * Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
+ * and accessibility attributes.
+ * 
+ * Decision making:
+ * - If the element is focusable, focus it.
+ * - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
+ * - If the element is controlled by another, try to focus the controller, based in this same algorithm.
+ * - Otherwise, try to focus its parent.
+ * 
+ * If no focusable element is found. Nothing happens.
+ * @param element the element to focus.
+ */
+export function focusAccessibleElement(element?: Element | null) {
+  let elementToFocus = element as HTMLElement | null | undefined
+  while (elementToFocus && !isFocusable(elementToFocus)) {
+    const controlledBy = elementToFocus.id ? document.querySelector(`[aria-controls="${elementToFocus.id}"]`) : undefined
+    elementToFocus = (controlledBy ?? elementToFocus.parentElement) as HTMLElement | null | undefined
+  }
+  elementToFocus?.focus?.()
+}

package/src/utils/cookie.ts

@@ -1,73 +1,73 @@
-import { isEmpty } from 'lodash'
-
-const DEFAULT_DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/)
-let cookieDomain = ''
-let cookieAttributes: Record<string, string> = {}
-
-/**
- * Setup the cookie utilities to use a another domain. By default, it's based on *.stackspot.com. 
- * @param domainRegex the regex to identify the domain. Example: {@link DEFAULT_DOMAIN_REGEX}.
- */
-export function setupCookies(domainRegex: RegExp) {
-  const portalUrl = new URL(location.href)
-  cookieDomain = domainRegex.exec(portalUrl.host)?.[0] ?? ''
-  cookieAttributes = { domain: cookieDomain, SameSite: 'Strict' }
-  // Add Secure attribute if using HTTPS
-  if (portalUrl.protocol === 'https:') {
-    cookieAttributes['Secure'] = ''
-  }
-}
-
-/**
- * Retrieves the current domain used for cookies. To change the domain, use `setupCookies(domainRegex)`.
- * @returns the current cookie domain.
- */
-export function getCookieDomain() {
-  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
-  return cookieDomain
-}
-
-/**
- * Get all cookies as an object where the keys are the cookie names and the values are the respective cookie values. 
- * @returns a map of cookie name to cookie value.
- */
-export function getCookies(): Record<string, string | undefined> {
-  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
-  return document.cookie.split('; ').reduce((result, current) => {
-    const [name, ...value] = current.split('=')
-    result[name] = value.join('=')
-    return result
-  }, {} as Record<string, string>)
-}
-
-/**
- * Sets the value of a cookie.
- * @param key the cookie name (identifier).
- * @param value the cookie value.
- * @param customAttributes Accepted values: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#attributes.
- */
-export function setCookie(key: string, value: string, customAttributes: Record<string, string> = {}) {
-  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
-  document.cookie = `${key}=${value};${objectToCookieString({ ...cookieAttributes, ...customAttributes })}`
-}
-
-/**
- * Removes a cookie.
- * @param key the cookie name (identifier).
- */
-export function removeCookie(key: string) {
-  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
-  document.cookie = `${key}=;${objectToCookieString({ ...cookieAttributes, expires: 'Thu, 01 Jan 1970 00:00:00 GMT' })}`
-}
-
-/**
- * Retrieves the value of a cookie given its key/name.
- * @param key the cookie name (identifier).
- * @returns the cookie value or undefined, if the cookie doesn't exist. 
- */
-export function getCookie(key: string) {
-  return getCookies()[key]
-}
-
-const objectToCookieString = (object: Record<string, string>): string =>
-  Object.entries(object).reduce((prev, [k, v]) => `${prev} ${k}${v !== '' ? `=${v}` : ''};`, '').trim()
+import { isEmpty } from 'lodash'
+
+const DEFAULT_DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/)
+let cookieDomain = ''
+let cookieAttributes: Record<string, string> = {}
+
+/**
+ * Setup the cookie utilities to use a another domain. By default, it's based on *.stackspot.com. 
+ * @param domainRegex the regex to identify the domain. Example: {@link DEFAULT_DOMAIN_REGEX}.
+ */
+export function setupCookies(domainRegex: RegExp) {
+  const portalUrl = new URL(location.href)
+  cookieDomain = domainRegex.exec(portalUrl.host)?.[0] ?? ''
+  cookieAttributes = { domain: cookieDomain, SameSite: 'Strict' }
+  // Add Secure attribute if using HTTPS
+  if (portalUrl.protocol === 'https:') {
+    cookieAttributes['Secure'] = ''
+  }
+}
+
+/**
+ * Retrieves the current domain used for cookies. To change the domain, use `setupCookies(domainRegex)`.
+ * @returns the current cookie domain.
+ */
+export function getCookieDomain() {
+  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
+  return cookieDomain
+}
+
+/**
+ * Get all cookies as an object where the keys are the cookie names and the values are the respective cookie values. 
+ * @returns a map of cookie name to cookie value.
+ */
+export function getCookies(): Record<string, string | undefined> {
+  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
+  return document.cookie.split('; ').reduce((result, current) => {
+    const [name, ...value] = current.split('=')
+    result[name] = value.join('=')
+    return result
+  }, {} as Record<string, string>)
+}
+
+/**
+ * Sets the value of a cookie.
+ * @param key the cookie name (identifier).
+ * @param value the cookie value.
+ * @param customAttributes Accepted values: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#attributes.
+ */
+export function setCookie(key: string, value: string, customAttributes: Record<string, string> = {}) {
+  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
+  document.cookie = `${key}=${value};${objectToCookieString({ ...cookieAttributes, ...customAttributes })}`
+}
+
+/**
+ * Removes a cookie.
+ * @param key the cookie name (identifier).
+ */
+export function removeCookie(key: string) {
+  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
+  document.cookie = `${key}=;${objectToCookieString({ ...cookieAttributes, expires: 'Thu, 01 Jan 1970 00:00:00 GMT' })}`
+}
+
+/**
+ * Retrieves the value of a cookie given its key/name.
+ * @param key the cookie name (identifier).
+ * @returns the cookie value or undefined, if the cookie doesn't exist. 
+ */
+export function getCookie(key: string) {
+  return getCookies()[key]
+}
+
+const objectToCookieString = (object: Record<string, string>): string =>
+  Object.entries(object).reduce((prev, [k, v]) => `${prev} ${k}${v !== '' ? `=${v}` : ''};`, '').trim()

package/src/utils/promise.ts

@@ -1,5 +1,5 @@
-export function delay(ms: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms)
-  })
-}
+export function delay(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}

package/src/utils/read-file.ts

@@ -1,16 +1,16 @@
-export async function readFile(file: File, isJson = false): Promise<string | undefined> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-
-    reader.onload = (e) => {
-      const content = e.target?.result as string
-      resolve(isJson ? JSON.parse(content) : content)
-    }
-
-    reader.onerror = (e) => {
-      reject(e)
-    }
-
-    reader.readAsText(file)
-  })
-}
+export async function readFile(file: File, isJson = false): Promise<string | undefined> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = (e) => {
+      const content = e.target?.result as string
+      resolve(isJson ? JSON.parse(content) : content)
+    }
+
+    reader.onerror = (e) => {
+      reject(e)
+    }
+
+    reader.readAsText(file)
+  })
+}

package/tsconfig.json

@@ -1,11 +1,11 @@
-{
-  "extends": "../../tsconfig",
-  "compilerOptions": {
-    "rootDir": "src", 
-    "module": "ESNext",
-    "outDir": "dist"
-  },
-  "include": [
-    "src",
-  ]
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "rootDir": "src", 
+    "module": "ESNext",
+    "outDir": "dist"
+  },
+  "include": [
+    "src",
+  ]
 }