@stack-spot/portal-layout 0.0.52 → 0.0.53

package/src/components/menu/use-keyboard-controls.tsx

@@ -1,70 +1,70 @@
-import { useCallback, useRef } from 'react'
-
-interface Props {
-  /**
-   * A query selector that returns every html element that must be navigable through the keyboard.
-   */
-  querySelectors: string,
-  /**
-   * Function to call when ESC is pressed. or when TAB is pressed at the last item in the list of items returned by the query selector.
-   */
-  onPressEscape?: () => void,
-  /**
-   * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
-   * onPressEscape if not specified.
-   */
-  onPressLastTab?: () => void,
-}
-
-export function useKeyboardControls({ querySelectors, onPressEscape, onPressLastTab = onPressEscape }: Props) {
-  const keyboardControlledElement = useRef<HTMLDivElement>(null)
-  const listeners = useRef<Pick<Props, 'onPressEscape' | 'onPressLastTab'>>({})
-  listeners.current = { onPressEscape, onPressLastTab }
-
-  const keyboardControls = useCallback((event: KeyboardEvent) => {
-    const target = event?.target as HTMLElement | null
-
-    function getSelectableAnchors() {
-      return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? []
-    }
-
-    function handleArrows(key = event.key) {
-      const anchors = getSelectableAnchors()
-      let i = 0
-      while (i < anchors.length && document.activeElement !== anchors[i]) i++
-      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
-      next?.focus?.()
-    }
-      
-    const handlers: Record<string, (() => void) | undefined> = {
-      Escape: () => {
-        listeners.current.onPressEscape?.()
-        event.stopPropagation()
-        event.preventDefault()
-      },
-      Enter: () => {
-        target?.click()
-      },
-      Tab: () => {
-        const anchors = getSelectableAnchors()
-        if (document.activeElement === anchors[anchors.length - 1]) listeners.current.onPressLastTab?.()
-        else  handleArrows('ArrowDown')
-        event.preventDefault()
-      },
-      ArrowUp: handleArrows,
-      ArrowDown: handleArrows,
-    }
-
-    handlers[event.key]?.()
-  }, [])
-
-  const attachKeyboardListeners = useCallback(() => {
-    document.addEventListener('keydown', keyboardControls)
-  }, [])
-
-  const detachKeyboardListeners = useCallback(() => {
-    document.removeEventListener('keydown', keyboardControls)
-  }, [])
-
-  return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners }
-}
+import { useCallback, useRef } from 'react'
+
+interface Props {
+  /**
+   * A query selector that returns every html element that must be navigable through the keyboard.
+   */
+  querySelectors: string,
+  /**
+   * Function to call when ESC is pressed. or when TAB is pressed at the last item in the list of items returned by the query selector.
+   */
+  onPressEscape?: () => void,
+  /**
+   * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
+   * onPressEscape if not specified.
+   */
+  onPressLastTab?: () => void,
+}
+
+export function useKeyboardControls({ querySelectors, onPressEscape, onPressLastTab = onPressEscape }: Props) {
+  const keyboardControlledElement = useRef<HTMLDivElement>(null)
+  const listeners = useRef<Pick<Props, 'onPressEscape' | 'onPressLastTab'>>({})
+  listeners.current = { onPressEscape, onPressLastTab }
+
+  const keyboardControls = useCallback((event: KeyboardEvent) => {
+    const target = event?.target as HTMLElement | null
+
+    function getSelectableAnchors() {
+      return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? []
+    }
+
+    function handleArrows(key = event.key) {
+      const anchors = getSelectableAnchors()
+      let i = 0
+      while (i < anchors.length && document.activeElement !== anchors[i]) i++
+      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
+      next?.focus?.()
+    }
+      
+    const handlers: Record<string, (() => void) | undefined> = {
+      Escape: () => {
+        listeners.current.onPressEscape?.()
+        event.stopPropagation()
+        event.preventDefault()
+      },
+      Enter: () => {
+        target?.click()
+      },
+      Tab: () => {
+        const anchors = getSelectableAnchors()
+        if (document.activeElement === anchors[anchors.length - 1]) listeners.current.onPressLastTab?.()
+        else  handleArrows('ArrowDown')
+        event.preventDefault()
+      },
+      ArrowUp: handleArrows,
+      ArrowDown: handleArrows,
+    }
+
+    handlers[event.key]?.()
+  }, [])
+
+  const attachKeyboardListeners = useCallback(() => {
+    document.addEventListener('keydown', keyboardControls)
+  }, [])
+
+  const detachKeyboardListeners = useCallback(() => {
+    document.removeEventListener('keydown', keyboardControls)
+  }, [])
+
+  return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners }
+}

