@instructure/ui-color-picker 8.25.1-snapshot-20

package/types/ColorPicker/ColorPickerLocator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerLocator.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/ColorPickerLocator.ts"],"names":[],"mappings":"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"}

package/types/ColorPicker/index.d.ts

@@ -0,0 +1,158 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React, { Component } from 'react';
+import { jsx } from '@instructure/emotion';
+import type { ColorPickerProps, ColorPickerState, ContrastStrength, MessageType } from './props';
+/**
+---
+category: components
+---
+@tsProps
+**/
+declare class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        checkContrast?: {
+            isStrict: boolean;
+            contrastStrength?: ContrastStrength | undefined;
+            contrastAgainst?: string | undefined;
+            renderContrastSuccessMessage?: ((contrast: number, minContrast: number) => MessageType) | undefined;
+            renderContrastErrorMessage?: ((contrast: number, minContrast: number) => MessageType) | undefined;
+        } | undefined;
+        colorMixerSettings?: {
+            popoverAddButtonLabel: string;
+            popoverCloseButtonLabel: string;
+            colorMixer?: {
+                withAlpha: boolean;
+                rgbRedInputScreenReaderLabel: string;
+                rgbGreenInputScreenReaderLabel: string;
+                rgbBlueInputScreenReaderLabel: string;
+                rgbAlphaInputScreenReaderLabel: string;
+                colorSliderNavigationExplanationScreenReaderLabel: string;
+                alphaSliderNavigationExplanationScreenReaderLabel: string;
+                colorPaletteNavigationExplanationScreenReaderLabel: string;
+            } | undefined;
+            colorPreset?: {
+                colors: string[];
+                label: string;
+            } | undefined;
+            colorContrast?: {
+                firstColor: string;
+                label: string;
+                successLabel: string;
+                failureLabel: string;
+                normalTextLabel: string;
+                largeTextLabel: string;
+                graphicsTextLabel: string;
+                firstColorLabel: string;
+                secondColorLabel: string;
+            } | undefined;
+        } | undefined;
+        children?: ((value: string, onChange: (hex: string) => void, handleAdd: () => void, handleClose: () => void) => Node) | undefined;
+        disabled?: boolean | undefined;
+        elementRef: (element: Element | null) => void;
+        isRequired?: boolean | undefined;
+        label: string;
+        onChange?: ((value: string) => void) | undefined;
+        placeholderText: string;
+        popoverMaxHeight?: string | undefined;
+        popoverScreenReaderLabel?: string | undefined;
+        popoverButtonScreenReaderLabel?: string | undefined;
+        renderInvalidColorMessage?: ((hexCode: string) => MessageType) | undefined;
+        renderIsRequiredMessage?: (() => MessageType) | undefined;
+        renderMessages?: ((hexCode: string, isValidHex: boolean, minContrast: number, contrast?: number | undefined) => MessageType) | undefined;
+        tooltip?: React.ReactNode;
+        value?: string | undefined;
+        width?: string | undefined;
+        withAlpha?: boolean | undefined;
+    }>;
+    static allowedProps: readonly (keyof {
+        checkContrast?: {
+            isStrict: boolean;
+            contrastStrength?: ContrastStrength | undefined;
+            contrastAgainst?: string | undefined;
+            renderContrastSuccessMessage?: ((contrast: number, minContrast: number) => MessageType) | undefined;
+            renderContrastErrorMessage?: ((contrast: number, minContrast: number) => MessageType) | undefined;
+        } | undefined;
+        colorMixerSettings?: {
+            popoverAddButtonLabel: string;
+            popoverCloseButtonLabel: string;
+            colorMixer?: {
+                withAlpha: boolean;
+                rgbRedInputScreenReaderLabel: string;
+                rgbGreenInputScreenReaderLabel: string;
+                rgbBlueInputScreenReaderLabel: string;
+                rgbAlphaInputScreenReaderLabel: string;
+                colorSliderNavigationExplanationScreenReaderLabel: string;
+                alphaSliderNavigationExplanationScreenReaderLabel: string;
+                colorPaletteNavigationExplanationScreenReaderLabel: string;
+            } | undefined;
+            colorPreset?: {
+                colors: string[];
+                label: string;
+            } | undefined;
+            colorContrast?: {
+                firstColor: string;
+                label: string;
+                successLabel: string;
+                failureLabel: string;
+                normalTextLabel: string;
+                largeTextLabel: string;
+                graphicsTextLabel: string;
+                firstColorLabel: string;
+                secondColorLabel: string;
+            } | undefined;
+        } | undefined;
+        children?: ((value: string, onChange: (hex: string) => void, handleAdd: () => void, handleClose: () => void) => Node) | undefined;
+        disabled?: boolean | undefined;
+        elementRef: (element: Element | null) => void;
+        isRequired?: boolean | undefined;
+        label: string;
+        onChange?: ((value: string) => void) | undefined;
+        placeholderText: string;
+        popoverMaxHeight?: string | undefined;
+        popoverScreenReaderLabel?: string | undefined;
+        popoverButtonScreenReaderLabel?: string | undefined;
+        renderInvalidColorMessage?: ((hexCode: string) => MessageType) | undefined;
+        renderIsRequiredMessage?: (() => MessageType) | undefined;
+        renderMessages?: ((hexCode: string, isValidHex: boolean, minContrast: number, contrast?: number | undefined) => MessageType) | undefined;
+        tooltip?: React.ReactNode;
+        value?: string | undefined;
+        width?: string | undefined;
+        withAlpha?: boolean | undefined;
+    })[];
+    static readonly componentId = "ColorPicker";
+    static defaultProps: {
+        elementRef: () => null;
+        disabled: boolean;
+        label: string;
+        checkContrast: boolean;
+        width: string;
+        withAlpha: boolean;
+    };
+    constructor(props: ColorPickerProps);
+    ref: Element | null;
+    handleRef: (el: Element | null) => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ColorPickerProps): void;
+    checkSettings: () => void;
+    get renderMode(): "customPopover" | "defaultPopover" | "simple";
+    get isSimple(): boolean;
+    get isDefaultPopover(): boolean;
+    get isCustomPopover(): boolean;
+    getMinContrast(strength: ContrastStrength): number;
+    renderMessages(): import("@instructure/ui-form-field/types/FormPropTypes").FormMessage[];
+    renderBeforeInput(): jsx.JSX.Element;
+    renderAfterInput(): jsx.JSX.Element | null;
+    handleOnChange(_event: React.ChangeEvent<HTMLInputElement>, value: string): void;
+    handleOnPaste(event: React.ClipboardEvent<unknown>): void;
+    handleOnBlur(): void;
+    renderLabel(): string | jsx.JSX.Element;
+    stripAlphaIfNeeded: (hex: string) => string;
+    renderPopover: () => jsx.JSX.Element;
+    renderCustomPopoverContent: () => jsx.JSX.Element;
+    renderDefaultPopoverContent: () => jsx.JSX.Element;
+    render(): jsx.JSX.Element;
+}
+export { ColorPicker };
+export default ColorPicker;
+//# sourceMappingURL=index.d.ts.map

