@workday/canvas-kit-styling 10.0.0-alpha.538-next.0

package/dist/commonjs/lib/uniqueId.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetUniqueIdCount = exports.setUniqueSeed = exports.generateUniqueId = void 0;
+// Create a unique seed per import to prevent collisions from other versions of `useUniqueId`
+let seed = Math.random()
+    .toString(36)
+    .slice(2)
+    .replace(/[0-9]*/, '')
+    .substr(0, 4);
+let c = 0;
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
+const generateUniqueId = () => seed + (c++).toString(36);
+exports.generateUniqueId = generateUniqueId;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+const setUniqueSeed = (s) => {
+    seed = s;
+};
+exports.setUniqueSeed = setUniqueSeed;
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+const resetUniqueIdCount = () => {
+    c = 0;
+};
+exports.resetUniqueIdCount = resetUniqueIdCount;

package/dist/es6/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/cs';
+export * from './lib/slugify';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}

package/dist/es6/index.js

@@ -0,0 +1,2 @@
+export * from './lib/cs';
+export * from './lib/slugify';

package/dist/es6/lib/cs.d.ts

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Keyframes, SerializedStyles, CSSObject } from '@emotion/serialize';
+/**
+ * Style properties in a JavaScript camelCase. Everything Emotion allows is also
+ * allowed here.
+ */
+export declare type StyleProps = undefined | boolean | number | string | Keyframes | SerializedStyles | CSSObject;
+export declare type CS = string | Record<string, string>;
+/**
+ * CSS variable map type. In developer/dynamic mode, we don't know what the hash is going to be. All
+ * variables will look like `--{hash}-{name}`. But the static optimizers generates the name based on
+ * the AST, so the `id` will be known. Instead of something like `--abc123-color`, the `ID` is set
+ * by the optimizer.
+ *
+ * For example:
+ * ```ts
+ * // dynamic
+ * const myVars = createVars('color') // type is `Record<'color', string>`
+ *
+ * // optimizer rewrites the code
+ * const myVars = createVars<'color', 'myVars'>('color')
+ * // type is now `{color: "--myVars-color"}`
+ *
+ * myVars.color // type is `--myVars-color`
+ * ```
+ *
+ * This is so optimized variables can be used directly by the static parser downstream. The variable
+ * names become statically analyzable.
+ */
+export declare type CsVarsMap<T extends string, ID extends string | never> = [ID] extends [never] ? Record<T, string> : {
+    [K in T]: `--${ID}-${K}`;
+};
+export declare type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, ID> & {
+    (input: Partial<Record<T, string>>): Record<T, string>;
+};
+/**
+ * Take a CSS Variable name and return a variable property
+ *
+ * ```ts
+ * const myVars = createVars('color')
+ *
+ * const myStyles = createStyles({
+ *   color: cssVar(myVars.color) // color: 'var(--{hash}-color)'
+ * })
+ * ```
+ *
+ * It can also support an optional fallback. Fallbacks should only be used if it is reasonable to
+ * expect a CSS variable isn't defined.
+ * ```ts
+ * const myStyles = createStyles({
+ *   color: cssVar(myVars.color, 'red') // color: 'var(--{hash}-color, red)'
+ * })
+ * ```
+ *
+ * If the project is set up for parsing with fallback files, a fallback will automatically be filled
+ * during the parsing phase. This is helpful for cases when CSS variables are expected, but not set
+ * in the environment.
+ */
+export declare function cssVar(input: string, fallback?: string): string;
+/**
+ * Create temporary CSS variables to use in components. The CSS variable names will
+ * be unique at runtime to avoid collisions. The return value is a function and a
+ * Map. The function can be used to pass in values from JavaScript. The function will
+ * return a map of variable keys to CSS Variable names.
+ *
+ * ```ts
+ * // creates a `color` and `background` CSS variable
+ * const myVars = createVars('color', 'background')
+ *
+ * // 'color' is a typed property. The type is `string`
+ * console.log(myVars.color) // `'var(--{hash}-color)'`
+ *
+ * // 'color' is a typed property. The type is `string?`
+ * // The returned object can be assigned to the `style` property of an element
+ * console.log(myVars({ color: 'red' })) //  `{'--{hash}-color': 'red'}`
+ *
+ * const div = document.createElement('div')
+ * div.style = myVars({ color: 'red' }) // <div style="--{hash}-color: red;" />
+ * ```
+ */
+export declare function createVars<T extends string, ID extends string>(input: {
+    id: ID;
+    args: T[];
+}): CsVars<T, ID>;
+export declare function createVars<T extends string>(...args: T[]): CsVars<T, never>;
+declare type ModifierConfig = Record<string, Record<string, CS>>;
+declare type ModifierValues<T extends ModifierConfig> = {
+    [P in keyof T]: keyof T[P];
+};
+declare type ModifierReturn<T extends ModifierConfig> = T & ((modifiers: Partial<ModifierValues<T>>) => string);
+/**
+ * Creates a modifier function that takes in a modifier config and will return a CSS class name that
+ * matches the result. Modifiers can be thought as `if` or `switch` statements when conditionally
+ * changing the styles of a component based on props. This function can be thought of as a helper
+ * function that makes it easier to work with modifiers. Without it, you would have to implement
+ * if/switch/ternary for each option.
+ *
+ * ```tsx
+ * const myModifiers = createModifiers({
+ *   // a modifier called 'size'
+ *   size: {
+ *     small: createStyles({ fontSize: 12 }),
+ *     medium: createStyles({ fontSize: 14 })
+ *   }
+ * })
+ *
+ * // with the modifier function
+ * myModifiers({ size: 'medium' }) // returns the medium class name
+ *
+ * // manually without the function
+ * size === 'small' ? myModifiers.size.small : size === 'medium' ? myModifiers.size.medium : ''
+ * ```
+ */
+export declare function createModifiers<T extends ModifierConfig>(input: T): ModifierReturn<T>;
+/**
+ * All acceptable values of the `cs` prop. It can be a CSS class name, any CSS properties, an object
+ * with a `className` and `styles`, or an array of these
+ */
+export declare type CSToPropsInput = undefined | CS | CsToPropsReturn | React.CSSProperties | CSToPropsInput[];
+export declare type CsToPropsReturn = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * A function that takes in a single input, or an array. The type of the input is either:
+ *
+ * - `string` - it represents a CSS class name
+ * - `undefined` - there is no value. This is provided for convenience for developers to not have to
+ *   filter out undefined
+ * - `{--{hash}-{varName}: {value}}` - a `Map` of CSS variable to values
+ * - `{style: ..., className: ...}` an object already returned by another `csToProps` function call
+ *   (for nesting)
+ * - An array containing any of the above. This will recurse over each entry to produce a single,
+ *   reduced `{style: ..., className: ...}` object
+ * @param input
+ * @returns
+ */
+export declare function csToProps(input: CSToPropsInput): CsToPropsReturn;
+export interface CSProps {
+    /** The `cs` prop takes in a single value or an array of values. You can pass the CSS class name
+     * returned by {@link createStyles}, or the result of {@link createVars} and
+     * {@link createModifiers}. If you're extending a component already using `cs`, you can merge that
+     * prop in as well.
+     *
+     * ```tsx
+     * cs={[
+     *   cs, // from the prop list
+     *   myStyles,
+     *   myModifiers({ size: 'medium' }),
+     *   myVars({ backgroundColor: 'red' })
+     * ]}
+     * ```
+     */
+    cs?: CSToPropsInput;
+}
+/**
+ * Creates CSS styles based on object-style input. It has a side-effect of adding CSS to the page
+ * and will return a space-delimitated string of CSS class names meant to be added to an element.
+ *
+ * It can take a number of inputs of various types. The simplest is object-styles.
+ *
+ * ```ts
+ * const myStyles = createStyles({
+ *   backgroundColor: 'red'
+ * })
+ * ```
+ *
+ * The `createStyles` function is curried into 2 parts. The first function could be done at build
+ * time. The returned function combines CSS class names and will remain as a small runtime.
+ *
+ * > **Note:** The order of calling `createStyles` is important. Each call will make a single CSS
+ * > class selector and will be injected into the document's
+ * > [StyleSheetList](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList). Style
+ * > properties will be merge by the rules of [CSS
+ * > specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). If two selectors
+ * > have the same specificity, the last defined wins. Always make sure that the properties you want
+ * > to win are last in your file.
+ */
+export declare function createStyles(...args: (StyleProps | string)[]): string;
+/**
+ * React utility function to apply CSS class names and dynamic CSS variables
+ *
+ * ```tsx
+ * const MyComponent = (props: any) => {
+ *   return <div {...handleCsProp(props)} />
+ * }
+ * ```
+ *
+ * It will return an object with `className` and `style` attributes. If a `className` is provided to
+ * the component, it will merge the class names. If a `style` is provided to the component, it will
+ * merge the styles.
+ *
+ * ```tsx
+ * const vars = createVars('background')
+ * const styles = createStyles({
+ *   color: vars.color
+ * })
+ * <MyComponent
+ *   className="foobar"
+ *   style={{ padding: 10 }}
+ *   cs={styles}
+ * />
+ *
+ * // Output
+ * <div
+ *   className="foobar {hashedClassName}"
+ *   style="padding: 10px; --{hash}-background: red;"
+ * />
+ * ```
+ */
+export declare function handleCsProp<T extends CSProps & {
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+}>({ cs, style, className, ...props }: T): Omit<T, "cs">;
+export {};
+//# sourceMappingURL=cs.d.ts.map

