@basic-ui/core 0.0.52 → 0.0.53

package/src/ComboBox/index.ts

@@ -1,8 +1,8 @@
-export * from './Combobox';
-export * from './ComboboxButton';
-export * from './ComboboxInput';
-export * from './ComboboxLabel';
-export * from './ComboboxList';
-export * from './ComboboxOption';
-export * from './ComboboxPopover';
-export * from './context';
+export * from './Combobox';
+export * from './ComboboxButton';
+export * from './ComboboxInput';
+export * from './ComboboxLabel';
+export * from './ComboboxList';
+export * from './ComboboxOption';
+export * from './ComboboxPopover';
+export * from './context';

package/src/ComboBox/makeHash.ts

@@ -1,19 +1,19 @@
-// We don't want to track the active descendant with indexes because nothing is
-// more annoying in a combobox than having it change values RIGHT AS YOU HIT
-// ENTER. That only happens if you use the index as your data, rather than
-// *your data as your data*. We use this to generate a unique ID based on the
-// value of each item.  This function is short, sweet, and good enough™ (I also
-// don't know how it works, tbqh)
-// https://stackoverflow.com/questions/6122571/simple-non-secure-hash-function-for-javascript
-export function makeHash(str: string) {
-  let hash = 0;
-  if (str.length === 0) {
-    return hash;
-  }
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-  return hash;
-}
+// We don't want to track the active descendant with indexes because nothing is
+// more annoying in a combobox than having it change values RIGHT AS YOU HIT
+// ENTER. That only happens if you use the index as your data, rather than
+// *your data as your data*. We use this to generate a unique ID based on the
+// value of each item.  This function is short, sweet, and good enough™ (I also
+// don't know how it works, tbqh)
+// https://stackoverflow.com/questions/6122571/simple-non-secure-hash-function-for-javascript
+export function makeHash(str: string) {
+  let hash = 0;
+  if (str.length === 0) {
+    return hash;
+  }
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return hash;
+}

package/src/ComboBox/scopeQuery.ts

@@ -1,6 +1,6 @@
-export function scopeQuery(
-  nodeType: string,
-  props: Record<string, unknown>
-): boolean {
-  return props['data-reach-combobox-option'] === '';
-}
+export function scopeQuery(
+  nodeType: string,
+  props: Record<string, unknown>
+): boolean {
+  return props['data-reach-combobox-option'] === '';
+}

package/src/ComboBox/styles.css

@@ -1,32 +1,32 @@
-[data-reach-combobox] {
-  position: relative;
-}
-
-[data-reach-combobox-input] {
-  width: 400px;
-  font-size: 100%;
-  padding: 0.33rem;
-}
-
-[data-reach-combobox-popover] {
-  position: absolute;
-  top: 100%;
-  left: 0px;
-  width: auto;
-  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.15);
-  border: none;
-}
-
-[data-reach-combobox-list] {
-  padding: 0 8px;
-  max-height: 100px;
-  overflow-y: scroll
-}
-
-[data-reach-combobox-option] {
-  list-style: none;
-}
-
-[data-reach-combobox-option][data-highlighted] {
-  background-color: #f1f2f4;
-}
+[data-reach-combobox] {
+  position: relative;
+}
+
+[data-reach-combobox-input] {
+  width: 400px;
+  font-size: 100%;
+  padding: 0.33rem;
+}
+
+[data-reach-combobox-popover] {
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  width: auto;
+  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.15);
+  border: none;
+}
+
+[data-reach-combobox-list] {
+  padding: 0 8px;
+  max-height: 100px;
+  overflow-y: scroll
+}
+
+[data-reach-combobox-option] {
+  list-style: none;
+}
+
+[data-reach-combobox-option][data-highlighted] {
+  background-color: #f1f2f4;
+}

package/src/FocusLock/FocusLock.tsx