package/types/ColorPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,8BAA8B;AAC9B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AA8BrD,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACZ,MAAM,SAAS,CAAA;AA2BhB;;;;;GAKG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IACrE,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAE3C,MAAM,CAAC,YAAY;;;;;;;MAOlB;gBAEW,KAAK,EAAE,gBAAgB;IAWnC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAOjB,kBAAkB,CAAC,SAAS,EAAE,gBAAgB;IAY9C,aAAa,aAQZ;IAED,IAAI,UAAU,kDAQb;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,gBAAgB,YAEnB;IACD,IAAI,eAAe,YAElB;IAED,cAAc,CAAC,QAAQ,EAAE,gBAAgB;IAIzC,cAAc;IA0Ed,iBAAiB;IASjB,gBAAgB;IA8BhB,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM;IAoBzE,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IA6BlD,YAAY;IAIZ,WAAW;IAiBX,kBAAkB,QAAS,MAAM,YACoC;IAErE,aAAa,wBA8BZ;IAED,0BAA0B,wBAwBzB;IACD,2BAA2B,wBAyH1B;IACD,MAAM;CAoDP;AAED,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,eAAe,WAAW,CAAA"}

package/types/ColorPicker/props.d.ts

@@ -0,0 +1,166 @@
+/// <reference types="react" />
+import type { FormMessage } from '@instructure/ui-form-field';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { ColorPickerTheme, OtherHTMLAttributes, PropValidators } from '@instructure/shared-types';
+declare type ContrastStrength = 'min' | 'mid' | 'max';
+declare type MessageType = Array<FormMessage>;
+declare type ColorPickerOwnProps = {
+    /**
+     * Configures the contrast checker. If false, there will be no checking.
+     *
+     *
+     * isStrict: if it's true, it will display an error if false, a warning
+     *
+     * contrastStrength: can be one of ('min','mid','max'), which translates to 3:1, 4.5:1, 7:1 contrast, defalts to 'mid'
+     *
+     * contrastAgainst: is the color which the component checks the contrast against. Accepts hex, defaults to #ffffff
+     *
+     * renderContrastSuccessMessage: if set and the contrast is high enough, it will display the message
+     *
+     * renderContrastErrorMessage: if set and the contrast is not high enough, it will display the message
+     *
+     *
+     * MessageType: Array<{
+     *   type: 'success' | 'hint' | 'error' | 'screenreader-only'
+     *   text: string
+     * }>
+     */
+    checkContrast?: {
+        isStrict: boolean;
+        contrastStrength?: ContrastStrength;
+        contrastAgainst?: string;
+        renderContrastSuccessMessage?: (contrast: number, minContrast: number) => MessageType;
+        renderContrastErrorMessage?: (contrast: number, minContrast: number) => MessageType;
+    };
+    /**
+     * If set, the default popover will appear for the picker. Those components whose corresponding keys aren't provided (e.g. `colorMixer`, `colorPreset` or `colorContrast`)
+     * will not be rendered.
+     */
+    colorMixerSettings?: {
+        popoverAddButtonLabel: string;
+        popoverCloseButtonLabel: string;
+        colorMixer?: {
+            withAlpha: boolean;
+            rgbRedInputScreenReaderLabel: string;
+            rgbGreenInputScreenReaderLabel: string;
+            rgbBlueInputScreenReaderLabel: string;
+            rgbAlphaInputScreenReaderLabel: string;
+            colorSliderNavigationExplanationScreenReaderLabel: string;
+            alphaSliderNavigationExplanationScreenReaderLabel: string;
+            colorPaletteNavigationExplanationScreenReaderLabel: string;
+        };
+        colorPreset?: {
+            colors: Array<string>;
+            label: string;
+        };
+        colorContrast?: {
+            firstColor: string;
+            label: string;
+            successLabel: string;
+            failureLabel: string;
+            normalTextLabel: string;
+            largeTextLabel: string;
+            graphicsTextLabel: string;
+            firstColorLabel: string;
+            secondColorLabel: string;
+        };
+    };
+    /**
+     * If a child function is provided, the component will render it to the popover.
+     */
+    children?: (value: string, onChange: (hex: string) => void, handleAdd: () => void, handleClose: () => void) => Node;
+    /**
+     * Sets the input to disabled state
+     */
+    disabled?: boolean;
+    /**
+     * provides a reference to the underlying html root element
+     */
+    elementRef: (element: Element | null) => void;
+    /**
+     * If true, it will display a red error ring or a message after a blur event and remove it after a change event
+     */
+    isRequired?: boolean;
+    /**
+     * The label of the component
+     */
+    label: string;
+    /**
+     * If 'value' is set, this must be set. It'll be called on every change
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder for the inputfield
+     */
+    placeholderText: string;
+    /**
+     * If set, it will set the popover's max height. Useful when the popover is too big
+     */
+    popoverMaxHeight?: string;
+    /**
+     * Sets the ScreenReaderLabel for the popover
+     */
+    popoverScreenReaderLabel?: string;
+    /**
+     * Sets the ScreenReaderLabel for the popover Button
+     */
+    popoverButtonScreenReaderLabel?: string;
+    /**
+     * If set and the hex is invalid, it will display the message after a blur event and remove it after a change event
+     *
+     * MessageType: Array<{
+     *   type: 'success' | 'hint' | 'error' | 'screenreader-only'
+     *   text: string
+     * }>
+     */
+    renderInvalidColorMessage?: (hexCode: string) => MessageType;
+    /**
+     * If set, isRequired is true and the input is empty, it will display the message after a blur event and remove it after a change event
+     *
+     * MessageType: Array<{
+     *   type: 'success' | 'hint' | 'error' | 'screenreader-only'
+     *   text: string
+     * }>
+     */
+    renderIsRequiredMessage?: () => MessageType;
+    /**
+     * If set, it will display the message it returns
+     *
+     * MessageType: Array<{
+     *   type: 'success' | 'hint' | 'error' | 'screenreader-only'
+     *   text: string
+     * }>
+     */
+    renderMessages?: (hexCode: string, isValidHex: boolean, minContrast: number, contrast?: number) => MessageType;
+    /**
+     * If set, an info icon with a tooltip will be displayed
+     */
+    tooltip?: React.ReactNode;
+    /**
+     * If set, the component will behave as controlled
+     */
+    value?: string;
+    /**
+     * The width of the input.
+     */
+    width?: string;
+    /**
+     * If true, alpha slider will be rendered. Deafults to false
+     */
+    withAlpha?: boolean;
+};
+declare type ColorPickerState = {
+    hexCode: string;
+    showHelperErrorMessages: boolean;
+    openColorPicker: boolean;
+    mixedColor: string;
+};
+declare type PropKeys = keyof ColorPickerOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type ColorPickerProps = ColorPickerOwnProps & WithStyleProps<ColorPickerTheme, ColorPickerStyle> & OtherHTMLAttributes<ColorPickerOwnProps>;
+declare type ColorPickerStyle = ComponentStyle<'colorPicker' | 'simpleColorContainer' | 'hashMarkContainer' | 'errorIcons' | 'successIcon' | 'label' | 'popoverContent' | 'popoverContentBlock' | 'popoverFooter' | 'colorMixerButtonContainer' | 'popoverContentContainer' | 'colorMixerButtonWrapper'>;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { ColorPickerProps, ColorPickerStyle, ColorPickerState, ContrastStrength, MessageType };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map

