@pega/cosmos-react-core 2.2.1 → 2.2.4

package/lib/components/Email/EmailDisplay.d.ts

@@ -0,0 +1,18 @@
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+export interface EmailDisplayProps extends BaseProps, NoChildrenProp {
+    /** Email address, no 'mailto:' scheme */
+    value?: string;
+    /** The text to be displayed. */
+    displayText?: string;
+    /**
+     * Controls styling of the field.
+     * @default "link"
+     */
+    variant?: 'link' | 'text';
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;
+}
+declare const EmailDisplay: FunctionComponent<EmailDisplayProps & ForwardProps>;
+export default EmailDisplay;
+//# sourceMappingURL=EmailDisplay.d.ts.map

package/lib/components/Email/EmailDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAoBrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Email/EmailDisplay.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Link from '../Link';
+const EmailDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
+    const displayValue = value ? (displayText || value) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0));
+    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue }, void 0)) : (_jsx(Link, { ref: ref, ...restProps, href: `mailto:${value}`, children: displayValue }, void 0));
+});
+export default EmailDisplay;
+//# sourceMappingURL=EmailDisplay.js.map

package/lib/components/Email/EmailDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailDisplay.js","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAgB3B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,KAAK,CACrB,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,YAAY,WACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE,YAC7E,YAAY,WACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nexport interface EmailDisplayProps extends BaseProps, NoChildrenProp {\n  /** Email address, no 'mailto:' scheme */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst EmailDisplay: FunctionComponent<EmailDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<EmailDisplayProps>,\n    ref: EmailDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || value\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n    return variant === 'text' || !value ? (\n      <span ref={ref} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`mailto:${value}`}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default EmailDisplay;\n"]}

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

@@ -0,0 +1,3 @@
+export { default as EmailDisplay } from './EmailDisplay';
+export { EmailDisplayProps } from './EmailDisplay';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Email/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Email/index.js

@@ -0,0 +1,2 @@
+export { default as EmailDisplay } from './EmailDisplay';
+//# sourceMappingURL=index.js.map

package/lib/components/Email/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as EmailDisplay } from './EmailDisplay';\nexport { EmailDisplayProps } from './EmailDisplay';\n"]}

package/lib/components/EmojiPicker/EmojiDisplay.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { BaseProps, NoChildrenProp } from '../../types';
+export interface EmojiDisplayProps extends BaseProps, NoChildrenProp {
+    /** Content to be displayed */
+    content: ReactNode;
+    /** Size of emoji */
+    size?: number;
+}
+declare const EmojiDisplay: FunctionComponent<EmojiDisplayProps>;
+export default EmojiDisplay;
+//# sourceMappingURL=EmojiDisplay.d.ts.map

package/lib/components/EmojiPicker/EmojiDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,8BAA8B;IAC9B,OAAO,EAAE,SAAS,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAOD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAmBtD,CAAC;AACF,eAAe,YAAY,CAAC"}

package/lib/components/EmojiPicker/EmojiDisplay.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import styled from 'styled-components';
+import emojiRegex from 'emoji-regex';
+import { getEmojiDataFromNative, Emoji } from 'emoji-mart';
+import data from 'emoji-mart/data/all.json';
+import { replaceMatchWithElement } from '../../utils';
+import { EmojiContext } from './EmojiPicker';
+const StyledEmojiDisplay = styled.span `
+  .emoji-mart-emoji {
+    line-height: 1;
+    vertical-align: middle;
+  }
+`;
+const EmojiDisplay = props => {
+    const { content, size = 20, ...restProps } = props;
+    const regex = emojiRegex();
+    let msgArr = [];
+    const { set: emojiSet } = useContext(EmojiContext);
+    if (typeof content === 'string' && emojiSet) {
+        const renderEmoji = (eMatch) => {
+            const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data);
+            return emojiData && _jsx(Emoji, { set: emojiSet, emoji: emojiData, size: size }, void 0);
+        };
+        if (content.split(regex).length > 1) {
+            msgArr = replaceMatchWithElement(content, regex, renderEmoji);
+        }
+    }
+    return emojiSet && msgArr.length >= 1 ? (_jsx(StyledEmojiDisplay, { ...restProps, children: msgArr }, void 0)) : (_jsx(_Fragment, { children: content }, void 0));
+};
+export default EmojiDisplay;
+//# sourceMappingURL=EmojiDisplay.js.map

