@primer/components 0.0.0-202110323331 → 0.0.0-2021103235619

package/lib-esm/_TextInputWrapper.js

@@ -21,7 +21,7 @@ const sizeVariants = variant({
 const TextInputWrapper = styled.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return css(["padding:0;"]);
   } else {

package/lib-esm/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+declare function useDebounce<T>(value: T, delay: number): T;
+export default useDebounce;

package/lib-esm/hooks/useDebounce.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export default useDebounce;

package/lib-esm/hooks/useResizeObserver.d.ts

@@ -1 +1 @@
-export declare function useResizeObserver(callback: () => void): void;
+export declare function useResizeObserver(callback: (window: ResizeObserverEntry) => void): void;

package/lib-esm/hooks/useResizeObserver.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export function useResizeObserver(callback) {
   React.useLayoutEffect(() => {
-    const observer = new window.ResizeObserver(() => callback());
+    const observer = new window.ResizeObserver(entries => callback(entries[0]));
     observer.observe(document.documentElement);
     return () => {
       observer.disconnect();

package/lib-esm/sx.d.ts

@@ -1,12 +1,6 @@
-import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
-import { ThemeColorPaths, ThemeShadowPaths } from './theme';
-import { ColorProps, ShadowProps } from 'styled-system';
-export declare type BetterCssProperties = {
-    [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
-};
-export declare type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject;
+import { SystemStyleObject } from '@styled-system/css';
 export interface SxProp {
-    sx?: BetterSystemStyleObject;
+    sx?: SystemStyleObject;
 }
 declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
 export default sx;

package/lib-esm/theme-preval.js

@@ -515,7 +515,7 @@ module.exports = {
           }
         }
       },
-      "light_protanopia": {
+      "light_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
           }
         }
       },
-      "dark_protanopia": {
+      "dark_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {

package/lib-esm/theme.d.ts

@@ -1,80 +1,2 @@
 import { theme } from './theme-preval';
-import { KeyPaths } from './utils/types/KeyPaths';
 export default theme;
-declare type ThemeColors = {
-    fg: {
-        default: string;
-        muted: string;
-        subtle: string;
-        onEmphasis: string;
-    };
-    canvas: {
-        default: string;
-        overlay: string;
-        inset: string;
-        subtle: string;
-    };
-    border: {
-        default: string;
-        muted: string;
-        subtle: string;
-    };
-    neutral: {
-        emphasisPlus: string;
-        emphasis: string;
-        muted: string;
-        subtle: string;
-    };
-    accent: {
-        fg: string;
-        emphasis: string;
-        muted: string;
-        subtle: string;
-    };
-    success: {
-        fg: string;
-        emphasis: string;
-        muted: string;
-        subtle: string;
-    };
-    attention: {
-        fg: string;
-        emphasis: string;
-        muted: string;
-        subtle: string;
-    };
-    severe: {
-        fg: string;
-        emphasis: string;
-        muted: string;
-        subtle: string;
-    };
-    danger: {
-        fg: string;
-        emphasis: string;
-        muted: string;
-        subtle: string;
-    };
-    done: {
-        fg: string;
-        emphasis: string;
-        muted: string;
-        subtle: string;
-    };
-    sponsors: {
-        fg: string;
-        emphasis: string;
-        muted: string;
-        subtle: string;
-    };
-};
-declare type ThemeShadows = {
-    shadow: {
-        small: string;
-        medium: string;
-        large: string;
-        extraLarge: string;
-    };
-};
-export declare type ThemeColorPaths = KeyPaths<ThemeColors>;
-export declare type ThemeShadowPaths = KeyPaths<ThemeShadows>;

package/lib-esm/theme.js

@@ -1,3 +1,2 @@
 import { theme } from './theme-preval';
-export default theme; // NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
-// were exports from primitives (or a different shape but derived from those exports).
+export default theme;

package/lib-esm/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202110323331",
+  "version": "0.0.0-2021103235619",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -43,20 +43,16 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "5.1.0",
+    "@primer/octicons-react": "^16.1.1",
+    "@primer/primitives": "6.0.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
-    "@types/history": "4.7.8",
-    "@types/styled-components": "5.1.11",
-    "@types/styled-system": "5.1.12",
-    "@types/styled-system__css": "5.0.16",
-    "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "color2k": "1.2.4",
+    "date-fns": "2.25.0",
     "deepmerge": "4.2.2",
     "focus-visible": "5.2.0",
     "styled-system": "5.1.5"
@@ -85,6 +81,11 @@
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.1.9",
+    "@types/history": "4.7.9",
+    "@types/styled-components": "5.1.15",
+    "@types/styled-system": "5.1.13",
+    "@types/styled-system__css": "5.0.16",
+    "@types/styled-system__theme-get": "5.0.1",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "26.0.23",
@@ -132,9 +133,7 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "size-limit": "5.0.2",
-    "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
-    "ts-toolbelt": "9.6.0",
     "typescript": "4.2.2"
   },
   "peerDependencies": {

package/lib/utils/types/KeyPaths.d.ts

@@ -1,3 +0,0 @@
-export declare type KeyPaths<O extends Record<string, unknown>> = {
-    [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
-}[keyof O];

package/lib/utils/types/KeyPaths.js

@@ -1 +0,0 @@
-"use strict";

package/lib-esm/utils/types/KeyPaths.d.ts

@@ -1,3 +0,0 @@
-export declare type KeyPaths<O extends Record<string, unknown>> = {
-    [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
-}[keyof O];

package/lib-esm/utils/types/KeyPaths.js

@@ -1 +0,0 @@
-export {};