package/dist/es6/lib/cs.d.ts.map

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

package/dist/es6/lib/cs.js

@@ -0,0 +1,246 @@
+import { generateUniqueId } from './uniqueId';
+// eslint-disable-next-line @emotion/no-vanilla
+import { css } from '@emotion/css';
+import { serializeStyles } from '@emotion/serialize';
+import { slugify } from './slugify';
+function convertProperty(value) {
+    // Handle the case where the value is a variable without the `var()` wrapping function. It happens
+    // enough that it makes sense to automatically wrap.
+    if (typeof value === 'string' && value.startsWith('--')) {
+        return `var(${value})`;
+    }
+    return value;
+}
+/**
+ * Walks through all the properties and values of a style and converts properties and/or values that
+ * need special processing. An example might be using a CSS variable without a `var()` wrapping.
+ */
+function convertAllProperties(obj) {
+    if (typeof obj === 'object') {
+        const converted = {};
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                converted[key] = convertAllProperties(obj[key]);
+            }
+        }
+        return converted;
+    }
+    return convertProperty(obj);
+}
+/**
+ * Take a CSS Variable name and return a variable property
+ *
+ * ```ts
+ * const myVars = createVars('color')
+ *
+ * const myStyles = createStyles({
+ *   color: cssVar(myVars.color) // color: 'var(--{hash}-color)'
+ * })
+ * ```
+ *
+ * It can also support an optional fallback. Fallbacks should only be used if it is reasonable to
+ * expect a CSS variable isn't defined.
+ * ```ts
+ * const myStyles = createStyles({
+ *   color: cssVar(myVars.color, 'red') // color: 'var(--{hash}-color, red)'
+ * })
+ * ```
+ *
+ * If the project is set up for parsing with fallback files, a fallback will automatically be filled
+ * during the parsing phase. This is helpful for cases when CSS variables are expected, but not set
+ * in the environment.
+ */
+export function cssVar(input, fallback) {
+    return fallback
+        ? `var(${input}, ${fallback.startsWith('--') ? `var(${fallback})` : fallback})`
+        : `var(${input})`;
+}
+export function createVars(...args) {
+    const id = args[0].id || generateUniqueId(); //?
+    // eslint-disable-next-line no-param-reassign
+    args = args[0].args || args;
+    const result = (input) => {
+        const vars = {};
+        args.forEach(key => {
+            if (input[key]) {
+                // @ts-ignore TS complains about `key` not in object `{}`
+                vars[result[key]] = input[key];
+            }
+        });
+        return vars;
+    };
+    args.forEach(key => {
+        // @ts-ignore
+        result[key] = `--${id}-${slugify(key)}`;
+    }, {});
+    return result;
+}
+/**
+ * Creates a modifier function that takes in a modifier config and will return a CSS class name that
+ * matches the result. Modifiers can be thought as `if` or `switch` statements when conditionally
+ * changing the styles of a component based on props. This function can be thought of as a helper
+ * function that makes it easier to work with modifiers. Without it, you would have to implement
+ * if/switch/ternary for each option.
+ *
+ * ```tsx
+ * const myModifiers = createModifiers({
+ *   // a modifier called 'size'
+ *   size: {
+ *     small: createStyles({ fontSize: 12 }),
+ *     medium: createStyles({ fontSize: 14 })
+ *   }
+ * })
+ *
+ * // with the modifier function
+ * myModifiers({ size: 'medium' }) // returns the medium class name
+ *
+ * // manually without the function
+ * size === 'small' ? myModifiers.size.small : size === 'medium' ? myModifiers.size.medium : ''
+ * ```
+ */
+export function createModifiers(input) {
+    const modifierFn = (modifiers) => {
+        return Object.keys(modifiers)
+            .filter(key => input[key] && input[key][modifiers[key]])
+            .map(key => input[key][modifiers[key]])
+            .join(' ');
+    };
+    Object.keys(input).forEach(key => {
+        // @ts-ignore TypeScript makes it a pain to deal with index types
+        modifierFn[key] = input[key];
+    });
+    return modifierFn;
+}
+function isCsPropsReturn(input) {
+    return input.hasOwnProperty('style') || input.hasOwnProperty('className');
+}
+/**
+ * A function that takes in a single input, or an array. The type of the input is either:
+ *
+ * - `string` - it represents a CSS class name
+ * - `undefined` - there is no value. This is provided for convenience for developers to not have to
+ *   filter out undefined
+ * - `{--{hash}-{varName}: {value}}` - a `Map` of CSS variable to values
+ * - `{style: ..., className: ...}` an object already returned by another `csToProps` function call
+ *   (for nesting)
+ * - An array containing any of the above. This will recurse over each entry to produce a single,
+ *   reduced `{style: ..., className: ...}` object
+ * @param input
+ * @returns
+ */
+export function csToProps(input) {
+    // input is a string, so it must only be a class name
+    if (typeof input === 'string') {
+        return { className: input };
+    }
+    // input isn't defined, so we'll return an empty object
+    if (!input) {
+        return {};
+    }
+    // A nested `csToProps`, we'll simply return with no modification
+    if (isCsPropsReturn(input)) {
+        return input;
+    }
+    // At this point, `input` is either an array or a `Record<T, string>`. If it isn't an array, it
+    // must be a style object for setting CSS variables. So set the `style` attribute
+    if (!Array.isArray(input)) {
+        return { style: input };
+    }
+    // An array. it is the only thing left. We iterate and recurse over the array to produce a single
+    // object with `style` and `className` attributes to spread on an element
+    return input.map(csToProps).reduce((result, val) => {
+        return {
+            className: [result.className, val.className].filter(v => v).join(' '),
+            style: { ...result.style, ...val.style },
+        };
+    }, {});
+}
+/**
+ * Creates CSS styles based on object-style input. It has a side-effect of adding CSS to the page
+ * and will return a space-delimitated string of CSS class names meant to be added to an element.
+ *
+ * It can take a number of inputs of various types. The simplest is object-styles.
+ *
+ * ```ts
+ * const myStyles = createStyles({
+ *   backgroundColor: 'red'
+ * })
+ * ```
+ *
+ * The `createStyles` function is curried into 2 parts. The first function could be done at build
+ * time. The returned function combines CSS class names and will remain as a small runtime.
+ *
+ * > **Note:** The order of calling `createStyles` is important. Each call will make a single CSS
+ * > class selector and will be injected into the document's
+ * > [StyleSheetList](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList). Style
+ * > properties will be merge by the rules of [CSS
+ * > specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). If two selectors
+ * > have the same specificity, the last defined wins. Always make sure that the properties you want
+ * > to win are last in your file.
+ */
+export function createStyles(...args) {
+    return args
+        .map(input => {
+        if (typeof input === 'string') {
+            return input;
+        }
+        const convertedStyles = convertAllProperties(input);
+        // We want to call `serializeStyles` directly and ignore the hash generated so we can have
+        // more predictable style merging. If 2 different files define the same style properties, the
+        // hash will be the same and using the default hash functionality of Emotion will mean the
+        // merge order will be unpredictable. For example, `BaseButton` and `TertiaryButton` define
+        // different modifiers for padding. The BaseButton's `extraSmall` modifier contains the same
+        // styling as TertiaryButton's `large` modifier. Emotion would hash these two declarations as
+        // the same hash and only inject the one from `BaseButton`. If `TertiaryButton` defines
+        // `padding` in its base styles, and uses the large size modifier, the base padding will
+        // override the `TertiaryButton` `large` size modifier because `BaseButton.small` modifier was
+        // injected into the document's style sheets before `TertiaryButton.base` styles. This is due
+        // to CSS specificity. If everything has the same specificity, last defined wins. More info:
+        // https://codesandbox.io/s/stupefied-bartik-9c2jtd?file=/src/App.tsx
+        const { styles } = serializeStyles([convertedStyles]);
+        // use `css.call()` instead of `css()` to trick Emotion's babel plugin to not rewrite our code
+        // to remove our generated Id for the name:
+        // https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/babel-plugin/src/utils/transform-expression-with-styles.js#L81-L82
+        // Without this "fix", anyone using the Emotion babel plugin would get different results than
+        // intended when styles are merged.
+        return css.call(null, { name: generateUniqueId(), styles }); //?
+    })
+        .join(' ');
+}
+/**
+ * React utility function to apply CSS class names and dynamic CSS variables
+ *
+ * ```tsx
+ * const MyComponent = (props: any) => {
+ *   return <div {...handleCsProp(props)} />
+ * }
+ * ```
+ *
+ * It will return an object with `className` and `style` attributes. If a `className` is provided to
+ * the component, it will merge the class names. If a `style` is provided to the component, it will
+ * merge the styles.
+ *
+ * ```tsx
+ * const vars = createVars('background')
+ * const styles = createStyles({
+ *   color: vars.color
+ * })
+ * <MyComponent
+ *   className="foobar"
+ *   style={{ padding: 10 }}
+ *   cs={styles}
+ * />
+ *
+ * // Output
+ * <div
+ *   className="foobar {hashedClassName}"
+ *   style="padding: 10px; --{hash}-background: red;"
+ * />
+ * ```
+ */
+export function handleCsProp({ cs, style, className, ...props }) {
+    return {
+        ...csToProps([cs, className, style]),
+        ...props,
+    };
+}

