@adamjanicki/ui 1.2.0 → 1.2.2

package/hooks/index.d.ts

@@ -3,3 +3,4 @@ export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useWatchScroll } from "./useWatchScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
 export { default as useScrollToHash } from "./useScrollToHash";
+export { default as useWindowResize } from "./useWindowResize";

package/hooks/index.js

@@ -3,3 +3,4 @@ export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useWatchScroll } from "./useWatchScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
 export { default as useScrollToHash } from "./useScrollToHash";
+export { default as useWindowResize } from "./useWindowResize";

package/hooks/useScrollLock.d.ts

@@ -9,7 +9,7 @@ type ScrollLock = {
     unlock: () => void;
 };
 /**
- * Hook to lock and unlock the scroll position
+ * Hook to lock and unlock the scroll position.
  * @returns Object with lock and unlock functions to lock and unlock the scroll position
  */
 declare const useScrollLock: () => ScrollLock;

package/hooks/useScrollLock.js

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 /**
- * Hook to lock and unlock the scroll position
+ * Hook to lock and unlock the scroll position.
  * @returns Object with lock and unlock functions to lock and unlock the scroll position
  */
 var useScrollLock = function () {

package/hooks/useWindowResize.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook that listens for window resize events.
+ *
+ * @param callback the callback function fired when the window is resized.
+ */
+declare const useWindowResize: (callback: (event?: UIEvent) => void) => void;
+export default useWindowResize;

package/hooks/useWindowResize.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+/**
+ * A hook that listens for window resize events.
+ *
+ * @param callback the callback function fired when the window is resized.
+ */
+var useWindowResize = function (callback) {
+    useEffect(function () {
+        window.addEventListener("resize", callback);
+        return function () { return window.removeEventListener("resize", callback); };
+    }, [callback]);
+};
+export default useWindowResize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",

package/tmp

@@ -1,95 +0,0 @@
-import React, { forwardRef } from "react";
-import { classNames } from "../../utils/util";
-import { CornerType } from "../../utils/types";
-
-type Props = Omit<
-  React.DetailedHTMLProps<
-    React.SelectHTMLAttributes<HTMLSelectElement>,
-    HTMLSelectElement
-  >,
-  "aria-label"
-> & {
-  /**
-   * Array of options to display in the select
-   */
-  options: string[];
-  /**
-   * Mapper function to get the value of the option
-   *
-   * @param option the option to get the value of
-   * @returns the value of the option
-   */
-  getOptionValue?: (option: string) => string;
-  /**
-   * Mapper function to get the label of the option
-   *
-   * @param option the option to get the label of
-   * @returns the label of the option
-   */
-  getOptionLabel?: (option: string) => string;
-  /**
-   * [Optional] The corner style of the select element.
-   * @default "rounded"
-   */
-  corners?: CornerType;
-  /**
-   * Name of the select for accessibility purposes
-   */
-  "aria-label": string;
-  /**
-   * [Optional] The styles to apply to the select element
-   */
-  innerStyle?: React.CSSProperties;
-  /**
-   * [Optional] The class name to apply to the select element
-   */
-  innerClassName?: string;
-};
-
-const identity = (x: string) => x;
-
-const Select = (
-  {
-    className,
-    options,
-    getOptionValue = identity,
-    getOptionLabel = identity,
-    corners = "rounded",
-    style,
-    innerStyle,
-    innerClassName,
-    ...props
-  }: Props,
-  ref: React.Ref<HTMLSelectElement>
-) => (
-  <div className={classNames("ajui-select-container", className)} style={style}>
-    <select
-      {...props}
-      ref={ref}
-      className={classNames(
-        `ajui-select-base corners--${corners}`,
-        innerClassName
-      )}
-      style={innerStyle}
-    >
-      {options.map((option, index) => (
-        <option key={index} value={getOptionValue(option)}>
-          {getOptionLabel(option)}
-        </option>
-      ))}
-    </select>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 64 64"
-      className="ajui-select-triangle"
-      aria-hidden="true"
-    >
-      <path
-        fill="currentColor"
-        d="M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219"
-      />
-    </svg>
-  </div>
-);
-
-export default forwardRef(Select);