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

package/types/ColorPreset/ColorPresetLocator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPresetLocator.d.ts","sourceRoot":"","sources":["../../src/ColorPreset/ColorPresetLocator.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sIAAgC,CAAA"}

package/types/ColorPreset/index.d.ts

@@ -0,0 +1,100 @@
+/** @jsx jsx */
+import { Component, SyntheticEvent } from 'react';
+import { jsx } from '@instructure/emotion';
+import type { DrilldownOnSelectArgs } from '@instructure/ui-drilldown';
+import type { ColorPresetProps, ColorPresetState } from './props';
+/**
+---
+category: components
+---
+@tsProps
+**/
+declare class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        colors: string[];
+        disabled?: boolean | undefined;
+        elementRef?: ((element: Element | null) => void) | undefined;
+        label?: string | undefined;
+        colorMixerSettings?: {
+            addNewPresetButtonScreenReaderLabel: string;
+            maxHeight: string;
+            onPresetChange: (colors: string[]) => void;
+            colorMixer: {
+                withAlpha: boolean;
+                rgbRedInputScreenReaderLabel: string;
+                rgbGreenInputScreenReaderLabel: string;
+                rgbBlueInputScreenReaderLabel: string;
+                rgbAlphaInputScreenReaderLabel: string;
+                colorSliderNavigationExplanationScreenReaderLabel: string;
+                alphaSliderNavigationExplanationScreenReaderLabel: string;
+                colorPaletteNavigationExplanationScreenReaderLabel: string;
+            };
+            colorContrast?: {
+                firstColor: string;
+                label: string;
+                successLabel: string;
+                failureLabel: string;
+                normalTextLabel: string;
+                largeTextLabel: string;
+                graphicsTextLabel: string;
+                firstColorLabel: string;
+                secondColorLabel: string;
+            } | undefined;
+        } | undefined;
+        onSelect: (selected: string) => void;
+        popoverScreenReaderLabel?: string | undefined;
+        selected: string | null;
+    }>;
+    static allowedProps: readonly (keyof {
+        colors: string[];
+        disabled?: boolean | undefined;
+        elementRef?: ((element: Element | null) => void) | undefined;
+        label?: string | undefined;
+        colorMixerSettings?: {
+            addNewPresetButtonScreenReaderLabel: string;
+            maxHeight: string;
+            onPresetChange: (colors: string[]) => void;
+            colorMixer: {
+                withAlpha: boolean;
+                rgbRedInputScreenReaderLabel: string;
+                rgbGreenInputScreenReaderLabel: string;
+                rgbBlueInputScreenReaderLabel: string;
+                rgbAlphaInputScreenReaderLabel: string;
+                colorSliderNavigationExplanationScreenReaderLabel: string;
+                alphaSliderNavigationExplanationScreenReaderLabel: string;
+                colorPaletteNavigationExplanationScreenReaderLabel: string;
+            };
+            colorContrast?: {
+                firstColor: string;
+                label: string;
+                successLabel: string;
+                failureLabel: string;
+                normalTextLabel: string;
+                largeTextLabel: string;
+                graphicsTextLabel: string;
+                firstColorLabel: string;
+                secondColorLabel: string;
+            } | undefined;
+        } | undefined;
+        onSelect: (selected: string) => void;
+        popoverScreenReaderLabel?: string | undefined;
+        selected: string | null;
+    })[];
+    static readonly componentId = "ColorPreset";
+    static defaultProps: {
+        disabled: boolean;
+    };
+    constructor(props: ColorPresetProps);
+    ref: HTMLDivElement | null;
+    handleRef: (el: HTMLDivElement | null) => void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    onMenuItemSelected: (color: string) => (_e: SyntheticEvent<Element, Event>, args: DrilldownOnSelectArgs) => void;
+    renderAddNewPresetButton: () => jsx.JSX.Element;
+    renderColorIndicator: (color: string, selectOnClick?: boolean) => jsx.JSX.Element;
+    renderSettingsMenu: (color: string, index: number) => jsx.JSX.Element;
+    render(): jsx.JSX.Element;
+}
+export { ColorPreset };
+export default ColorPreset;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ColorPreset/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAWrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAUtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAGjE;;;;;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;;MAElB;gBAEW,KAAK,EAAE,gBAAgB;IASnC,GAAG,EAAE,cAAc,GAAG,IAAI,CAAO;IAEjC,SAAS,OAAQ,cAAc,GAAG,IAAI,UAQrC;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,kBAAkB,UACR,MAAM,UACT,eAAe,OAAO,EAAE,KAAK,CAAC,QAAQ,qBAAqB,UAS/D;IAEH,wBAAwB,wBA0HvB;IACD,oBAAoB,UAAW,MAAM,kBAAkB,OAAO,qBAiC7D;IACD,kBAAkB,UAAW,MAAM,SAAS,MAAM,qBAkBjD;IAED,MAAM;CAqCP;AAED,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,eAAe,WAAW,CAAA"}

package/types/ColorPreset/props.d.ts

