@artsy/palette 40.3.0 → 40.4.0

package/dist/helpers/media.d.ts

@@ -0,0 +1,21 @@
+import { css } from "styled-components";
+import { breakpoints } from "../Theme";
+declare type Media = {
+    [S in keyof typeof breakpoints]: typeof css;
+};
+/**
+ * A helper to construct media query strings for responsive style targeting.
+ *
+ * @example
+ *
+ * const Panel = styled.div`
+ *   ${media.sm`
+ *     width: 50%;
+ *   `}
+ *   ${media.lg`
+ *     width: 100%;
+ *   `}
+ * `
+ */
+export declare const media: Media;
+export {};

package/dist/helpers/space.d.ts

@@ -0,0 +1,8 @@
+import { SpacingUnit } from "../Theme";
+/**
+ * A helper to easily access space values when not in a styled-components or
+ * styled-systems context.
+ *
+ * @deprecated use component spacing props, or `themeGet('space.n')`
+ */
+export declare const space: (spaceKey: SpacingUnit) => number;

package/dist/helpers/transition.d.ts

@@ -0,0 +1,3 @@
+/** Transition specifically for the StyledLabel and Container in multiple components.
+ * It animates color, transform, padding, and font-size properties with 0.25s duration and custom cubic-bezier easing function. **/
+export declare const FORM_ELEMENT_TRANSITION = "0.25s cubic-bezier(0.64, 0.05, 0.36, 1)";

package/dist/helpers/visuallyDisableScrollbar.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Mixin that disables the scrollbar
+ */
+export declare const visuallyDisableScrollbar: import("styled-components").RuleSet<object>;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./elements";
+export * from "./helpers";
+export * from "./Theme";
+export * from "./utils";

package/dist/shared/RequiredField.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { TextProps } from "../elements";
+export declare const RequiredField: React.FC<React.PropsWithChildren<TextProps & {
+    disabled?: boolean;
+}>>;

package/dist/themes/Themes.story.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Theme: () => React.JSX.Element;
+export declare const Colors: () => React.JSX.Element;
+export declare const Spacing: () => React.JSX.Element;
+export declare const Grid: () => React.JSX.Element;
+export declare const Typography: () => React.JSX.Element;
+export declare const Buttons: () => React.JSX.Element;
+export declare const Components: () => React.JSX.Element;
+export declare const Inputs: () => React.JSX.Element;
+export declare const ContrastRatios: () => React.JSX.Element;

package/dist/themes/index.d.ts

@@ -0,0 +1 @@
+export * from "@artsy/palette-tokens";

package/dist/themes/types.d.ts

@@ -0,0 +1 @@
+export { Breakpoint, Color, SpacingUnit } from "@artsy/palette-tokens";

package/dist/utils/FocusLocking.story.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithAutocompleteInput: () => React.JSX.Element;
+export declare const DisableToEnable: () => React.JSX.Element;

package/dist/utils/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./useClickOutside";
+export * from "./useContainsFocus";
+export * from "./useDidMount";
+export * from "./useIsomorphicLayoutEffect";
+export * from "./useMutationObserver";
+export * from "./usePortal";
+export * from "./usePosition";
+export * from "./usePrevious";
+export * from "./useResizeObserver";
+export * from "./useSentinelVisibility";
+export * from "./useUpdateEffect";
+export * from "./useWidthOf";

package/dist/utils/remapValue.d.ts

@@ -0,0 +1,15 @@
+declare type Range = {
+    min: number;
+    max: number;
+};
+/**
+ * Remaps a value from within one range to its corresponding value in another range.
+ * E.g. convert between units or proportionally scale a value.
+ *
+ * @param n A numeric value
+ * @param from Range the value comes from
+ * @param to Range you wish to remap the value onto
+ * @returns The remapped numeric value
+ */
+export declare const remapValue: (n: number, from: Range, to: Range) => number;
+export {};

package/dist/utils/splitProps.d.ts

@@ -0,0 +1,7 @@
+import { styleFn } from "styled-system";
+/**
+ * Allows you to pass in a styled-system function and split out
+ * in a typesafe manner, the props that match and do not match
+ * the styled function.
+ */
+export declare const splitProps: <T>(mixin: styleFn) => <U>(props: U) => [T, Omit<U, keyof T>];

package/dist/utils/useClickOutside.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface UseClickOutside {
+    ref: React.RefObject<HTMLElement>;
+    when: boolean;
+    type?: keyof DocumentEventMap;
+    onClickOutside: (event: Event) => void;
+}
+/**
+ * Use click outside is a hook that will listen for clicks outside of a ref,
+ * and when true, execute a callback.
+ */
+export declare const useClickOutside: ({ ref, type, when, onClickOutside, }: UseClickOutside) => void;

package/dist/utils/useContainsFocus.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const useContainsFocus: ({ onChange, }: {
+    onChange(focused: boolean): void;
+}) => {
+    ref: import("react").RefObject<HTMLElement>;
+};

package/dist/utils/useDidMount.d.ts

@@ -0,0 +1,4 @@
+export declare const useDidMount: ({ defaultMounted, clearCallStack, }?: {
+    defaultMounted?: boolean | undefined;
+    clearCallStack?: boolean | undefined;
+}) => boolean | undefined;

package/dist/utils/useInterval.d.ts

@@ -0,0 +1,2 @@
+/** useInterval */
+export declare function useInterval(callback: any, delay: any): void;