package/types/ColorPicker/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/props.ts"],"names":[],"mappings":"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"}

package/types/ColorPicker/styles.d.ts

@@ -0,0 +1,17 @@
+import type { ColorPickerTheme } from '@instructure/shared-types';
+import type { ColorPickerProps, ColorPickerState, ColorPickerStyle } from './props';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+declare const generateStyle: (componentTheme: ColorPickerTheme, props: ColorPickerProps, state: ColorPickerState & {
+    isSimple: boolean;
+}) => ColorPickerStyle;
+export default generateStyle;
+//# sourceMappingURL=styles.d.ts.map

package/types/ColorPicker/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAEjE,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,SAAS,CAAA;AAEhB;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,gBAAgB,SACzB,gBAAgB,SAChB,gBAAgB,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,KAC9C,gBAkFF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/ColorPicker/theme.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from '@instructure/ui-themes';
+import type { ColorPickerTheme } from '@instructure/shared-types';
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+declare const generateComponentTheme: (theme: Theme) => ColorPickerTheme;
+export default generateComponentTheme;
+//# sourceMappingURL=theme.d.ts.map

package/types/ColorPicker/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/theme.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAGjE;;;;GAIG;AACH,QAAA,MAAM,sBAAsB,UAAW,KAAK,KAAG,gBA4C9C,CAAA;AAED,eAAe,sBAAsB,CAAA"}