@@ -0,0 +1,87 @@
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { OtherHTMLAttributes, PropValidators, ColorPresetTheme } from '@instructure/shared-types';
+import type { RGBAType } from '../ColorMixer/props';
+declare type ContrastStrength = 'min' | 'mid' | 'max';
+declare type MessageType = Array<{
+    type: 'success' | 'hint' | 'error' | 'screenreader-only';
+    text: string;
+}>;
+declare type ColorPresetOwnProps = {
+    /**
+     * Array of HEX strings which are the preset colors. Supports 8 character HEX (with alpha)
+     */
+    colors: Array<string>;
+    /**
+     * Makes the component uninteractable
+     */
+    disabled?: boolean;
+    /**
+     * Provides a reference to the component's underlying html element.
+     */
+    elementRef?: (element: Element | null) => void;
+    /**
+     * Label text of the component
+     */
+    label?: string;
+    /**
+     * If set, a `plus` button will appear for the preset. Those components whose corresponding keys aren't provided (`colorMixer` or `colorContrast`)
+     * will not be rendered.
+     * The `onPresetChange` function gets called when a color gets added or removed from the preset list.
+     * It will be called with the new list of colors
+     */
+    colorMixerSettings?: {
+        /**
+         * screenReaderLabel for the add new preset button
+         */
+        addNewPresetButtonScreenReaderLabel: string;
+        maxHeight: string;
+        onPresetChange: (colors: ColorPresetOwnProps['colors']) => void;
+        colorMixer: {
+            withAlpha: boolean;
+            rgbRedInputScreenReaderLabel: string;
+            rgbGreenInputScreenReaderLabel: string;
+            rgbBlueInputScreenReaderLabel: string;
+            rgbAlphaInputScreenReaderLabel: string;
+            colorSliderNavigationExplanationScreenReaderLabel: string;
+            alphaSliderNavigationExplanationScreenReaderLabel: string;
+            colorPaletteNavigationExplanationScreenReaderLabel: string;
+        };
+        colorContrast?: {
+            firstColor: string;
+            label: string;
+            successLabel: string;
+            failureLabel: string;
+            normalTextLabel: string;
+            largeTextLabel: string;
+            graphicsTextLabel: string;
+            firstColorLabel: string;
+            secondColorLabel: string;
+        };
+    };
+    /**
+     * The function gets called when a color gets selected
+     */
+    onSelect: (selected: string) => void;
+    /**
+     * Sets the ScreenReaderLabel for the popover
+     */
+    popoverScreenReaderLabel?: string;
+    /**
+     * The currently selected HEX string
+     */
+    selected: string | null;
+};
+declare type ColorPresetState = {
+    openEditor: boolean | string;
+    openAddNew: boolean;
+    newColor: RGBAType;
+};
+declare type PropKeys = keyof ColorPresetOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type ColorPresetProps = ColorPresetOwnProps & WithStyleProps<ColorPresetTheme, ColorPresetStyle> & OtherHTMLAttributes<ColorPresetOwnProps>;
+declare type ColorPresetStyle = ComponentStyle<'colorPreset' | 'addNewPresetButton' | 'selectedIndicator' | 'popoverContent' | 'popoverDivider' | 'popoverFooter' | 'label' | 'popoverContrastBlock'>;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { ColorPresetProps, ColorPresetStyle, ColorPresetState, ContrastStrength, MessageType };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map

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

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

package/types/ColorPreset/styles.d.ts

@@ -0,0 +1,77 @@
+import type { ColorPresetTheme } from '@instructure/shared-types';
+import type { ColorPresetProps } 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: ColorPresetTheme, props: ColorPresetProps) => {
+    colorPreset: {
+        label: string;
+        display: string;
+        flexWrap: string;
+        width: string;
+    };
+    addNewPresetButton: {
+        label: string;
+        width: string;
+        height: string;
+        margin: string | 0;
+    };
+    selectedIndicator: {
+        label: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderColor: string;
+        borderWidth: string | 0;
+        borderRadius: string;
+        boxSizing: string;
+        position: string;
+        insetInlineStart: string;
+        bottom: string;
+        backgroundColor: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    popoverContent: {
+        label: string;
+        padding: string | 0;
+        maxHeight: string;
+        overflow: string;
+    };
+    popoverDivider: {
+        label: string;
+        borderTop: string;
+        borderWidth: string | 0;
+        borderColor: string;
+        margin: string;
+    };
+    popoverContrastBlock: {
+        label: string;
+        borderTop: string;
+        borderWidth: string | 0;
+        borderColor: string;
+        margin: string;
+    };
+    popoverFooter: {
+        label: string;
+        backgroundColor: string;
+        display: string;
+        flexDirection: string;
+        padding: string | 0;
+    };
+    label: {
+        label: string;
+        width: string;
+        margin: string | 0;
+    };
+};
+export default generateStyle;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ColorPreset/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,gBAAgB,SACzB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkExB,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/ColorPreset/theme.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from '@instructure/ui-themes';
+import { ColorPresetTheme } 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) => ColorPresetTheme;
+export default generateComponentTheme;
+//# sourceMappingURL=theme.d.ts.map

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

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

package/types/index.d.ts

@@ -0,0 +1,11 @@
+export { ColorPicker } from './ColorPicker';
+export { ColorMixer } from './ColorMixer';
+export { ColorPreset } from './ColorPreset';
+export { ColorContrast } from './ColorContrast';
+export { ColorIndicator } from './ColorIndicator';
+export type { ColorPickerProps } from './ColorPicker/props';
+export type { ColorMixerProps } from './ColorMixer/props';
+export type { ColorPresetProps } from './ColorPreset/props';
+export type { ColorContrastProps } from './ColorContrast/props';
+export type { ColorIndicatorProps } from './ColorIndicator/props';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACzD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA"}