package/src/components/types.ts

@@ -1,15 +1,15 @@
-import React, { ReactNode } from 'react'
-
-interface CustomLabel {
-  id: string,
-  element: ReactNode,
-}
-export interface Action {
-  label: string | CustomLabel,
-  onClick?: () => void,
-  href?: string,
-  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'],
-  iconActive?: React.ReactElement,
-}
-
-export type PortalAcronym = 'EDP' | 'AI' | 'HUB'
+import React, { ReactNode } from 'react'
+
+interface CustomLabel {
+  id: string,
+  element: ReactNode,
+}
+export interface Action {
+  label: string | CustomLabel,
+  onClick?: () => void,
+  href?: string,
+  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'],
+  iconActive?: React.ReactElement,
+}
+
+export type PortalAcronym = 'EDP' | 'AI' | 'HUB'

package/src/dictionary.ts

@@ -1,25 +1,25 @@
-import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
-
-const dictionary = {
-  en: {
-    close: 'Close',
-    validationLabel: 'Please, confirm the action by typing "$0" below:',
-    dismiss: 'Dismiss',
-    confirm: 'OK',
-    cancel: 'Cancel',
-  },
-  pt: {
-    close: 'Fechar',
-    validationLabel: 'Por favor, confirme a ação digitando "$0" no campo abaixo:',
-    dismiss: 'Dispensar',
-    confirm: 'OK',
-    cancel: 'Cancelar',
-  },
-} satisfies Dictionary
-
-export const useDictionary = () => useTranslate(dictionary)
-
-export function getDictionary() {
-  const language = getLanguage()
-  return dictionary[language]
-}
+import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    close: 'Close',
+    validationLabel: 'Please, confirm the action by typing "$0" below:',
+    dismiss: 'Dismiss',
+    confirm: 'OK',
+    cancel: 'Cancel',
+  },
+  pt: {
+    close: 'Fechar',
+    validationLabel: 'Por favor, confirme a ação digitando "$0" no campo abaixo:',
+    dismiss: 'Dispensar',
+    confirm: 'OK',
+    cancel: 'Cancelar',
+  },
+} satisfies Dictionary
+
+export const useDictionary = () => useTranslate(dictionary)
+
+export function getDictionary() {
+  const language = getLanguage()
+  return dictionary[language]
+}

package/src/elements.ts

@@ -1,24 +1,24 @@
-export const elementIds = {
-  layout: 'layout',
-  backdrop: 'backdrop',
-  modal: 'modal',
-  rightPanel: 'rightPanel',
-  bottomDialog: 'bottomDialog',
-  page: 'page',
-  content: 'content',
-  header: 'header',
-  menu: 'menu',
-  menuContent: 'menuContent',
-  menuSections: 'menuSections',
-  accessibilityAnnouncer: 'accessibilityAnnouncer',
-} as const
-
-export type LayoutElement = keyof typeof elementIds
-export type LayoutElements = Record<LayoutElement, HTMLElement | null>
-
-export function getLayoutElements() {
-  return (Object.keys(elementIds) as LayoutElement[]).reduce<LayoutElements>(
-    (result, id) => ({ ...result, [id]: document.getElementById(id) }),
-    {} as LayoutElements,
-  )
-}
+export const elementIds = {
+  layout: 'layout',
+  backdrop: 'backdrop',
+  modal: 'modal',
+  rightPanel: 'rightPanel',
+  bottomDialog: 'bottomDialog',
+  page: 'page',
+  content: 'content',
+  header: 'header',
+  menu: 'menu',
+  menuContent: 'menuContent',
+  menuSections: 'menuSections',
+  accessibilityAnnouncer: 'accessibilityAnnouncer',
+} as const
+
+export type LayoutElement = keyof typeof elementIds
+export type LayoutElements = Record<LayoutElement, HTMLElement | null>
+
+export function getLayoutElements() {
+  return (Object.keys(elementIds) as LayoutElement[]).reduce<LayoutElements>(
+    (result, id) => ({ ...result, [id]: document.getElementById(id) }),
+    {} as LayoutElements,
+  )
+}

