@indico-data/design-system 1.0.55 → 1.0.56

package/lib/components/Navigation/Drawer/constants.d.ts

@@ -0,0 +1,3 @@
+import { ListItem } from './types';
+export declare const navigationItems: ListItem[];
+export declare const footerItems: ListItem[];

package/lib/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PermafrostComponent } from '@/types';
+type Props = PermafrostComponent & {
+    questionMark?: boolean;
+    for?: string | null;
+    place?: string;
+    clickToShow?: boolean;
+    delayShow?: number;
+    delayHide?: number;
+    questionMarkClassName?: string;
+    children: React.ReactNode;
+    block?: boolean;
+};
+export declare const Tooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Single: Story;
+export declare const NoQuestionMark: Story;
+export declare const Bottom: Story;
+export declare const Right: Story;

package/lib/components/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTooltip: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/lib/components/containment/Tooltip/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PermafrostComponent } from '@/types';
+type Props = PermafrostComponent & {
+    questionMark?: boolean;
+    for?: string | null;
+    place?: string;
+    clickToShow?: boolean;
+    delayShow?: number;
+    delayHide?: number;
+    questionMarkClassName?: string;
+    children: React.ReactNode;
+    block?: boolean;
+};
+export declare const Tooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/containment/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Single: Story;

package/lib/components/containment/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTooltip: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/components/containment/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/lib/index.d.ts