package/dist/utils/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+/**
+ * Silences the "useLayoutEffect does nothing on the server" warning
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/utils/useLatest.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useLatest: <T extends unknown>(current: T) => import("react").MutableRefObject<T>;

package/dist/utils/useMutationObserver.d.ts

@@ -0,0 +1,15 @@
+import type { MutableRefObject } from "react";
+declare type UseMutationObserver = {
+    active?: boolean;
+    onMutate: MutationCallback;
+    options?: MutationObserverInit;
+} & ({
+    ref: MutableRefObject<HTMLElement | null>;
+} | {
+    element?: HTMLElement | null;
+});
+/**
+ * Accepts a ref and calls the `onMutate` callback when mutations are observed.
+ */
+export declare const useMutationObserver: ({ active, onMutate, options, ...rest }: UseMutationObserver) => void;
+export {};

package/dist/utils/usePortal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const usePortal: () => {
+    createPortal: (children: React.ReactNode) => React.ReactPortal | null;
+};

package/dist/utils/usePosition.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+export declare const POSITION: {
+    readonly "top-start": "top-start";
+    readonly top: "top";
+    readonly "top-end": "top-end";
+    readonly "bottom-start": "bottom-start";
+    readonly bottom: "bottom";
+    readonly "bottom-end": "bottom-end";
+    readonly "left-start": "left-start";
+    readonly left: "left";
+    readonly "left-end": "left-end";
+    readonly "right-start": "right-start";
+    readonly right: "right";
+    readonly "right-end": "right-end";
+};
+export declare type Position = keyof typeof POSITION;
+interface TargetPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Will position the floating element (tooltip) relative to the anchor element,
+ * using `position: fixed` and in such a way that it shouldn't ever appear
+ * partially offscreen and will move correctly when the parent is scrolled.
+ */
+export declare const usePosition: ({ key, position, offset, active, flip, clamp, }: {
+    /** Listen to changes on this value */
+    key?: string | number | boolean | undefined;
+    /** Placement relative to anchor */
+    position: Position;
+    /** Distance from anchor (default: `0`) */
+    offset?: number | undefined;
+    /** Optionally disable for performance (default: `true`) */
+    active?: boolean | undefined;
+    /** Optionally disable flipping (default: `true`) */
+    flip?: boolean | undefined;
+    /** Optionally disable clamping (default: `true`) */
+    clamp?: boolean | undefined;
+}) => {
+    tooltipRef: import("react").MutableRefObject<HTMLElement | null>;
+    anchorRef: import("react").MutableRefObject<HTMLElement | null>;
+    state: {
+        isFlipped: boolean;
+    };
+};
+interface PlaceTooltip {
+    anchor: HTMLElement;
+    tooltip: HTMLElement;
+    position: Position;
+    offset?: number;
+    boundaryRect?: DOMRect;
+    flip?: boolean;
+    clamp?: boolean;
+}
+export declare const placeTooltip: ({ anchor, tooltip, position, offset, boundaryRect, flip, clamp, }: PlaceTooltip) => {
+    isFlipped: boolean;
+};
+export declare const getPosition: (elementRect: Pick<DOMRect, "width" | "height" | "top" | "right" | "bottom" | "left">, tooltipRect: Pick<DOMRect, "width" | "height">, position: Position) => TargetPosition;
+export declare const translateWithOffset: (targetPosition: TargetPosition, position: Position, offset: number) => string;
+export declare const getDocumentBoundingRect: () => DOMRect;
+interface ShouldFlip {
+    targetPosition: TargetPosition;
+    position: Position;
+    boundaryRect: Pick<DOMRect, "top" | "right" | "bottom" | "left">;
+    tooltipRect: Pick<DOMRect, "width" | "height">;
+}
+export declare const shouldFlip: ({ targetPosition, position, boundaryRect, tooltipRect, }: ShouldFlip) => boolean;
+export {};

package/dist/utils/usePrevious.d.ts

@@ -0,0 +1,5 @@
+/**
+ * usePrevious
+ * Stores state or props in a ref to compare against new props or state
+ */
+export declare function usePrevious<T>(value: T): T;

package/dist/utils/useResizeObserver.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type UseResizeObserver<T extends HTMLElement> = {
+    active?: boolean;
+    target: React.RefObject<T> | T | null;
+    onResize: UseResizeObserverCallback;
+};
+export declare const useResizeObserver: <T extends HTMLElement>({ active, target, onResize, }: UseResizeObserver<T>) => void;
+declare type UseResizeObserverCallback = (entry: ResizeObserverEntry, observer: ResizeObserver) => unknown;
+export {};

package/dist/utils/useSentinelVisibility.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * Used to track if the returned sentinel is in the viewport or not
+ */
+export declare const useSentinelVisibility: () => {
+    isSentinelVisible: boolean;
+    sentinel: React.JSX.Element;
+};

package/dist/utils/useUpdateEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+/**
+ * Equivalent to `useEffect` but skips initial mount
+ */
+export declare const useUpdateEffect: typeof useEffect;

package/dist/utils/useWidthOf.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface UseWidthOf {
+    ref: React.MutableRefObject<HTMLElement | null>;
+}
+/** Hook that returns the width of the given node. Updates on resize. */
+export declare const useWidthOf: ({ ref }: UseWidthOf) => {
+    width: number;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "40.3.0",
+  "version": "40.4.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -188,5 +188,6 @@
     "testEnvironmentOptions": {
       "url": "http://localhost"
     }
-  }
+  },
+  "gitHead": "d2fbc4214223945de38d25f5dfcad1f2f931799d"
 }