package/lib/components/EmojiPicker/EmojiDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAsB,MAAM,YAAY,CAAC;AAC/E,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE;QAC3C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,WAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;SAC/D;KACF;IACD,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACtC,KAAC,kBAAkB,OAAK,SAAS,YAAG,MAAM,WAAsB,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,WAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext, FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji, Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n  /** Content to be displayed */\n  content: ReactNode;\n  /** Size of emoji */\n  size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n  .emoji-mart-emoji {\n    line-height: 1;\n    vertical-align: middle;\n  }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n  const { content, size = 20, ...restProps } = props;\n  const regex = emojiRegex();\n  let msgArr: JSX.Element[] = [];\n  const { set: emojiSet } = useContext(EmojiContext);\n  if (typeof content === 'string' && emojiSet) {\n    const renderEmoji = (eMatch: string) => {\n      const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n      return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n    };\n    if (content.split(regex).length > 1) {\n      msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n    }\n  }\n  return emojiSet && msgArr.length >= 1 ? (\n    <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n  ) : (\n    <>{content}</>\n  );\n};\nexport default EmojiDisplay;\n"]}

package/lib/components/EmojiPicker/EmojiPicker.d.ts

@@ -0,0 +1,35 @@
+import { FunctionComponent, Ref } from 'react';
+import { CategoryName, Data as EmojiData, BackgroundImageFn, PickerProps } from 'emoji-mart';
+import { BaseProps, NoChildrenProp } from '../../types';
+declare type EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';
+export interface EmojiPickerProps extends BaseProps, NoChildrenProp {
+    /** Individual emojis size in pixels. */
+    emojiSize?: number;
+    /** Number of emoji per line in a picker. */
+    perLine?: number;
+    /** Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). */
+    exclude?: CategoryName[];
+    /** Show footer for picker. */
+    showFooter?: boolean;
+    /** A Fn that gets called on selecting an emoji from picker. */
+    onSelect?: PickerProps['onSelect'];
+    /** Ref for the emoji Picker */
+    ref?: Ref<HTMLDivElement>;
+}
+export interface EmojiContextValue {
+    /**
+     * A Fn that returns that image sheet to use for emojis.
+     * If no sprite is provided, native emoji are used.
+     * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)
+     */
+    spriteSrcResolver?: BackgroundImageFn;
+    /** Emoji set to be used. */
+    set?: EmojiSet;
+    /** Data to be used. [link](https://github.com/iamcal/emoji-data).
+     * Use this in case you would like to filter out some emoji,  one must change the sprite image accordingly. */
+    overrideData?: EmojiData;
+}
+export declare const EmojiContext: import("react").Context<EmojiContextValue>;
+declare const EmojiPicker: FunctionComponent<EmojiPickerProps>;
+export default EmojiPicker;
+//# sourceMappingURL=EmojiPicker.d.ts.map

package/lib/components/EmojiPicker/EmojiPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGjB,GAAG,EAEJ,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,YAAY,EACZ,IAAI,IAAI,SAAS,EACjB,iBAAiB,EACjB,WAAW,EACZ,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAIxD,aAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAI5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;kHAC8G;IAC9G,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,4CAAuC,CAAC;AACjE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAsEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/EmojiPicker/EmojiPicker.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useContext, createContext, forwardRef } from 'react';
+import { NimblePicker } from 'emoji-mart';
+import { useTheme } from '../../hooks';
+import StyledEmojiPicker from './EmojiPicker.styles';
+const emojiDataCache = new Map();
+export const EmojiContext = createContext({});
+const EmojiPicker = forwardRef(({ emojiSize = 24, perLine = 9, showFooter = true, exclude, onSelect, ...restProps }, ref) => {
+    const theme = useTheme();
+    const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);
+    const [data, setData] = useState(null);
+    useEffect(() => {
+        const dataSet = set ?? 'all';
+        // Unmount NimblePicker for changes to take effect
+        setData(null);
+        if (overrideData) {
+            setTimeout(() => {
+                setData(overrideData);
+            }, 0);
+        }
+        else if (emojiDataCache.has(dataSet)) {
+            setTimeout(() => {
+                setData(emojiDataCache.get(dataSet) ?? null);
+            }, 0);
+        }
+        else {
+            import(`emoji-mart/data/${dataSet}.json`)
+                .then(({ default: json }) => {
+                emojiDataCache.set(dataSet, json);
+                setData(emojiDataCache.get(dataSet));
+            })
+                .catch(() => {
+                setData(null);
+            });
+        }
+    }, [set, overrideData]);
+    return (data && (_jsx(StyledEmojiPicker, { ref: ref, showFooter: showFooter, style: { '--emoji-size': `${emojiSize}px` }, children: _jsx(NimblePicker, { ...restProps, set: set, native: !spriteSrcResolver, backgroundImageFn: spriteSrcResolver, data: data, emojiSize: emojiSize, perLine: perLine, exclude: exclude, onSelect: onSelect, color: theme.base.palette.interactive, emoji: '', title: '', emojiTooltip: true, showSkinTones: showFooter, showPreview: false }, void 0) }, void 0)));
+});
+export default EmojiPicker;
+//# sourceMappingURL=EmojiPicker.js.map

