@plumile/ui 0.1.114 → 0.1.116

package/lib/esm/focus/focusable.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusable.js","names":[],"sources":["../../../src/focus/focusable.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nexport type InitialFocusMode =\n  | 'first-form-control'\n  | 'first-focusable'\n  | 'dialog'\n  | 'none';\n\nexport type InitialFocusTarget =\n  | InitialFocusMode\n  | {\n      mode: 'ref';\n      ref: RefObject<HTMLElement | null>;\n      fallback?: InitialFocusMode;\n    }\n  | {\n      mode: 'selector';\n      selector: string;\n      fallback?: InitialFocusMode;\n    };\n\nexport type FormInitialFocus =\n  | 'first-form-control'\n  | 'none'\n  | {\n      mode: 'ref';\n      ref: RefObject<HTMLElement | null>;\n      fallback?: 'first-form-control' | 'none';\n    };\n\nconst explicitInitialFocusSelector = '[data-initial-focus], [autofocus]';\n\nconst formEditingSelector = [\n  'input:not([type=\"hidden\"]):not([type=\"button\"]):not([type=\"submit\"]):not([type=\"reset\"]):not([type=\"file\"]):not([disabled])',\n  'textarea:not([disabled])',\n  '[contenteditable=\"true\"]',\n].join(',');\n\nconst formControlSelector = [\n  'select:not([disabled])',\n  'button:not([disabled])',\n  'input[type=\"checkbox\"]:not([disabled])',\n  'input[type=\"radio\"]:not([disabled])',\n].join(',');\n\nconst focusableSelector = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]',\n].join(',');\n\nconst hasHiddenAncestor = (element: HTMLElement): boolean => {\n  return element.closest('[hidden], [aria-hidden=\"true\"]') != null;\n};\n\nconst isDisabled = (element: HTMLElement): boolean => {\n  if (element.getAttribute('aria-disabled') === 'true') {\n    return true;\n  }\n\n  if ('disabled' in element && element.disabled === true) {\n    return true;\n  }\n\n  return false;\n};\n\nconst isVisible = (element: HTMLElement): boolean => {\n  if (element.hidden === true) {\n    return false;\n  }\n\n  if (element.getClientRects().length > 0) {\n    return true;\n  }\n\n  const style = globalThis.getComputedStyle(element);\n\n  return style.display !== 'none' && style.visibility !== 'hidden';\n};\n\nexport const isFocusableElement = (\n  element: Element | null | undefined,\n): element is HTMLElement => {\n  if (!(element instanceof HTMLElement)) {\n    return false;\n  }\n\n  if (!element.isConnected) {\n    return false;\n  }\n\n  if (isDisabled(element)) {\n    return false;\n  }\n\n  if (hasHiddenAncestor(element)) {\n    return false;\n  }\n\n  return isVisible(element);\n};\n\nconst findFirstMatching = (\n  container: HTMLElement,\n  selector: string,\n): HTMLElement | null => {\n  const elements = Array.from(container.querySelectorAll(selector));\n  return elements.find(isFocusableElement) ?? null;\n};\n\nexport const findFirstFormControl = (\n  container: HTMLElement,\n): HTMLElement | null => {\n  return (\n    findFirstMatching(container, explicitInitialFocusSelector) ??\n    findFirstMatching(container, formEditingSelector) ??\n    findFirstMatching(container, formControlSelector)\n  );\n};\n\nexport const findFirstFocusable = (\n  container: HTMLElement,\n): HTMLElement | null => {\n  if (container.matches(focusableSelector) && isFocusableElement(container)) {\n    return container;\n  }\n\n  return findFirstMatching(container, focusableSelector);\n};\n\nexport const getFocusableElements = (container: HTMLElement): HTMLElement[] => {\n  const elements = Array.from(container.querySelectorAll(focusableSelector));\n  const result = elements.filter(isFocusableElement);\n\n  if (container.matches(focusableSelector) && isFocusableElement(container)) {\n    return [container, ...result];\n  }\n\n  return result;\n};\n\nconst resolveByMode = (\n  container: HTMLElement,\n  mode: InitialFocusMode,\n): HTMLElement | null => {\n  switch (mode) {\n    case 'first-form-control':\n      return findFirstFormControl(container);\n    case 'first-focusable':\n      return findFirstFocusable(container);\n    case 'dialog':\n      return container;\n    case 'none':\n      return null;\n    default:\n      return null;\n  }\n};\n\nexport const resolveInitialFocusTarget = (\n  container: HTMLElement,\n  target: InitialFocusTarget,\n): HTMLElement | null => {\n  if (typeof target === 'string') {\n    return resolveByMode(container, target);\n  }\n\n  if (target.mode === 'ref') {\n    if (isFocusableElement(target.ref.current)) {\n      return target.ref.current;\n    }\n    return resolveByMode(container, target.fallback ?? 'dialog');\n  }\n\n  const selected = container.querySelector(target.selector);\n  if (isFocusableElement(selected)) {\n    return selected;\n  }\n\n  return resolveByMode(container, target.fallback ?? 'dialog');\n};\n\nexport const resolveFormInitialFocusTarget = (\n  container: HTMLElement,\n  target: FormInitialFocus,\n): HTMLElement | null => {\n  if (target === 'none') {\n    return null;\n  }\n\n  if (target === 'first-form-control') {\n    return findFirstFormControl(container);\n  }\n\n  if (isFocusableElement(target.ref.current)) {\n    return target.ref.current;\n  }\n\n  if (target.fallback === 'first-form-control') {\n    return findFirstFormControl(container);\n  }\n\n  return null;\n};\n\nexport const focusElement = (element: HTMLElement | null): void => {\n  element?.focus({ preventScroll: true });\n};\n"],"mappings":";AA8BA,IAAM,IAA+B,qCAE/B,IAAsB;CAC1B;CACA;CACA;CACD,CAAC,KAAK,IAAI,EAEL,IAAsB;CAC1B;CACA;CACA;CACA;CACD,CAAC,KAAK,IAAI,EAEL,IAAoB;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC,KAAK,IAAI,EAEL,KAAqB,MAClB,EAAQ,QAAQ,mCAAiC,IAAI,MAGxD,KAAc,MACd,EAAQ,aAAa,gBAAgB,KAAK,UAI1C,cAAc,KAAW,EAAQ,aAAa,IAO9C,KAAa,MAAkC;CACnD,IAAI,EAAQ,WAAW,IACrB,OAAO;CAGT,IAAI,EAAQ,gBAAgB,CAAC,SAAS,GACpC,OAAO;CAGT,IAAM,IAAQ,WAAW,iBAAiB,EAAQ;CAElD,OAAO,EAAM,YAAY,UAAU,EAAM,eAAe;GAG7C,KACX,MAEI,EAAE,aAAmB,gBAIrB,CAAC,EAAQ,eAIT,EAAW,EAAQ,IAInB,EAAkB,EAAQ,GACrB,KAGF,EAAU,EAAQ,EAGrB,KACJ,GACA,MAEiB,MAAM,KAAK,EAAU,iBAAiB,EAAS,CACzD,CAAS,KAAK,EAAmB,IAAI,MAGjC,KACX,MAGE,EAAkB,GAAW,EAA6B,IAC1D,EAAkB,GAAW,EAAoB,IACjD,EAAkB,GAAW,EAAoB,EAIxC,KACX,MAEI,EAAU,QAAQ,EAAkB,IAAI,EAAmB,EAAU,GAChE,IAGF,EAAkB,GAAW,EAAkB,EAG3C,KAAwB,MAA0C;CAE7E,IAAM,IADW,MAAM,KAAK,EAAU,iBAAiB,EAAkB,CAC1D,CAAS,OAAO,EAAmB;CAMlD,OAJI,EAAU,QAAQ,EAAkB,IAAI,EAAmB,EAAU,GAChE,CAAC,GAAW,GAAG,EAAO,GAGxB;GAGH,KACJ,GACA,MACuB;CACvB,QAAQ,GAAR;EACE,KAAK,sBACH,OAAO,EAAqB,EAAU;EACxC,KAAK,mBACH,OAAO,EAAmB,EAAU;EACtC,KAAK,UACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,SACE,OAAO;;GAIA,KACX,GACA,MACuB;CACvB,IAAI,OAAO,KAAW,UACpB,OAAO,EAAc,GAAW,EAAO;CAGzC,IAAI,EAAO,SAAS,OAIlB,OAHI,EAAmB,EAAO,IAAI,QAAQ,GACjC,EAAO,IAAI,UAEb,EAAc,GAAW,EAAO,YAAY,SAAS;CAG9D,IAAM,IAAW,EAAU,cAAc,EAAO,SAAS;CAKzD,OAJI,EAAmB,EAAS,GACvB,IAGF,EAAc,GAAW,EAAO,YAAY,SAAS;GAGjD,KACX,GACA,MAEI,MAAW,SACN,OAGL,MAAW,uBACN,EAAqB,EAAU,GAGpC,EAAmB,EAAO,IAAI,QAAQ,GACjC,EAAO,IAAI,UAGhB,EAAO,aAAa,uBACf,EAAqB,EAAU,GAGjC,MAGI,KAAgB,MAAsC;CACjE,GAAS,MAAM,EAAE,eAAe,IAAM,CAAC"}
+{"version":3,"file":"focusable.js","names":[],"sources":["../../../src/focus/focusable.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nexport type InitialFocusMode =\n  | 'first-form-control'\n  | 'first-focusable'\n  | 'dialog'\n  | 'none';\n\nexport type InitialFocusTarget =\n  | InitialFocusMode\n  | {\n      mode: 'ref';\n      ref: RefObject<HTMLElement | null>;\n      fallback?: InitialFocusMode;\n    }\n  | {\n      mode: 'selector';\n      selector: string;\n      fallback?: InitialFocusMode;\n    };\n\nexport type FormInitialFocus =\n  | 'first-form-control'\n  | 'none'\n  | {\n      mode: 'ref';\n      ref: RefObject<HTMLElement | null>;\n      fallback?: 'first-form-control' | 'none';\n    };\n\nconst explicitInitialFocusSelector = '[data-initial-focus], [autofocus]';\n\nconst formEditingSelector = [\n  'input:not([type=\"hidden\"]):not([type=\"button\"]):not([type=\"submit\"]):not([type=\"reset\"]):not([type=\"file\"]):not([type=\"checkbox\"]):not([type=\"radio\"]):not([disabled])',\n  'textarea:not([disabled])',\n  '[contenteditable=\"true\"]',\n].join(',');\n\nconst formControlSelector = [\n  'select:not([disabled])',\n  'button:not([disabled])',\n  'input[type=\"checkbox\"]:not([disabled])',\n  'input[type=\"radio\"]:not([disabled])',\n].join(',');\n\nconst focusableSelector = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]',\n].join(',');\n\nconst hasHiddenAncestor = (element: HTMLElement): boolean => {\n  return element.closest('[hidden], [aria-hidden=\"true\"]') != null;\n};\n\nconst isDisabled = (element: HTMLElement): boolean => {\n  if (element.getAttribute('aria-disabled') === 'true') {\n    return true;\n  }\n\n  if ('disabled' in element && element.disabled === true) {\n    return true;\n  }\n\n  return false;\n};\n\nconst isVisible = (element: HTMLElement): boolean => {\n  if (element.hidden === true) {\n    return false;\n  }\n\n  if (element.getClientRects().length > 0) {\n    return true;\n  }\n\n  const style = globalThis.getComputedStyle(element);\n\n  return style.display !== 'none' && style.visibility !== 'hidden';\n};\n\nexport const isFocusableElement = (\n  element: Element | null | undefined,\n): element is HTMLElement => {\n  if (!(element instanceof HTMLElement)) {\n    return false;\n  }\n\n  if (!element.isConnected) {\n    return false;\n  }\n\n  if (isDisabled(element)) {\n    return false;\n  }\n\n  if (hasHiddenAncestor(element)) {\n    return false;\n  }\n\n  return isVisible(element);\n};\n\nconst findFirstMatching = (\n  container: HTMLElement,\n  selector: string,\n): HTMLElement | null => {\n  const elements = Array.from(container.querySelectorAll(selector));\n  return elements.find(isFocusableElement) ?? null;\n};\n\nexport const findFirstFormControl = (\n  container: HTMLElement,\n): HTMLElement | null => {\n  return (\n    findFirstMatching(container, explicitInitialFocusSelector) ??\n    findFirstMatching(container, formEditingSelector) ??\n    findFirstMatching(container, formControlSelector)\n  );\n};\n\nexport const findFirstFocusable = (\n  container: HTMLElement,\n): HTMLElement | null => {\n  if (container.matches(focusableSelector) && isFocusableElement(container)) {\n    return container;\n  }\n\n  return findFirstMatching(container, focusableSelector);\n};\n\nexport const getFocusableElements = (container: HTMLElement): HTMLElement[] => {\n  const elements = Array.from(container.querySelectorAll(focusableSelector));\n  const result = elements.filter(isFocusableElement);\n\n  if (container.matches(focusableSelector) && isFocusableElement(container)) {\n    return [container, ...result];\n  }\n\n  return result;\n};\n\nconst resolveByMode = (\n  container: HTMLElement,\n  mode: InitialFocusMode,\n): HTMLElement | null => {\n  switch (mode) {\n    case 'first-form-control':\n      return findFirstFormControl(container);\n    case 'first-focusable':\n      return findFirstFocusable(container);\n    case 'dialog':\n      return container;\n    case 'none':\n      return null;\n    default:\n      return null;\n  }\n};\n\nexport const resolveInitialFocusTarget = (\n  container: HTMLElement,\n  target: InitialFocusTarget,\n): HTMLElement | null => {\n  if (typeof target === 'string') {\n    return resolveByMode(container, target);\n  }\n\n  if (target.mode === 'ref') {\n    if (isFocusableElement(target.ref.current)) {\n      return target.ref.current;\n    }\n    return resolveByMode(container, target.fallback ?? 'dialog');\n  }\n\n  const selected = container.querySelector(target.selector);\n  if (isFocusableElement(selected)) {\n    return selected;\n  }\n\n  return resolveByMode(container, target.fallback ?? 'dialog');\n};\n\nexport const resolveFormInitialFocusTarget = (\n  container: HTMLElement,\n  target: FormInitialFocus,\n): HTMLElement | null => {\n  if (target === 'none') {\n    return null;\n  }\n\n  if (target === 'first-form-control') {\n    return findFirstFormControl(container);\n  }\n\n  if (isFocusableElement(target.ref.current)) {\n    return target.ref.current;\n  }\n\n  if (target.fallback === 'first-form-control') {\n    return findFirstFormControl(container);\n  }\n\n  return null;\n};\n\nexport const focusElement = (element: HTMLElement | null): void => {\n  element?.focus({ preventScroll: true });\n};\n"],"mappings":";AA8BA,IAAM,IAA+B,qCAE/B,IAAsB;CAC1B;CACA;CACA;CACD,CAAC,KAAK,IAAI,EAEL,IAAsB;CAC1B;CACA;CACA;CACA;CACD,CAAC,KAAK,IAAI,EAEL,IAAoB;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC,KAAK,IAAI,EAEL,KAAqB,MAClB,EAAQ,QAAQ,mCAAiC,IAAI,MAGxD,KAAc,MACd,EAAQ,aAAa,gBAAgB,KAAK,UAI1C,cAAc,KAAW,EAAQ,aAAa,IAO9C,KAAa,MAAkC;CACnD,IAAI,EAAQ,WAAW,IACrB,OAAO;CAGT,IAAI,EAAQ,gBAAgB,CAAC,SAAS,GACpC,OAAO;CAGT,IAAM,IAAQ,WAAW,iBAAiB,EAAQ;CAElD,OAAO,EAAM,YAAY,UAAU,EAAM,eAAe;GAG7C,KACX,MAEI,EAAE,aAAmB,gBAIrB,CAAC,EAAQ,eAIT,EAAW,EAAQ,IAInB,EAAkB,EAAQ,GACrB,KAGF,EAAU,EAAQ,EAGrB,KACJ,GACA,MAEiB,MAAM,KAAK,EAAU,iBAAiB,EAAS,CACzD,CAAS,KAAK,EAAmB,IAAI,MAGjC,KACX,MAGE,EAAkB,GAAW,EAA6B,IAC1D,EAAkB,GAAW,EAAoB,IACjD,EAAkB,GAAW,EAAoB,EAIxC,KACX,MAEI,EAAU,QAAQ,EAAkB,IAAI,EAAmB,EAAU,GAChE,IAGF,EAAkB,GAAW,EAAkB,EAG3C,KAAwB,MAA0C;CAE7E,IAAM,IADW,MAAM,KAAK,EAAU,iBAAiB,EAAkB,CAC1D,CAAS,OAAO,EAAmB;CAMlD,OAJI,EAAU,QAAQ,EAAkB,IAAI,EAAmB,EAAU,GAChE,CAAC,GAAW,GAAG,EAAO,GAGxB;GAGH,KACJ,GACA,MACuB;CACvB,QAAQ,GAAR;EACE,KAAK,sBACH,OAAO,EAAqB,EAAU;EACxC,KAAK,mBACH,OAAO,EAAmB,EAAU;EACtC,KAAK,UACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,SACE,OAAO;;GAIA,KACX,GACA,MACuB;CACvB,IAAI,OAAO,KAAW,UACpB,OAAO,EAAc,GAAW,EAAO;CAGzC,IAAI,EAAO,SAAS,OAIlB,OAHI,EAAmB,EAAO,IAAI,QAAQ,GACjC,EAAO,IAAI,UAEb,EAAc,GAAW,EAAO,YAAY,SAAS;CAG9D,IAAM,IAAW,EAAU,cAAc,EAAO,SAAS;CAKzD,OAJI,EAAmB,EAAS,GACvB,IAGF,EAAc,GAAW,EAAO,YAAY,SAAS;GAGjD,KACX,GACA,MAEI,MAAW,SACN,OAGL,MAAW,uBACN,EAAqB,EAAU,GAGpC,EAAmB,EAAO,IAAI,QAAQ,GACjC,EAAO,IAAI,UAGhB,EAAO,aAAa,uBACf,EAAqB,EAAU,GAGjC,MAGI,KAAgB,MAAsC;CACjE,GAAS,MAAM,EAAE,eAAe,IAAM,CAAC"}