@soul-refiner/design-system 2.13.0-alpha.4 → 2.13.0-alpha.5

package/dist/components/feedback/emojiPicker/constants.js

@@ -1 +1 @@
-"use strict";const FREQUENTLY_USED_IDS=["grinning","+1","-1","clap","stuck_out_tongue_winking_eye","face_with_rolling_eyes","rolling_on_the_floor_laughing","heart_eyes","laughing","scream","fire","pleading_face","pray","saluting_face","raised_hand_with_fingers_splayed"],CATEGORY_ICONS=(exports.CategoryId=void 0,!function(e){e.FREQUENTLY="frequently",e.PEOPLE="people",e.NATURE="nature",e.FOODS="foods",e.ACTIVITY="activity",e.OBJECTS="objects",e.SYMBOLS="symbols",e.FLAGS="flags"}(exports.CategoryId||(exports.CategoryId={})),{[exports.CategoryId.FREQUENTLY]:"🕘",[exports.CategoryId.PEOPLE]:"😀",[exports.CategoryId.NATURE]:"🌿",[exports.CategoryId.FOODS]:"🍕",[exports.CategoryId.ACTIVITY]:"⚽",[exports.CategoryId.OBJECTS]:"💡",[exports.CategoryId.SYMBOLS]:"💠",[exports.CategoryId.FLAGS]:"🏁"}),RAINBOW_COLORS=["#FF0000","#FF7F00","#FFFF00","#00FF00","#0000FF","#4B0082","#9400D3","#FF1493","#00FFFF","#FF00FF"],SPRITE_URL="https://sr-emojis.s3.us-east-1.amazonaws.com/emojis/64-2Q7F4PKG.png",SPRITE_COLUMNS=62,TILE_SIZE=32,SPRITE_SIZE=100;exports.CATEGORY_ICONS=CATEGORY_ICONS,exports.FREQUENTLY_USED_IDS=FREQUENTLY_USED_IDS,exports.RAINBOW_COLORS=RAINBOW_COLORS,exports.SPRITE_COLUMNS=SPRITE_COLUMNS,exports.SPRITE_SIZE=SPRITE_SIZE,exports.SPRITE_URL=SPRITE_URL,exports.TILE_SIZE=TILE_SIZE;
+"use strict";const FREQUENTLY_USED_IDS=["grinning","+1","-1","clap","stuck_out_tongue_winking_eye","face_with_rolling_eyes","rolling_on_the_floor_laughing","heart_eyes","laughing","scream","fire","pleading_face","pray","saluting_face","raised_hand_with_fingers_splayed"],CATEGORY_ICONS=(exports.CategoryId=void 0,!function(e){e.FREQUENTLY="frequently",e.PEOPLE="people",e.NATURE="nature",e.FOODS="foods",e.ACTIVITY="activity",e.OBJECTS="objects",e.SYMBOLS="symbols",e.FLAGS="flags"}(exports.CategoryId||(exports.CategoryId={})),{[exports.CategoryId.FREQUENTLY]:"🕘",[exports.CategoryId.PEOPLE]:"😀",[exports.CategoryId.NATURE]:"🌿",[exports.CategoryId.FOODS]:"🍕",[exports.CategoryId.ACTIVITY]:"⚽",[exports.CategoryId.OBJECTS]:"💡",[exports.CategoryId.SYMBOLS]:"💠",[exports.CategoryId.FLAGS]:"🏁"}),RAINBOW_COLORS=["#FF0000","#FF7F00","#FFFF00","#00FF00","#0000FF","#4B0082","#9400D3","#FF1493","#00FFFF","#FF00FF"],SPRITE_URL="/emojis/64-2Q7F4PKG.png",SPRITE_COLUMNS=62,TILE_SIZE=25,SPRITE_SIZE=100;exports.CATEGORY_ICONS=CATEGORY_ICONS,exports.FREQUENTLY_USED_IDS=FREQUENTLY_USED_IDS,exports.RAINBOW_COLORS=RAINBOW_COLORS,exports.SPRITE_COLUMNS=SPRITE_COLUMNS,exports.SPRITE_SIZE=SPRITE_SIZE,exports.SPRITE_URL=SPRITE_URL,exports.TILE_SIZE=TILE_SIZE;