package/lib/components/EmojiPicker/EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EAKb,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EACL,YAAY,EAKb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAIrD,MAAM,cAAc,GAAG,IAAI,GAAG,EAA+B,CAAC;AA+B9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AACjE,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB,EACxB,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,IAAI,KAAK,CAAC;QAE7B,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,YAAY,EAAE;YAChB,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtC,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM;YACL,MAAM,CAAC,mBAAmB,OAAO,OAAO,CAAC;iBACtC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC1B,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAClC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC,CAAC;YACxC,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;SACN;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,YAE5D,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,WAClB,WACgB,CACrB,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  Ref,\n  forwardRef\n} from 'react';\nimport {\n  NimblePicker,\n  CategoryName,\n  Data as EmojiData,\n  BackgroundImageFn,\n  PickerProps\n} from 'emoji-mart';\n\nimport { useTheme } from '../../hooks';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';\n\nconst emojiDataCache = new Map<EmojiSet | 'all', EmojiData>();\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n  /** Individual emojis size in pixels. */\n  emojiSize?: number;\n  /** Number of emoji per line in a picker. */\n  perLine?: number;\n  /** Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). */\n  exclude?: CategoryName[];\n  /** Show footer for picker. */\n  showFooter?: boolean;\n  /** A Fn that gets called on selecting an emoji from picker. */\n  onSelect?: PickerProps['onSelect'];\n  /** Ref for the emoji Picker */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n  /**\n   * A Fn that returns that image sheet to use for emojis.\n   * If no sprite is provided, native emoji are used.\n   * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n   */\n  spriteSrcResolver?: BackgroundImageFn;\n  /** Emoji set to be used. */\n  set?: EmojiSet;\n  /** Data to be used. [link](https://github.com/iamcal/emoji-data).\n   * Use this in case you would like to filter out some emoji,  one must change the sprite image accordingly. */\n  overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\nconst EmojiPicker: FunctionComponent<EmojiPickerProps> = forwardRef(\n  (\n    {\n      emojiSize = 24,\n      perLine = 9,\n      showFooter = true,\n      exclude,\n      onSelect,\n      ...restProps\n    }: PropsWithoutRef<EmojiPickerProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const theme = useTheme();\n    const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n    const [data, setData] = useState<EmojiData | null>(null);\n\n    useEffect(() => {\n      const dataSet = set ?? 'all';\n\n      // Unmount NimblePicker for changes to take effect\n      setData(null);\n\n      if (overrideData) {\n        setTimeout(() => {\n          setData(overrideData);\n        }, 0);\n      } else if (emojiDataCache.has(dataSet)) {\n        setTimeout(() => {\n          setData(emojiDataCache.get(dataSet) ?? null);\n        }, 0);\n      } else {\n        import(`emoji-mart/data/${dataSet}.json`)\n          .then(({ default: json }) => {\n            emojiDataCache.set(dataSet, json);\n            setData(emojiDataCache.get(dataSet)!);\n          })\n          .catch(() => {\n            setData(null);\n          });\n      }\n    }, [set, overrideData]);\n\n    return (\n      data && (\n        <StyledEmojiPicker\n          ref={ref}\n          showFooter={showFooter}\n          style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n        >\n          <NimblePicker\n            {...restProps}\n            set={set}\n            native={!spriteSrcResolver}\n            backgroundImageFn={spriteSrcResolver}\n            data={data}\n            emojiSize={emojiSize}\n            perLine={perLine}\n            exclude={exclude}\n            onSelect={onSelect}\n            color={theme.base.palette.interactive}\n            emoji=''\n            title=''\n            emojiTooltip\n            showSkinTones={showFooter}\n            showPreview={false}\n          />\n        </StyledEmojiPicker>\n      )\n    );\n  }\n);\n\nexport default EmojiPicker;\n"]}

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

@@ -0,0 +1,5 @@
+declare const StyledEmojiPicker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    showFooter: boolean;
+}, never>;
+export default StyledEmojiPicker;
+//# sourceMappingURL=EmojiPicker.styles.d.ts.map

package/lib/components/EmojiPicker/EmojiPicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,iBAAiB;gBAA4B,OAAO;SA0hBzD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}