package/dist/es6/lib/slugify.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+export declare function slugify(input: string): string;
+//# sourceMappingURL=slugify.d.ts.map

package/dist/es6/lib/slugify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slugify.d.ts","sourceRoot":"","sources":["../../../lib/slugify.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAU7C"}

package/dist/es6/lib/slugify.js

@@ -0,0 +1,14 @@
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+export function slugify(input) {
+    return input
+        .trim()
+        .replace(/[\.\s_-]+/g, '-')
+        .replace(/[^\w\s-]/g, '')
+        .replace(/([A-Z])/g, m => {
+        return '-' + m.toLowerCase();
+    })
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+}

package/dist/es6/lib/uniqueId.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
+export declare const generateUniqueId: () => string;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export declare const setUniqueSeed: (s: string) => void;
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export declare const resetUniqueIdCount: () => void;
+//# sourceMappingURL=uniqueId.d.ts.map

package/dist/es6/lib/uniqueId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uniqueId.d.ts","sourceRoot":"","sources":["../../../lib/uniqueId.ts"],"names":[],"mappings":"AASA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,cAAkC,CAAC;AAEhE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,MAAO,MAAM,SAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}

package/dist/es6/lib/uniqueId.js

@@ -0,0 +1,40 @@
+// Create a unique seed per import to prevent collisions from other versions of `useUniqueId`
+let seed = Math.random()
+    .toString(36)
+    .slice(2)
+    .replace(/[0-9]*/, '')
+    .substr(0, 4);
+let c = 0;
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
+export const generateUniqueId = () => seed + (c++).toString(36);
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export const setUniqueSeed = (s) => {
+    seed = s;
+};
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export const resetUniqueIdCount = () => {
+    c = 0;
+};

package/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/cs';
+export * from './lib/slugify';