package/dist/components/feedback/emojiPicker/emoji-picker.js

@@ -1,4 +1,4 @@
-"use strict";var React=require("react"),styled=require("styled-components"),custom_emoji_data=require("../../../assets/custom_emoji_data.json.js"),reactWindow=require("react-window"),utils=require("./utils.js"),constants=require("./constants.js"),box=require("../../atoms/box/box.js"),paragraph=(require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js"),require("../../atoms/typography/paragraph.js")),emoticon_add=(require("../../atoms/typography/typography.js"),require("../../iconography/icon/icon.js"),require("../../../icons/basic/subtask.js"),require("../../../icons/basic/emoticon_add.js")),emoji_add=require("../../../icons/emoji/emoji_add.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../common/colors.js");var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const CATEGORY_DISPLAY_NAMES={[constants.CategoryId.FREQUENTLY]:"Frequently Used",[constants.CategoryId.PEOPLE]:"Smile & People",[constants.CategoryId.NATURE]:"Nature",[constants.CategoryId.FOODS]:"Food & Drink",[constants.CategoryId.ACTIVITY]:"Activity",[constants.CategoryId.OBJECTS]:"Objects",[constants.CategoryId.SYMBOLS]:"Symbols",[constants.CategoryId.FLAGS]:"Flags"},CustomEmojiPicker=({onSelect:r,onClickOutside:t,open:a,trigger:e,$pickersx:o})=>{const[n,d]=React__default.default.useState(constants.CategoryId.FREQUENTLY),[i,s]=React__default.default.useState(""),[l,u]=React__default.default.useState(""),c=React__default.default.useRef(null),f=React__default.default.useRef(null),[_,p]=React__default.default.useState(!1),m=void 0!==a?a:_,{categories:g,emojiMap:y}=(React__default.default.useEffect(()=>{const e=e=>{c.current&&!c.current.contains(e.target)&&(void 0===a&&p(!1),t())};return m&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[m,a]),React__default.default.useEffect(()=>{const e=setTimeout(()=>{u(i)},300);return()=>{clearTimeout(e)}},[i]),React__default.default.useMemo(()=>utils.preprocessEmojiData(custom_emoji_data.default,constants.FREQUENTLY_USED_IDS),[])),h=React__default.default.useMemo(()=>{if(!l.trim())return g;const t=l.toLowerCase();var e=[];for(const a of Object.values(y))(a.name.toLowerCase().includes(t)||a.keywords?.some(e=>e.toLowerCase().includes(t)))&&e.push(a);return{search:e}},[g,y,l]),E=React__default.default.useMemo(()=>{var e=Object.entries(h);return"search"in h?e.map(([e,t])=>({categoryId:e,emojis:t})):e.sort((e,t)=>e[0]===constants.CategoryId.FREQUENTLY?-1:t[0]===constants.CategoryId.FREQUENTLY?1:0).map(([e,t])=>({categoryId:e,emojis:t}))},[h]);var x=React__default.default.memo(({index:e,style:t})=>{var e=E[e],a="search"===e.categoryId;return React__default.default.createElement("div",{style:t},React__default.default.createElement(paragraph.P,{$color:"grey-5",sx:"padding: 8px;",$fontSize:14},a&&0<e.emojis.length?"Search Results":0<e.emojis.length?CATEGORY_DISPLAY_NAMES[e.categoryId]||e.categoryId:null),a&&0===e.emojis.length?React__default.default.createElement(box.Box,{$dir:"column",$align:"center",sx:" height: 100%;"},React__default.default.createElement(box.Box,{sx:"margin-top:auto;"},React__default.default.createElement(emoticon_add.Emoticon,{size:24})),React__default.default.createElement(paragraph.P,{$bold:!0},"No emojis found."),React__default.default.createElement(paragraph.P,{$fontSize:10,sx:"margin-bottom: auto;"},"Try using different keywords")):React__default.default.createElement(EmojiGrid,null,e.emojis.map(e=>React__default.default.createElement(EmojiButton,{key:e.id,$x:e.coordinates?.x,$y:e.coordinates?.y,title:":"+e.id,onClick:()=>{r({id:e.id,name:e.name,native:e.skins?.[0]?.native||"",unified:e.skins?.[0]?.unified||""}),p(!1)}},!e.coordinates&&e.skins[0].native))))});return React__default.default.createElement(Wrapper,{ref:c},React__default.default.createElement(TriggerContainer,{onClick:()=>p(e=>!e),style:{cursor:"pointer"}},e??React__default.default.createElement(box.Box,{sx:"width: 28px; height: 28px;",$justify:"center",$align:"center"},React__default.default.createElement(emoji_add.EmojiAdd,{size:32}))),m&&React__default.default.createElement(PickerContainer,{$sx:o},React__default.default.createElement(SearchInputWrapper,null,React__default.default.createElement(SearchInput,{type:"text",placeholder:"Search…",value:i,onChange:e=>s(e.target.value)})),React__default.default.createElement(StyledList,{height:400,itemCount:E.length,itemSize:e=>{e=E[e].emojis.length;return 36+38*Math.ceil(e/8)+12},width:"100%",ref:f},x),React__default.default.createElement(BottomTabs,null,Object.entries(constants.CATEGORY_ICONS).map(([a,e])=>React__default.default.createElement(TabButton,{key:a,$active:n===a,onClick:()=>{var t,e;t=a,-1!==(e=E.findIndex(e=>e.categoryId===t))&&f.current&&(f.current.scrollToItem(e,"start"),d(t))}},e)))))},TriggerContainer=styled__default.default.div`
+"use strict";var React=require("react"),styled=require("styled-components"),custom_emoji_data=require("../../../assets/custom_emoji_data.json.js"),reactWindow=require("react-window"),utils=require("./utils.js"),constants=require("./constants.js"),box=require("../../atoms/box/box.js"),paragraph=(require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js"),require("../../atoms/typography/paragraph.js")),emoticon_add=(require("../../atoms/typography/typography.js"),require("../../iconography/icon/icon.js"),require("../../../icons/basic/subtask.js"),require("../../../icons/basic/emoticon_add.js")),emoji_add=require("../../../icons/emoji/emoji_add.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../common/colors.js");var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const CATEGORY_DISPLAY_NAMES={[constants.CategoryId.FREQUENTLY]:"Frequently Used",[constants.CategoryId.PEOPLE]:"Smile & People",[constants.CategoryId.NATURE]:"Nature",[constants.CategoryId.FOODS]:"Food & Drink",[constants.CategoryId.ACTIVITY]:"Activity",[constants.CategoryId.OBJECTS]:"Objects",[constants.CategoryId.SYMBOLS]:"Symbols",[constants.CategoryId.FLAGS]:"Flags"},CustomEmojiPicker=({onSelect:r,onClickOutside:t,open:a,trigger:e,$pickersx:o})=>{const[n,d]=React__default.default.useState(constants.CategoryId.FREQUENTLY),[i,s]=React__default.default.useState(""),[l,u]=React__default.default.useState(""),c=React__default.default.useRef(null),f=React__default.default.useRef(null),[_,p]=React__default.default.useState(!1),m=void 0!==a?a:_,{categories:g,emojiMap:y}=(React__default.default.useEffect(()=>{const e=e=>{c.current&&!c.current.contains(e.target)&&(void 0===a&&p(!1),t())};return m&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[m,a]),React__default.default.useEffect(()=>{const e=setTimeout(()=>{u(i)},300);return()=>{clearTimeout(e)}},[i]),React__default.default.useMemo(()=>utils.preprocessEmojiData(custom_emoji_data.default,constants.FREQUENTLY_USED_IDS),[])),h=React__default.default.useMemo(()=>{if(!l.trim())return g;const t=l.toLowerCase();var e=[];for(const a of Object.values(y))(a.name.toLowerCase().includes(t)||a.keywords?.some(e=>e.toLowerCase().includes(t)))&&e.push(a);return{search:e}},[g,y,l]),E=React__default.default.useMemo(()=>{var e=Object.entries(h);return"search"in h?e.map(([e,t])=>({categoryId:e,emojis:t})):e.sort((e,t)=>e[0]===constants.CategoryId.FREQUENTLY?-1:t[0]===constants.CategoryId.FREQUENTLY?1:0).map(([e,t])=>({categoryId:e,emojis:t}))},[h]);var x=React__default.default.memo(({index:e,style:t})=>{var e=E[e],a="search"===e.categoryId;return React__default.default.createElement("div",{style:t},React__default.default.createElement(paragraph.P,{$color:"grey-5",sx:"padding: 8px;",$fontSize:14},a&&0<e.emojis.length?"Search Results":0<e.emojis.length?CATEGORY_DISPLAY_NAMES[e.categoryId]||e.categoryId:null),a&&0===e.emojis.length?React__default.default.createElement(box.Box,{$dir:"column",$align:"center",sx:" height: 100%;"},React__default.default.createElement(box.Box,{sx:"margin-top:auto;"},React__default.default.createElement(emoticon_add.Emoticon,{size:24})),React__default.default.createElement(paragraph.P,{$bold:!0},"No emojis found."),React__default.default.createElement(paragraph.P,{$fontSize:10,sx:"margin-bottom: auto;"},"Try using different keywords")):React__default.default.createElement(EmojiGrid,null,e.emojis.map(e=>React__default.default.createElement(EmojiButton,{key:e.id,$x:e.coordinates?.x,$y:e.coordinates?.y,title:":"+e.id,onClick:()=>{r({id:e.id,name:e.name,native:e.skins?.[0]?.native||"",unified:e.skins?.[0]?.unified||""}),p(!1)}},!e.coordinates&&e.skins[0].native))))});return React__default.default.createElement(Wrapper,{ref:c},React__default.default.createElement(TriggerContainer,{onClick:()=>p(e=>!e),style:{cursor:"pointer"}},e??React__default.default.createElement(box.Box,{sx:"width: 28px; height: 28px;",$justify:"center",$align:"center"},React__default.default.createElement(emoji_add.EmojiAdd,{size:32}))),m&&React__default.default.createElement(PickerContainer,{$sx:o},React__default.default.createElement(SearchInputWrapper,null,React__default.default.createElement(SearchInput,{type:"text",placeholder:"Search…",value:i,onChange:e=>s(e.target.value)})),React__default.default.createElement(StyledList,{height:400,itemCount:E.length,itemSize:e=>{e=E[e].emojis.length;return 36+38*Math.ceil(e/10)+12},width:"100%",ref:f},x),React__default.default.createElement(BottomTabs,null,Object.entries(constants.CATEGORY_ICONS).map(([a,e])=>React__default.default.createElement(TabButton,{key:a,$active:n===a,onClick:()=>{var t,e;t=a,-1!==(e=E.findIndex(e=>e.categoryId===t))&&f.current&&(f.current.scrollToItem(e,"start"),d(t))}},e)))))},TriggerContainer=styled__default.default.div`
   cursor: pointer;
 `,Wrapper=styled__default.default.div`
   position: relative;

package/dist/src/components/feedback/emojiPicker/constants.d.ts

@@ -11,7 +11,7 @@ export declare enum CategoryId {
 }
 export declare const CATEGORY_ICONS: Record<CategoryId, string>;
 export declare const RAINBOW_COLORS: string[];
-export declare const SPRITE_URL = "https://sr-emojis.s3.us-east-1.amazonaws.com/emojis/64-2Q7F4PKG.png";
+export declare const SPRITE_URL = "/emojis/64-2Q7F4PKG.png";
 export declare const SPRITE_COLUMNS = 62;
-export declare const TILE_SIZE = 32;
+export declare const TILE_SIZE = 25;
 export declare const SPRITE_SIZE = 100;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.13.0-alpha.4",
+  "version": "2.13.0-alpha.5",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",
   "license": "MIT",