@@ -1,66 +1,66 @@
-import type {
-  ElementType,
-  FC,
-  HTMLAttributes,
-  MutableRefObject,
-  ReactNode,
-} from 'react';
-import { useRef } from 'react';
-
-import { useFocusLock } from './useFocusLock';
-
-export interface FocusLockProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  childRef: MutableRefObject<HTMLElement | null>;
-  enabled?: boolean;
-}
-
-export const FocusLock: FC<FocusLockProps> = function FocusLock(props) {
-  const {
-    as: Comp = 'div',
-    childRef,
-    enabled = false,
-    style = {},
-    children,
-    ...otherProps
-  } = props;
-  const lockStartRef = useRef<HTMLElement>(null);
-  const lockEndRef = useRef<HTMLElement>(null);
-
-  useFocusLock(childRef, { enabled, lockStartRef, lockEndRef });
-
-  const lockStyle = {
-    width: 1,
-    height: 0,
-    padding: 0,
-    overflow: 'hidden',
-    position: 'fixed',
-    top: 1,
-    left: 1,
-    ...style,
-  };
-
-  return (
-    <>
-      <Comp
-        ref={lockStartRef}
-        data-focus-lock-start=""
-        aria-hidden={true}
-        tabIndex={0}
-        style={lockStyle}
-        {...otherProps}
-      />
-      {children}
-      <Comp
-        ref={lockEndRef}
-        data-focus-lock-end=""
-        aria-hidden={true}
-        tabIndex={0}
-        style={lockStyle}
-        {...otherProps}
-      />
-    </>
-  );
-};
+import type {
+  ElementType,
+  FC,
+  HTMLAttributes,
+  MutableRefObject,
+  ReactNode,
+} from 'react';
+import { useRef } from 'react';
+
+import { useFocusLock } from './useFocusLock';
+
+export interface FocusLockProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  childRef: MutableRefObject<HTMLElement | null>;
+  enabled?: boolean;
+}
+
+export const FocusLock: FC<FocusLockProps> = function FocusLock(props) {
+  const {
+    as: Comp = 'div',
+    childRef,
+    enabled = false,
+    style = {},
+    children,
+    ...otherProps
+  } = props;
+  const lockStartRef = useRef<HTMLElement>(null);
+  const lockEndRef = useRef<HTMLElement>(null);
+
+  useFocusLock(childRef, { enabled, lockStartRef, lockEndRef });
+
+  const lockStyle = {
+    width: 1,
+    height: 0,
+    padding: 0,
+    overflow: 'hidden',
+    position: 'fixed',
+    top: 1,
+    left: 1,
+    ...style,
+  };
+
+  return (
+    <>
+      <Comp
+        ref={lockStartRef}
+        data-focus-lock-start=""
+        aria-hidden={true}
+        tabIndex={0}
+        style={lockStyle}
+        {...otherProps}
+      />
+      {children}
+      <Comp
+        ref={lockEndRef}
+        data-focus-lock-end=""
+        aria-hidden={true}
+        tabIndex={0}
+        style={lockStyle}
+        {...otherProps}
+      />
+    </>
+  );
+};

package/src/FocusLock/index.ts

@@ -1 +1 @@
-export * from './FocusLock';
+export * from './FocusLock';

package/src/FocusLock/tabUtils.ts