@@ -301,12 +301,12 @@ declare const margin: {
 declare function decimalAdjust(type: any, value: any, exp: any): any;
 declare function round10(value: any, exp: any): any;
 declare function clamp(value: any, min: any, max: any): any;
-declare function numberWithCommas(x: any): any;
+declare function numberWithCommas$1(x: any): any;
 declare namespace MATH {
     export { decimalAdjust };
     export { round10 };
     export { clamp };
-    export { numberWithCommas };
+    export { numberWithCommas$1 as numberWithCommas };
 }
 
 declare const allColors: {
@@ -1125,4 +1125,90 @@ type Props = {
 } & PermafrostComponent;
 declare const Toggle: (props: Props) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
+declare const mix: (color_1: string, color_2: string, weight: number) => string;
+declare const shade: (color: string, percentage: number) => string;
+declare const tint: (color: string, percentage: number) => string;
+/**
+ * Converts hex color values to rgb or rgba values if a opacity is supplied
+ * @param hex
+ * @returns {*}
+ */
+declare const hexToRgb: (hex: string, opacity?: number) => string | undefined;
+/**
+ * Takes a 3- or 6-character hex color value, and returns an object containing
+ * its equivalent HSL values.
+ *
+ * @see {@link https://css-tricks.com/converting-color-spaces-in-javascript/}
+ * @see {@link https://gist.github.com/mjackson/5311256}
+ */
+declare function hexToHsl(hexColor: string): {
+    hue: number;
+    saturation: number;
+    lightness: number;
+};
+
+declare const color_d_hexToHsl: typeof hexToHsl;
+declare const color_d_hexToRgb: typeof hexToRgb;
+declare const color_d_mix: typeof mix;
+declare const color_d_shade: typeof shade;
+declare const color_d_tint: typeof tint;
+declare namespace color_d {
+  export { color_d_hexToHsl as hexToHsl, color_d_hexToRgb as hexToRgb, color_d_mix as mix, color_d_shade as shade, color_d_tint as tint };
+}
+
+declare const camelCaseToUpperUnderscore: (string: string) => string;
+declare const camelCaseToSpaceUpper: (string: string) => string;
+declare const underscoreToCapitalize: (string: string) => string;
+declare const snakeCaseToCamelCase: (string: string) => string;
+declare function capitalize(string: string): string;
+declare function capitalizeFirstOnly(string: string): string;
+/**
+ * Generates a random string of English alphabet characters. Defaults to a length of 8.
+ */
+declare function createRandomString(length?: number): string;
+declare const maxLengthWithEllipse: (string: string, maxLength: number) => string;
+declare const maxLengthWithMiddleEllipsis: (string: string, maxLength: number) => string;
+
+declare const string_d_camelCaseToSpaceUpper: typeof camelCaseToSpaceUpper;
+declare const string_d_camelCaseToUpperUnderscore: typeof camelCaseToUpperUnderscore;
+declare const string_d_capitalize: typeof capitalize;
+declare const string_d_capitalizeFirstOnly: typeof capitalizeFirstOnly;
+declare const string_d_createRandomString: typeof createRandomString;
+declare const string_d_maxLengthWithEllipse: typeof maxLengthWithEllipse;
+declare const string_d_maxLengthWithMiddleEllipsis: typeof maxLengthWithMiddleEllipsis;
+declare const string_d_snakeCaseToCamelCase: typeof snakeCaseToCamelCase;
+declare const string_d_underscoreToCapitalize: typeof underscoreToCapitalize;
+declare namespace string_d {
+  export { string_d_camelCaseToSpaceUpper as camelCaseToSpaceUpper, string_d_camelCaseToUpperUnderscore as camelCaseToUpperUnderscore, string_d_capitalize as capitalize, string_d_capitalizeFirstOnly as capitalizeFirstOnly, string_d_createRandomString as createRandomString, string_d_maxLengthWithEllipse as maxLengthWithEllipse, string_d_maxLengthWithMiddleEllipsis as maxLengthWithMiddleEllipsis, string_d_snakeCaseToCamelCase as snakeCaseToCamelCase, string_d_underscoreToCapitalize as underscoreToCapitalize };
+}
+
+/**
+ * Takes a number and formats it nicely.
+ *
+ * @example numberWithCommas(12345)
+ * // returns 12,345
+ */
+declare function numberWithCommas(value: number): string;
+/**
+ * Takes a number and returns it, rounded up to the maximum decimal places specified.
+ *
+ * @example maxDecimalPlaces(0.1694915254237288, 2)
+ * // returns 0.17
+ *
+ * @example maxDecimalPlaces(0.1694915254237288, 3)
+ * // returns 0.169
+ *
+ * @example maxDecimalPlaces(12.902, 2)
+ * // returns 12.9
+ */
+declare function maxDecimalPlaces(value: number, decimalPlaces: number): number;
+declare function formatConfidence(confidence: number): number;
+
+declare const number_d_formatConfidence: typeof formatConfidence;
+declare const number_d_maxDecimalPlaces: typeof maxDecimalPlaces;
+declare const number_d_numberWithCommas: typeof numberWithCommas;
+declare namespace number_d {
+  export { number_d_formatConfidence as formatConfidence, number_d_maxDecimalPlaces as maxDecimalPlaces, number_d_numberWithCommas as numberWithCommas };
+}
+
+export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Wizard, WizardCard, WizardSection, WizardWithSidebar, color_d as colorUtils, faIcons, indicons, number_d as numberUtils, string_d as stringUtils };

package/lib/index.esm.js

@@ -2317,6 +2317,42 @@ const SingleCombobox = React__default.forwardRef((props, ref) => {
     return jsx(ComboboxComponent, {});
 });
 
+const mix = function (color_1, color_2, weight) {
+    function d2h(d) {
+        return d.toString(16);
+    } // convert a decimal value to hex
+    function h2d(h) {
+        return parseInt(h, 16);
+    } // convert a hex value to decimal
+    function s2l(hex) {
+        return `${hex}${hex}`;
+    }
+    weight = typeof weight !== 'undefined' ? weight : 50; // set the weight to 50%, if that argument is omitted
+    color_1 = color_1.replace(/#/g, '');
+    color_2 = color_2.replace(/#/g, '');
+    // check if colors are shorthand or longhand - covert to longhand
+    color_1 = color_1.length === 3 ? s2l(color_1) : color_1;
+    color_2 = color_2.length === 3 ? s2l(color_2) : color_2;
+    let color = '#';
+    for (let i = 0; i <= 5; i += 2) {
+        // loop through each of the 3 hex pairs—red, green, and blue
+        const v1 = h2d(color_1.substr(i, 2)); // extract the current pairs
+        const v2 = h2d(color_2.substr(i, 2));
+        // combine the current pairs from each source color, according to the specified weight
+        let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
+        while (val.length < 2) {
+            val = '0' + val;
+        } // prepend a '0' if val results in a single digit
+        color += val; // concatenate val to our new color string
+    }
+    return color; // PROFIT!
+};
+const shade = (color, percentage) => {
+    return mix('#000000', color, percentage);
+};
+const tint = (color, percentage) => {
+    return mix('#ffffff', color, percentage);
+};
 /**
  * Converts hex color values to rgb or rgba values if a opacity is supplied
  * @param hex
@@ -2337,7 +2373,120 @@ const hexToRgb = (hex, opacity) => {
     }
     return undefined;
 };
+/**
+ * Takes a 3- or 6-character hex color value, and returns an object containing
+ * its equivalent HSL values.
+ *
+ * @see {@link https://css-tricks.com/converting-color-spaces-in-javascript/}
+ * @see {@link https://gist.github.com/mjackson/5311256}
+ */
+function hexToHsl(hexColor) {
+    // convert to 6-character hex string, if necessary
+    const fullHexColor = (() => {
+        if (hexColor.length === 4) {
+            return ('#' +
+                hexColor
+                    .replace('#', '')
+                    .split('')
+                    .reduce((acc, char) => (acc += char + char), ''));
+        }
+        return hexColor;
+    })();
+    const rgbValues = {
+        red: parseInt(fullHexColor.slice(1, 3), 16) / 255,
+        green: parseInt(fullHexColor.slice(3, 5), 16) / 255,
+        blue: parseInt(fullHexColor.slice(-2), 16) / 255,
+    };
+    const allValues = Object.values(rgbValues);
+    const channelMax = Math.max(...allValues);
+    const channelMin = Math.min(...allValues);
+    const channelDelta = channelMax - channelMin;
+    const hslValues = {
+        hue: 0,
+        saturation: 0,
+        lightness: (channelMax + channelMin) / 2,
+    };
+    if (channelDelta !== 0) {
+        // calculate hue
+        if (channelMax === rgbValues.red) {
+            hslValues.hue = ((rgbValues.green - rgbValues.blue) / channelDelta) % 6;
+        }
+        else if (channelMax === rgbValues.green) {
+            hslValues.hue = (rgbValues.blue - rgbValues.red) / channelDelta + 2;
+        }
+        else {
+            hslValues.hue = (rgbValues.red - rgbValues.green) / channelDelta + 4;
+        }
+        // calculate saturation
+        hslValues.saturation = channelDelta / (1 - Math.abs(2 * hslValues.lightness - 1));
+    }
+    hslValues.hue = Math.round(hslValues.hue * 60);
+    hslValues.saturation = +(hslValues.saturation * 100).toFixed(0);
+    hslValues.lightness = +(hslValues.lightness * 100).toFixed(0);
+    // make negative hues positive
+    if (hslValues.hue < 0) {
+        hslValues.hue += 360;
+    }
+    return hslValues;
+}
 
+var color = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    hexToHsl: hexToHsl,
+    hexToRgb: hexToRgb,
+    mix: mix,
+    shade: shade,
+    tint: tint
+});
+
+const camelCaseToUpperUnderscore = (string) => {
+    return string
+        .replace(/([A-Z])/g, function ($1) {
+        return '_' + $1;
+    })
+        .toUpperCase();
+};
+const camelCaseToSpaceUpper = (string) => {
+    return (string
+        // insert a space before all caps
+        .replace(/([A-Z])/g, ' $1')
+        // uppercase the first character
+        .replace(/^./, function (str) {
+        return str.toUpperCase();
+    }));
+};
+const underscoreToCapitalize = (string) => {
+    return (string
+        // replace all _ with spaces
+        .replace(/_/g, ' ')
+        // uppercase the first character
+        .replace(/^./, function (str) {
+        return str.toUpperCase();
+    }));
+};
+const snakeCaseToCamelCase = (string) => {
+    const parts = string.split('_').map((part, i) => {
+        if (i > 0) {
+            return part.replace(/^./, function (str) {
+                return str.toUpperCase();
+            });
+        }
+        else {
+            return part;
+        }
+    });
+    return parts.join().replace(/,/g, '');
+};
+function capitalize(string) {
+    if (typeof string !== 'string')
+        return '';
+    return string.slice(0, 1).toUpperCase() + string.slice(1).toLowerCase();
+}
+function capitalizeFirstOnly(string) {
+    if (typeof string !== 'string')
+        return '';
+    return string.slice(0, 1).toUpperCase() + string.slice(1);
+}
 /**
  * Generates a random string of English alphabet characters. Defaults to a length of 8.
  */
@@ -2349,6 +2498,33 @@ function createRandomString(length) {
     }
     return result;
 }