package/src/errors.ts

@@ -1,11 +1,11 @@
-export class LayoutError extends Error {
-  constructor(message: string) {
-    super(`Layout error: ${message}`)
-  } 
-}
-
-export class ElementNotFound extends LayoutError {
-  constructor(elementName: string, elementId: string) {
-    super(`unable to create ${elementName} because no element with id "${elementId}" was found in the view.`)
-  }
-}
+export class LayoutError extends Error {
+  constructor(message: string) {
+    super(`Layout error: ${message}`)
+  } 
+}
+
+export class ElementNotFound extends LayoutError {
+  constructor(elementName: string, elementId: string) {
+    super(`unable to create ${elementName} because no element with id "${elementId}" was found in the view.`)
+  }
+}

package/src/index.ts

@@ -1,17 +1,17 @@
-export { Layout, RawLayout } from './Layout'
-export { overlay } from './LayoutOverlayManager'
-export { Dialog } from './components/Dialog'
-export { Toaster } from './components/Toaster'
-export { Header, HeaderProps } from './components/Header'
-export { OverlayContent } from './components/OverlayContent'
-export { PortalSwitcher } from './components/PortalSwitcher'
-export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
-export { MenuContent, Title, MenuGroup, ActionItem } from './components/menu/MenuContent'
-export { MenuSections } from './components/menu/MenuSections'
-export * from './components/menu/types'
-export * from './components/types'
-export * from './elements'
-export * from './errors'
-export { Logo as StackspotLogo } from './svg/Logo'
-export * from './utils'
-
+export { Layout, RawLayout } from './Layout'
+export { overlay } from './LayoutOverlayManager'
+export { Dialog } from './components/Dialog'
+export { Toaster } from './components/Toaster'
+export { Header, HeaderProps } from './components/Header'
+export { OverlayContent } from './components/OverlayContent'
+export { PortalSwitcher } from './components/PortalSwitcher'
+export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
+export { MenuContent, Title, MenuGroup, ActionItem } from './components/menu/MenuContent'
+export { MenuSections } from './components/menu/MenuSections'
+export * from './components/menu/types'
+export * from './components/types'
+export * from './elements'
+export * from './errors'
+export { Logo as StackspotLogo } from './svg/Logo'
+export * from './utils'
+

package/src/layout-context.tsx

@@ -1,22 +1,22 @@
-/* eslint-disable react-refresh/only-export-components */
-
-import { createContext, useContext } from 'react'
-
-export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement
-
-export interface LayoutContext {
-  anchorTag?: AnchorComponent,
-}
-
-const context = createContext<LayoutContext>({})
-
-const Anchor: AnchorComponent = props => <a {...props} />
-
-export const LayoutProvider = ({ children, ...props }: LayoutContext & { children: React.ReactNode }) => (
-  <context.Provider value={props}>{children}</context.Provider>
-)
-
-export function useAnchorTag(): AnchorComponent {
-  const { anchorTag } = useContext(context)
-  return anchorTag ?? Anchor
-}
+/* eslint-disable react-refresh/only-export-components */
+
+import { createContext, useContext } from 'react'
+
+export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement
+
+export interface LayoutContext {
+  anchorTag?: AnchorComponent,
+}
+
+const context = createContext<LayoutContext>({})
+
+const Anchor: AnchorComponent = props => <a {...props} />
+
+export const LayoutProvider = ({ children, ...props }: LayoutContext & { children: React.ReactNode }) => (
+  <context.Provider value={props}>{children}</context.Provider>
+)
+
+export function useAnchorTag(): AnchorComponent {
+  const { anchorTag } = useContext(context)
+  return anchorTag ?? Anchor
+}