@@ -1,40 +1,40 @@
-export const tabblable = [
-  'button:enabled:not([readonly])',
-  'select:enabled:not([readonly])',
-  'textarea:enabled:not([readonly])',
-  'input:enabled:not([readonly])',
-
-  'a[href]',
-  'area[href]',
-
-  'iframe',
-  'object',
-  'embed',
-
-  '[tabindex]',
-  '[contenteditable]',
-  '[autofocus]',
-].join(',');
-
-/* This is naive and will not consider tabIndex */
-export const getTabblableNodes = (
-  parentNode: HTMLElement | null
-): HTMLElement[] => {
-  if (!parentNode) {
-    return [];
-  }
-
-  return Array.from(parentNode.querySelectorAll(tabblable));
-};
-
-export function focusOnChildNode(parentNode: HTMLElement, itemIndex: 0 | -1) {
-  const elements = getTabblableNodes(parentNode);
-  if (elements.length > 0) {
-    elements[itemIndex === -1 ? elements.length - 1 : 0].focus();
-  } else {
-    const currentTabIndex = parentNode.tabIndex;
-    parentNode.tabIndex = 0;
-    parentNode.focus();
-    parentNode.tabIndex = currentTabIndex;
-  }
-}
+export const tabblable = [
+  'button:enabled:not([readonly])',
+  'select:enabled:not([readonly])',
+  'textarea:enabled:not([readonly])',
+  'input:enabled:not([readonly])',
+
+  'a[href]',
+  'area[href]',
+
+  'iframe',
+  'object',
+  'embed',
+
+  '[tabindex]',
+  '[contenteditable]',
+  '[autofocus]',
+].join(',');
+
+/* This is naive and will not consider tabIndex */
+export const getTabblableNodes = (
+  parentNode: HTMLElement | null
+): HTMLElement[] => {
+  if (!parentNode) {
+    return [];
+  }
+
+  return Array.from(parentNode.querySelectorAll(tabblable));
+};
+
+export function focusOnChildNode(parentNode: HTMLElement, itemIndex: 0 | -1) {
+  const elements = getTabblableNodes(parentNode);
+  if (elements.length > 0) {
+    elements[itemIndex === -1 ? elements.length - 1 : 0].focus();
+  } else {
+    const currentTabIndex = parentNode.tabIndex;
+    parentNode.tabIndex = 0;
+    parentNode.focus();
+    parentNode.tabIndex = currentTabIndex;
+  }
+}

package/src/FocusLock/useFocusLock.ts