+const maxLengthWithEllipse = (string, maxLength) => {
+    if (string.length <= maxLength) {
+        return string;
+    }
+    else {
+        return string.slice(0, maxLength - 2).concat('...');
+    }
+};
+const maxLengthWithMiddleEllipsis = (string, maxLength) => {
+    const frontSegment = string.slice(0, Math.floor(maxLength / 2) - 2);
+    const endSegmentLength = string.length - (Math.floor(maxLength / 2) - 1);
+    const endSegment = string.slice(endSegmentLength, string.length);
+    return string.length <= maxLength ? string : `${frontSegment}...${endSegment}`;
+};
+
+var string = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    camelCaseToSpaceUpper: camelCaseToSpaceUpper,
+    camelCaseToUpperUnderscore: camelCaseToUpperUnderscore,
+    capitalize: capitalize,
+    capitalizeFirstOnly: capitalizeFirstOnly,
+    createRandomString: createRandomString,
+    maxLengthWithEllipse: maxLengthWithEllipse,
+    maxLengthWithMiddleEllipsis: maxLengthWithMiddleEllipsis,
+    snakeCaseToCamelCase: snakeCaseToCamelCase,
+    underscoreToCapitalize: underscoreToCapitalize
+});
 
 /**
  * Takes a number and formats it nicely.
@@ -2359,6 +2535,31 @@ function createRandomString(length) {
 function numberWithCommas(value) {
     return new Intl.NumberFormat(navigator.language || 'en-US').format(value);
 }
+/**
+ * Takes a number and returns it, rounded up to the maximum decimal places specified.
+ *
+ * @example maxDecimalPlaces(0.1694915254237288, 2)
+ * // returns 0.17
+ *
+ * @example maxDecimalPlaces(0.1694915254237288, 3)
+ * // returns 0.169
+ *
+ * @example maxDecimalPlaces(12.902, 2)
+ * // returns 12.9
+ */
+function maxDecimalPlaces(value, decimalPlaces) {
+    return +value.toFixed(decimalPlaces);
+}
+function formatConfidence(confidence) {
+    return Math.min(Math.floor(confidence * 100), 99);
+}
+
+var number = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    formatConfidence: formatConfidence,
+    maxDecimalPlaces: maxDecimalPlaces,
+    numberWithCommas: numberWithCommas
+});
 
 const cardTableLoading = keyframes `
   25% {
@@ -25880,5 +26081,5 @@ const Toggle = (props) => {
         }), "data-cy": props['data-cy'], id: id, children: [jsx("input", { "aria-label": props['aria-label'], type: "checkbox", disabled: disabled, checked: value, onChange: onChange }), jsx("span", { className: "slider round" }), checkedIconName && (jsx(Icon, { name: checkedIconName, size: [iconSize || 5], className: "checked-icon" })), notCheckedIconName && (jsx(Icon, { name: notCheckedIconName, size: [iconSize || 5], className: "not-checked-icon" }))] }));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$1 as Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$1 as Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Wizard, WizardCard, WizardSection, WizardWithSidebar, color as colorUtils, faIcons, indicons, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map