@@ -1,56 +1,56 @@
-import type { MutableRefObject } from 'react';
-import { useEffect } from 'react';
-
-import { focusOnChildNode } from './tabUtils';
-
-export interface FocusLockOptions {
-  enabled: boolean;
-  lockStartRef: MutableRefObject<HTMLElement | null>;
-  lockEndRef: MutableRefObject<HTMLElement | null>;
-}
-
-const focusLockStack: HTMLElement[] = [];
-export function useFocusLock(
-  ref: MutableRefObject<HTMLElement | null>,
-  opts: FocusLockOptions
-) {
-  const { enabled = true, lockStartRef, lockEndRef } = opts;
-
-  useEffect(() => {
-    const rootEl = ref.current;
-    if (enabled && rootEl) {
-      focusLockStack.push(rootEl);
-
-      const listener = (event: FocusEvent) => {
-        const isActiveFocusLock =
-          focusLockStack[focusLockStack.length - 1] === rootEl;
-        if (!isActiveFocusLock) {
-          // Not the currently focused lock. Forget about it.
-          return;
-        }
-
-        if (event.target === lockEndRef.current) {
-          focusOnChildNode(rootEl, 0);
-        } else if (event.target === lockStartRef.current) {
-          focusOnChildNode(rootEl, -1);
-        } else if (
-          document !== event.target &&
-          rootEl !== event.target &&
-          !rootEl.contains(event.target as any)
-        ) {
-          event.preventDefault();
-          focusOnChildNode(rootEl, 0);
-        }
-      };
-
-      document.addEventListener('focusin', listener);
-      return () => {
-        document.removeEventListener('focusin', listener);
-
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        focusLockStack.pop();
-      };
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled]);
-}
+import type { MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+import { focusOnChildNode } from './tabUtils';
+
+export interface FocusLockOptions {
+  enabled: boolean;
+  lockStartRef: MutableRefObject<HTMLElement | null>;
+  lockEndRef: MutableRefObject<HTMLElement | null>;
+}
+
+const focusLockStack: HTMLElement[] = [];
+export function useFocusLock(
+  ref: MutableRefObject<HTMLElement | null>,
+  opts: FocusLockOptions
+) {
+  const { enabled = true, lockStartRef, lockEndRef } = opts;
+
+  useEffect(() => {
+    const rootEl = ref.current;
+    if (enabled && rootEl) {
+      focusLockStack.push(rootEl);
+
+      const listener = (event: FocusEvent) => {
+        const isActiveFocusLock =
+          focusLockStack[focusLockStack.length - 1] === rootEl;
+        if (!isActiveFocusLock) {
+          // Not the currently focused lock. Forget about it.
+          return;
+        }
+
+        if (event.target === lockEndRef.current) {
+          focusOnChildNode(rootEl, 0);
+        } else if (event.target === lockStartRef.current) {
+          focusOnChildNode(rootEl, -1);
+        } else if (
+          document !== event.target &&
+          rootEl !== event.target &&
+          !rootEl.contains(event.target as any)
+        ) {
+          event.preventDefault();
+          focusOnChildNode(rootEl, 0);
+        }
+      };
+
+      document.addEventListener('focusin', listener);
+      return () => {
+        document.removeEventListener('focusin', listener);
+
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        focusLockStack.pop();
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled]);
+}

package/src/List/List.story.tsx

@@ -1,18 +1,18 @@
-import { List, ListItem } from './';
-// import './styles.css';
-
-export default {
-  title: 'components/List',
-};
-
-const Example = () => {
-  return (
-    <List>
-      <ListItem>Item 1</ListItem>
-      <ListItem>Item 2</ListItem>
-      <ListItem>Item 3</ListItem>
-    </List>
-  );
-};
-
-export const Controlled = () => <Example />;
+import { List, ListItem } from './';
+// import './styles.css';
+
+export default {
+  title: 'components/List',
+};
+
+const Example = () => {
+  return (
+    <List>
+      <ListItem>Item 1</ListItem>
+      <ListItem>Item 2</ListItem>
+      <ListItem>Item 3</ListItem>
+    </List>
+  );
+};
+
+export const Controlled = () => <Example />;

package/src/List/List.tsx

@@ -1,17 +1,17 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-export interface ListProps extends HTMLAttributes<HTMLUListElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const List = forwardRef<HTMLUListElement, ListProps>(function List(
-  props,
-  forwardedRef
-) {
-  const { as: Comp = 'ul', ...otherProps } = props;
-
-  return <Comp ref={forwardedRef} {...otherProps} />;
-});
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const List = forwardRef<HTMLUListElement, ListProps>(function List(
+  props,
+  forwardedRef
+) {
+  const { as: Comp = 'ul', ...otherProps } = props;
+
+  return <Comp ref={forwardedRef} {...otherProps} />;
+});

package/src/List/ListItem.tsx

@@ -1,23 +1,23 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
-  function ListItem(props, forwardedRef) {
-    const { as: Comp = 'li', ...otherProps } = props;
-
-    return (
-      <Comp
-        tabIndex={-1}
-        data-list-item=""
-        ref={forwardedRef}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
+  function ListItem(props, forwardedRef) {
+    const { as: Comp = 'li', ...otherProps } = props;
+
+    return (
+      <Comp
+        tabIndex={-1}
+        data-list-item=""
+        ref={forwardedRef}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/List/context.ts

@@ -1,19 +1,19 @@
-import { createContext, useContext } from 'react';
-
-// List Component
-export interface ListContextProps {
-  id: string | undefined;
-}
-
-const ListContext = createContext<ListContextProps | null>(null);
-ListContext.displayName = 'ListContext';
-
-export const useListContext = (): ListContextProps => {
-  const ctx = useContext(ListContext);
-  if (!ctx) {
-    throw new Error(
-      'useListContext must be used within a ListContext.Provider'
-    );
-  }
-  return ctx;
-};
+import { createContext, useContext } from 'react';
+
+// List Component
+export interface ListContextProps {
+  id: string | undefined;
+}
+
+const ListContext = createContext<ListContextProps | null>(null);
+ListContext.displayName = 'ListContext';
+
+export const useListContext = (): ListContextProps => {
+  const ctx = useContext(ListContext);
+  if (!ctx) {
+    throw new Error(
+      'useListContext must be used within a ListContext.Provider'
+    );
+  }
+  return ctx;
+};

package/src/List/index.ts

@@ -1,2 +1,2 @@
-export * from './List';
-export * from './ListItem';
+export * from './List';
+export * from './ListItem';