@lax-wp/design-system 0.14.50 → 0.14.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-display/datatype-icon/LabelValueDataTypeIcon.cjs.js +1 -1
- package/dist/components/data-display/datatype-icon/LabelValueDataTypeIcon.cjs.js.map +1 -1
- package/dist/components/data-display/datatype-icon/LabelValueDataTypeIcon.es.js +5 -5
- package/dist/components/data-display/datatype-icon/LabelValueDataTypeIcon.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),i=require("../../../_virtual/index.cjs.js"),S=require("react"),Y=require("../../tooltip/Tooltip.cjs.js"),s=require("@mui/icons-material"),e=require("./DataTypeIcon.cjs.js"),c={[e.APP_DATA_TYPES.BOOLEAN]:"#12B76A",[e.APP_DATA_TYPES.CHOICE]:"#DF5384",[e.APP_DATA_TYPES.DATE]:"#292E92",[e.APP_DATA_TYPES.EMAIL]:"#139AFA",[e.APP_DATA_TYPES.CURRENCY]:"#F99417",[e.APP_DATA_TYPES.DATETIME]:"#6E9D6D",[e.APP_DATA_TYPES.TEXT]:"#58B507",[e.APP_DATA_TYPES.STRING]:"#58B507",[e.APP_DATA_TYPES.TAG]:"#B31121",[e.APP_DATA_TYPES.MASTER_DATA]:"#CCAE00",[e.APP_DATA_TYPES.DYNAMIC]:"#DB00CD",[e.APP_DATA_TYPES.NUMBER]:"#00E4D1"},o="#98A2B3",x=({fill:t=o,size:P=16})=>A.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:P,height:P,viewBox:"0 0 21 20",fill:"none",children:A.jsx("path",{d:"M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z",fill:t})}),O=({fill:t=o,size:P=16})=>A.jsx("svg",{width:P,height:P,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:A.jsx("path",{d:"M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z",fill:t})}),d=({dataType:t="text",tooltip:P,size:T=16,className:l})=>{const E=e.APP_DATA_TYPES_OPTIONS.find(D=>D.value===t),[C,_]=S.useState(!1),a=document.documentElement.classList.contains("dark"),r=C?c[t]:o,u=C?a?e.BG_COLORS_DARK[t]:e.BG_COLORS[t]:"transparent",n={fontSize:T,color:r,transition:"color 150ms ease"};return A.jsx(Y,{title:P||E?.label,placement:"top",children:A.jsx("span",{className:i("flex items-center justify-center p-0.5 rounded-full transition-colors duration-150",l),style:{backgroundColor:u},onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),children:(()=>{switch(t){case e.APP_DATA_TYPES.BOOLEAN:return A.jsx(s.Rule,{sx:n});case e.APP_DATA_TYPES.CHOICE:return A.jsx(s.FormatListBulleted,{sx:n});case e.APP_DATA_TYPES.DATE:return A.jsx(s.CalendarMonth,{sx:n});case e.APP_DATA_TYPES.EMAIL:return A.jsx(s.MailOutline,{sx:n});case e.APP_DATA_TYPES.CURRENCY:return A.jsx(s.AttachMoney,{sx:n});case e.APP_DATA_TYPES.DATETIME:return A.jsx(s.Schedule,{sx:n});case e.APP_DATA_TYPES.TEXT:case e.APP_DATA_TYPES.STRING:return A.jsx(s.SubjectOutlined,{sx:n});case e.APP_DATA_TYPES.TAG:return A.jsx(s.LocalOfferOutlined,{sx:n});case e.APP_DATA_TYPES.MASTER_DATA:return A.jsx(x,{size:T,fill:r});case e.APP_DATA_TYPES.DYNAMIC:return A.jsx(O,{size:T,fill:r});case e.APP_DATA_TYPES.NUMBER:return A.jsx(s.Numbers,{sx:n});default:return null}})()})})};exports.DATA_TYPE_ICON_COLORS=c;exports.LabelValueDataTypeIcon=d;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),i=require("../../../_virtual/index.cjs.js"),S=require("react"),Y=require("../../tooltip/Tooltip.cjs.js"),s=require("@mui/icons-material"),e=require("./DataTypeIcon.cjs.js"),c={[e.APP_DATA_TYPES.BOOLEAN]:"#12B76A",[e.APP_DATA_TYPES.CHOICE]:"#DF5384",[e.APP_DATA_TYPES.DATE]:"#292E92",[e.APP_DATA_TYPES.EMAIL]:"#139AFA",[e.APP_DATA_TYPES.CURRENCY]:"#F99417",[e.APP_DATA_TYPES.DATETIME]:"#6E9D6D",[e.APP_DATA_TYPES.TEXT]:"#58B507",[e.APP_DATA_TYPES.STRING]:"#58B507",[e.APP_DATA_TYPES.TAG]:"#B31121",[e.APP_DATA_TYPES.MASTER_DATA]:"#CCAE00",[e.APP_DATA_TYPES.DYNAMIC]:"#DB00CD",[e.APP_DATA_TYPES.NUMBER]:"#00E4D1"},o="#98A2B3",x=({fill:t=o,size:P=16})=>A.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:P,height:P,viewBox:"0 0 21 20",fill:"none",children:A.jsx("path",{d:"M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z",fill:t})}),O=({fill:t=o,size:P=16})=>A.jsx("svg",{width:P,height:P,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:A.jsx("path",{d:"M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z",fill:t})}),d=({dataType:t="text",tooltip:P,size:T=16,className:l})=>{const E=e.APP_DATA_TYPES_OPTIONS.find(D=>D.value===t),[C,_]=S.useState(!1),a=document.documentElement.classList.contains("dark"),r=C?c[t]:o,u=C?a?e.BG_COLORS_DARK[t]:e.BG_COLORS[t]:"transparent",n={fontSize:T,color:r,transition:"color 150ms ease"};return A.jsx(Y,{title:P||E?.label,placement:"top",children:A.jsx("span",{className:i("flex items-center justify-center -ml-1 p-0.5 rounded-full transition-colors duration-150",l),style:{backgroundColor:u},onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),children:(()=>{switch(t){case e.APP_DATA_TYPES.BOOLEAN:return A.jsx(s.Rule,{sx:n});case e.APP_DATA_TYPES.CHOICE:return A.jsx(s.FormatListBulleted,{sx:n});case e.APP_DATA_TYPES.DATE:return A.jsx(s.CalendarMonth,{sx:n});case e.APP_DATA_TYPES.EMAIL:return A.jsx(s.MailOutline,{sx:n});case e.APP_DATA_TYPES.CURRENCY:return A.jsx(s.AttachMoney,{sx:n});case e.APP_DATA_TYPES.DATETIME:return A.jsx(s.Schedule,{sx:n});case e.APP_DATA_TYPES.TEXT:case e.APP_DATA_TYPES.STRING:return A.jsx(s.SubjectOutlined,{sx:n});case e.APP_DATA_TYPES.TAG:return A.jsx(s.LocalOfferOutlined,{sx:n});case e.APP_DATA_TYPES.MASTER_DATA:return A.jsx(x,{size:T,fill:r});case e.APP_DATA_TYPES.DYNAMIC:return A.jsx(O,{size:T,fill:r});case e.APP_DATA_TYPES.NUMBER:return A.jsx(s.Numbers,{sx:n});default:return null}})()})})};exports.DATA_TYPE_ICON_COLORS=c;exports.LabelValueDataTypeIcon=d;
|
|
2
2
|
//# sourceMappingURL=LabelValueDataTypeIcon.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelValueDataTypeIcon.cjs.js","sources":["../../../../src/components/data-display/datatype-icon/LabelValueDataTypeIcon.tsx"],"sourcesContent":["import cn from 'classnames';\nimport { useState } from 'react';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n AttachMoney,\n CalendarMonth,\n FormatListBulleted,\n LocalOfferOutlined,\n MailOutline,\n Numbers,\n Rule,\n Schedule,\n SubjectOutlined,\n} from '@mui/icons-material';\nimport { APP_DATA_TYPES, APP_DATA_TYPES_OPTIONS, BG_COLORS, BG_COLORS_DARK } from './DataTypeIcon';\n\n/**\n * Accent color of each data type — the hover color of the icon\n */\nexport const DATA_TYPE_ICON_COLORS: Record<string, string> = {\n [APP_DATA_TYPES.BOOLEAN]: '#12B76A',\n [APP_DATA_TYPES.CHOICE]: '#DF5384',\n [APP_DATA_TYPES.DATE]: '#292E92',\n [APP_DATA_TYPES.EMAIL]: '#139AFA',\n [APP_DATA_TYPES.CURRENCY]: '#F99417',\n [APP_DATA_TYPES.DATETIME]: '#6E9D6D',\n [APP_DATA_TYPES.TEXT]: '#58B507',\n [APP_DATA_TYPES.STRING]: '#58B507',\n [APP_DATA_TYPES.TAG]: '#B31121',\n [APP_DATA_TYPES.MASTER_DATA]: '#CCAE00',\n [APP_DATA_TYPES.DYNAMIC]: '#DB00CD',\n [APP_DATA_TYPES.NUMBER]: '#00E4D1',\n};\n\n/** Neutral/400 — resting color of the icon */\nconst NEUTRAL_400 = '#98A2B3';\n\nconst DataBaseIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 21 20' fill='none'>\n <path\n d='M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z'\n fill={fill}\n />\n </svg>\n);\n\nconst AutomationIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg width={size} height={size} viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>\n <path\n d='M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z'\n fill={fill}\n />\n </svg>\n);\n\nexport interface LabelValueDataTypeIconProps {\n /** One of `APP_DATA_TYPES` */\n dataType: string;\n /** Overrides the default tooltip (the data type label) */\n tooltip?: React.ReactNode;\n /** Icon size in px (default: 16) */\n size?: number;\n /** Additional CSS classes on the icon wrapper */\n className?: string;\n}\n\n/**\n * Data type icon used to emphasize the data type of a `LabelValue` field.\n *\n * Unlike `DataTypeIcon` — which always renders a colored icon on a colored\n * square, as used in table headers — this one is quiet at rest: the icon sits\n * at Neutral/400 on a transparent background, and only on hover does it take\n * the data type accent color over a round, light tint of that same color.\n * A tooltip names the data type.\n *\n * @example\n * ```tsx\n * <LabelValueDataTypeIcon dataType={APP_DATA_TYPES.CURRENCY} />\n * ```\n */\nexport const LabelValueDataTypeIcon = ({\n dataType = 'text',\n tooltip,\n size = 16,\n className,\n}: LabelValueDataTypeIconProps) => {\n const dataTypeOption = APP_DATA_TYPES_OPTIONS.find((option) => option.value === dataType);\n const [isHover, setIsHover] = useState(false);\n const isDark = document.documentElement.classList.contains('dark');\n\n const color = isHover ? DATA_TYPE_ICON_COLORS[dataType] : NEUTRAL_400;\n const backgroundColor = isHover ? (isDark ? BG_COLORS_DARK[dataType] : BG_COLORS[dataType]) : 'transparent';\n const sx = { fontSize: size, color, transition: 'color 150ms ease' };\n\n return (\n <Tooltip title={tooltip || dataTypeOption?.label} placement='top'>\n <span\n className={cn('flex items-center justify-center p-0.5 rounded-full transition-colors duration-150', className)}\n style={{ backgroundColor }}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n {(() => {\n switch (dataType) {\n case APP_DATA_TYPES.BOOLEAN:\n return <Rule sx={sx} />;\n case APP_DATA_TYPES.CHOICE:\n return <FormatListBulleted sx={sx} />;\n case APP_DATA_TYPES.DATE:\n return <CalendarMonth sx={sx} />;\n case APP_DATA_TYPES.EMAIL:\n return <MailOutline sx={sx} />;\n case APP_DATA_TYPES.CURRENCY:\n return <AttachMoney sx={sx} />;\n case APP_DATA_TYPES.DATETIME:\n return <Schedule sx={sx} />;\n case APP_DATA_TYPES.TEXT:\n case APP_DATA_TYPES.STRING:\n return <SubjectOutlined sx={sx} />;\n case APP_DATA_TYPES.TAG:\n return <LocalOfferOutlined sx={sx} />;\n case APP_DATA_TYPES.MASTER_DATA:\n return <DataBaseIcon size={size} fill={color} />;\n case APP_DATA_TYPES.DYNAMIC:\n return <AutomationIcon size={size} fill={color} />;\n case APP_DATA_TYPES.NUMBER:\n return <Numbers sx={sx} />;\n default:\n return null;\n }\n })()}\n </span>\n </Tooltip>\n );\n};\n"],"names":["DATA_TYPE_ICON_COLORS","APP_DATA_TYPES","NEUTRAL_400","DataBaseIcon","fill","size","jsx","AutomationIcon","LabelValueDataTypeIcon","dataType","tooltip","className","dataTypeOption","APP_DATA_TYPES_OPTIONS","option","isHover","setIsHover","useState","isDark","color","backgroundColor","BG_COLORS_DARK","BG_COLORS","sx","Tooltip","cn","Rule","FormatListBulleted","CalendarMonth","MailOutline","AttachMoney","Schedule","SubjectOutlined","LocalOfferOutlined","Numbers"],"mappings":"kSAmBaA,EAAgD,CAC3D,CAACC,EAAAA,eAAe,OAAO,EAAG,UAC1B,CAACA,EAAAA,eAAe,MAAM,EAAG,UACzB,CAACA,EAAAA,eAAe,IAAI,EAAG,UACvB,CAACA,EAAAA,eAAe,KAAK,EAAG,UACxB,CAACA,EAAAA,eAAe,QAAQ,EAAG,UAC3B,CAACA,EAAAA,eAAe,QAAQ,EAAG,UAC3B,CAACA,EAAAA,eAAe,IAAI,EAAG,UACvB,CAACA,EAAAA,eAAe,MAAM,EAAG,UACzB,CAACA,EAAAA,eAAe,GAAG,EAAG,UACtB,CAACA,EAAAA,eAAe,WAAW,EAAG,UAC9B,CAACA,EAAAA,eAAe,OAAO,EAAG,UAC1B,CAACA,EAAAA,eAAe,MAAM,EAAG,SAC3B,EAGMC,EAAc,UAEdC,EAAe,CAAC,CAAE,KAAAC,EAAOF,EAAa,KAAAG,EAAO,MACjDC,EAAAA,IAAC,OAAI,MAAM,6BAA6B,MAAOD,EAAM,OAAQA,EAAM,QAAQ,YAAY,KAAK,OAC1F,SAAAC,EAAAA,IAAC,OAAA,CACC,EAAE,qYACF,KAAAF,CAAA,CACF,EACF,EAGIG,EAAiB,CAAC,CAAE,KAAAH,EAAOF,EAAa,KAAAG,EAAO,MACnDC,EAAAA,IAAC,OAAI,MAAOD,EAAM,OAAQA,EAAM,QAAQ,YAAY,KAAK,OAAO,MAAM,6BACpE,SAAAC,EAAAA,IAAC,OAAA,CACC,EAAE,kpDACF,KAAAF,CAAA,CACF,EACF,EA4BWI,EAAyB,CAAC,CACrC,SAAAC,EAAW,OACX,QAAAC,EACA,KAAAL,EAAO,GACP,UAAAM,CACF,IAAmC,CACjC,MAAMC,EAAiBC,EAAAA,uBAAuB,KAAMC,GAAWA,EAAO,QAAUL,CAAQ,EAClF,CAACM,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAS,SAAS,gBAAgB,UAAU,SAAS,MAAM,EAE3DC,EAAQJ,EAAUf,EAAsBS,CAAQ,EAAIP,EACpDkB,EAAkBL,EAAWG,EAASG,EAAAA,eAAeZ,CAAQ,EAAIa,EAAAA,UAAUb,CAAQ,EAAK,cACxFc,EAAK,CAAE,SAAUlB,EAAM,MAAAc,EAAO,WAAY,kBAAA,EAEhD,aACGK,EAAA,CAAQ,MAAOd,GAAWE,GAAgB,MAAO,UAAU,MAC1D,SAAAN,EAAAA,IAAC,OAAA,CACC,UAAWmB,EAAG,
|
|
1
|
+
{"version":3,"file":"LabelValueDataTypeIcon.cjs.js","sources":["../../../../src/components/data-display/datatype-icon/LabelValueDataTypeIcon.tsx"],"sourcesContent":["import cn from 'classnames';\nimport { useState } from 'react';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n AttachMoney,\n CalendarMonth,\n FormatListBulleted,\n LocalOfferOutlined,\n MailOutline,\n Numbers,\n Rule,\n Schedule,\n SubjectOutlined,\n} from '@mui/icons-material';\nimport { APP_DATA_TYPES, APP_DATA_TYPES_OPTIONS, BG_COLORS, BG_COLORS_DARK } from './DataTypeIcon';\n\n/**\n * Accent color of each data type — the hover color of the icon\n */\nexport const DATA_TYPE_ICON_COLORS: Record<string, string> = {\n [APP_DATA_TYPES.BOOLEAN]: '#12B76A',\n [APP_DATA_TYPES.CHOICE]: '#DF5384',\n [APP_DATA_TYPES.DATE]: '#292E92',\n [APP_DATA_TYPES.EMAIL]: '#139AFA',\n [APP_DATA_TYPES.CURRENCY]: '#F99417',\n [APP_DATA_TYPES.DATETIME]: '#6E9D6D',\n [APP_DATA_TYPES.TEXT]: '#58B507',\n [APP_DATA_TYPES.STRING]: '#58B507',\n [APP_DATA_TYPES.TAG]: '#B31121',\n [APP_DATA_TYPES.MASTER_DATA]: '#CCAE00',\n [APP_DATA_TYPES.DYNAMIC]: '#DB00CD',\n [APP_DATA_TYPES.NUMBER]: '#00E4D1',\n};\n\n/** Neutral/400 — resting color of the icon */\nconst NEUTRAL_400 = '#98A2B3';\n\nconst DataBaseIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 21 20' fill='none'>\n <path\n d='M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z'\n fill={fill}\n />\n </svg>\n);\n\nconst AutomationIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg width={size} height={size} viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>\n <path\n d='M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z'\n fill={fill}\n />\n </svg>\n);\n\nexport interface LabelValueDataTypeIconProps {\n /** One of `APP_DATA_TYPES` */\n dataType: string;\n /** Overrides the default tooltip (the data type label) */\n tooltip?: React.ReactNode;\n /** Icon size in px (default: 16) */\n size?: number;\n /** Additional CSS classes on the icon wrapper */\n className?: string;\n}\n\n/**\n * Data type icon used to emphasize the data type of a `LabelValue` field.\n *\n * Unlike `DataTypeIcon` — which always renders a colored icon on a colored\n * square, as used in table headers — this one is quiet at rest: the icon sits\n * at Neutral/400 on a transparent background, and only on hover does it take\n * the data type accent color over a round, light tint of that same color.\n * A tooltip names the data type.\n *\n * @example\n * ```tsx\n * <LabelValueDataTypeIcon dataType={APP_DATA_TYPES.CURRENCY} />\n * ```\n */\nexport const LabelValueDataTypeIcon = ({\n dataType = 'text',\n tooltip,\n size = 16,\n className,\n}: LabelValueDataTypeIconProps) => {\n const dataTypeOption = APP_DATA_TYPES_OPTIONS.find((option) => option.value === dataType);\n const [isHover, setIsHover] = useState(false);\n const isDark = document.documentElement.classList.contains('dark');\n\n const color = isHover ? DATA_TYPE_ICON_COLORS[dataType] : NEUTRAL_400;\n const backgroundColor = isHover ? (isDark ? BG_COLORS_DARK[dataType] : BG_COLORS[dataType]) : 'transparent';\n const sx = { fontSize: size, color, transition: 'color 150ms ease' };\n\n return (\n <Tooltip title={tooltip || dataTypeOption?.label} placement='top'>\n <span\n className={cn('flex items-center justify-center -ml-1 p-0.5 rounded-full transition-colors duration-150', className)}\n style={{ backgroundColor }}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n {(() => {\n switch (dataType) {\n case APP_DATA_TYPES.BOOLEAN:\n return <Rule sx={sx} />;\n case APP_DATA_TYPES.CHOICE:\n return <FormatListBulleted sx={sx} />;\n case APP_DATA_TYPES.DATE:\n return <CalendarMonth sx={sx} />;\n case APP_DATA_TYPES.EMAIL:\n return <MailOutline sx={sx} />;\n case APP_DATA_TYPES.CURRENCY:\n return <AttachMoney sx={sx} />;\n case APP_DATA_TYPES.DATETIME:\n return <Schedule sx={sx} />;\n case APP_DATA_TYPES.TEXT:\n case APP_DATA_TYPES.STRING:\n return <SubjectOutlined sx={sx} />;\n case APP_DATA_TYPES.TAG:\n return <LocalOfferOutlined sx={sx} />;\n case APP_DATA_TYPES.MASTER_DATA:\n return <DataBaseIcon size={size} fill={color} />;\n case APP_DATA_TYPES.DYNAMIC:\n return <AutomationIcon size={size} fill={color} />;\n case APP_DATA_TYPES.NUMBER:\n return <Numbers sx={sx} />;\n default:\n return null;\n }\n })()}\n </span>\n </Tooltip>\n );\n};\n"],"names":["DATA_TYPE_ICON_COLORS","APP_DATA_TYPES","NEUTRAL_400","DataBaseIcon","fill","size","jsx","AutomationIcon","LabelValueDataTypeIcon","dataType","tooltip","className","dataTypeOption","APP_DATA_TYPES_OPTIONS","option","isHover","setIsHover","useState","isDark","color","backgroundColor","BG_COLORS_DARK","BG_COLORS","sx","Tooltip","cn","Rule","FormatListBulleted","CalendarMonth","MailOutline","AttachMoney","Schedule","SubjectOutlined","LocalOfferOutlined","Numbers"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import T from "../../../_virtual/index.es.js";
|
|
3
3
|
import { useState as D } from "react";
|
|
4
4
|
import f from "../../tooltip/Tooltip.es.js";
|
|
5
5
|
import { Numbers as O, LocalOfferOutlined as d, SubjectOutlined as L, Schedule as h, AttachMoney as M, MailOutline as p, CalendarMonth as B, FormatListBulleted as I, Rule as R } from "@mui/icons-material";
|
|
@@ -17,13 +17,13 @@ const w = {
|
|
|
17
17
|
[t.MASTER_DATA]: "#CCAE00",
|
|
18
18
|
[t.DYNAMIC]: "#DB00CD",
|
|
19
19
|
[t.NUMBER]: "#00E4D1"
|
|
20
|
-
},
|
|
20
|
+
}, l = "#98A2B3", v = ({ fill: n = l, size: o = 16 }) => /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: o, height: o, viewBox: "0 0 21 20", fill: "none", children: /* @__PURE__ */ e(
|
|
21
21
|
"path",
|
|
22
22
|
{
|
|
23
23
|
d: "M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z",
|
|
24
24
|
fill: n
|
|
25
25
|
}
|
|
26
|
-
) }), g = ({ fill: n =
|
|
26
|
+
) }), g = ({ fill: n = l, size: o = 16 }) => /* @__PURE__ */ e("svg", { width: o, height: o, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
|
|
27
27
|
"path",
|
|
28
28
|
{
|
|
29
29
|
d: "M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z",
|
|
@@ -35,11 +35,11 @@ const w = {
|
|
|
35
35
|
size: C = 16,
|
|
36
36
|
className: i
|
|
37
37
|
}) => {
|
|
38
|
-
const u = N.find((
|
|
38
|
+
const u = N.find((m) => m.value === n), [c, a] = D(!1), A = document.documentElement.classList.contains("dark"), s = c ? w[n] : l, E = c ? A ? S[n] : _[n] : "transparent", r = { fontSize: C, color: s, transition: "color 150ms ease" };
|
|
39
39
|
return /* @__PURE__ */ e(f, { title: o || u?.label, placement: "top", children: /* @__PURE__ */ e(
|
|
40
40
|
"span",
|
|
41
41
|
{
|
|
42
|
-
className:
|
|
42
|
+
className: T("flex items-center justify-center -ml-1 p-0.5 rounded-full transition-colors duration-150", i),
|
|
43
43
|
style: { backgroundColor: E },
|
|
44
44
|
onMouseEnter: () => a(!0),
|
|
45
45
|
onMouseLeave: () => a(!1),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelValueDataTypeIcon.es.js","sources":["../../../../src/components/data-display/datatype-icon/LabelValueDataTypeIcon.tsx"],"sourcesContent":["import cn from 'classnames';\nimport { useState } from 'react';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n AttachMoney,\n CalendarMonth,\n FormatListBulleted,\n LocalOfferOutlined,\n MailOutline,\n Numbers,\n Rule,\n Schedule,\n SubjectOutlined,\n} from '@mui/icons-material';\nimport { APP_DATA_TYPES, APP_DATA_TYPES_OPTIONS, BG_COLORS, BG_COLORS_DARK } from './DataTypeIcon';\n\n/**\n * Accent color of each data type — the hover color of the icon\n */\nexport const DATA_TYPE_ICON_COLORS: Record<string, string> = {\n [APP_DATA_TYPES.BOOLEAN]: '#12B76A',\n [APP_DATA_TYPES.CHOICE]: '#DF5384',\n [APP_DATA_TYPES.DATE]: '#292E92',\n [APP_DATA_TYPES.EMAIL]: '#139AFA',\n [APP_DATA_TYPES.CURRENCY]: '#F99417',\n [APP_DATA_TYPES.DATETIME]: '#6E9D6D',\n [APP_DATA_TYPES.TEXT]: '#58B507',\n [APP_DATA_TYPES.STRING]: '#58B507',\n [APP_DATA_TYPES.TAG]: '#B31121',\n [APP_DATA_TYPES.MASTER_DATA]: '#CCAE00',\n [APP_DATA_TYPES.DYNAMIC]: '#DB00CD',\n [APP_DATA_TYPES.NUMBER]: '#00E4D1',\n};\n\n/** Neutral/400 — resting color of the icon */\nconst NEUTRAL_400 = '#98A2B3';\n\nconst DataBaseIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 21 20' fill='none'>\n <path\n d='M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z'\n fill={fill}\n />\n </svg>\n);\n\nconst AutomationIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg width={size} height={size} viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>\n <path\n d='M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z'\n fill={fill}\n />\n </svg>\n);\n\nexport interface LabelValueDataTypeIconProps {\n /** One of `APP_DATA_TYPES` */\n dataType: string;\n /** Overrides the default tooltip (the data type label) */\n tooltip?: React.ReactNode;\n /** Icon size in px (default: 16) */\n size?: number;\n /** Additional CSS classes on the icon wrapper */\n className?: string;\n}\n\n/**\n * Data type icon used to emphasize the data type of a `LabelValue` field.\n *\n * Unlike `DataTypeIcon` — which always renders a colored icon on a colored\n * square, as used in table headers — this one is quiet at rest: the icon sits\n * at Neutral/400 on a transparent background, and only on hover does it take\n * the data type accent color over a round, light tint of that same color.\n * A tooltip names the data type.\n *\n * @example\n * ```tsx\n * <LabelValueDataTypeIcon dataType={APP_DATA_TYPES.CURRENCY} />\n * ```\n */\nexport const LabelValueDataTypeIcon = ({\n dataType = 'text',\n tooltip,\n size = 16,\n className,\n}: LabelValueDataTypeIconProps) => {\n const dataTypeOption = APP_DATA_TYPES_OPTIONS.find((option) => option.value === dataType);\n const [isHover, setIsHover] = useState(false);\n const isDark = document.documentElement.classList.contains('dark');\n\n const color = isHover ? DATA_TYPE_ICON_COLORS[dataType] : NEUTRAL_400;\n const backgroundColor = isHover ? (isDark ? BG_COLORS_DARK[dataType] : BG_COLORS[dataType]) : 'transparent';\n const sx = { fontSize: size, color, transition: 'color 150ms ease' };\n\n return (\n <Tooltip title={tooltip || dataTypeOption?.label} placement='top'>\n <span\n className={cn('flex items-center justify-center p-0.5 rounded-full transition-colors duration-150', className)}\n style={{ backgroundColor }}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n {(() => {\n switch (dataType) {\n case APP_DATA_TYPES.BOOLEAN:\n return <Rule sx={sx} />;\n case APP_DATA_TYPES.CHOICE:\n return <FormatListBulleted sx={sx} />;\n case APP_DATA_TYPES.DATE:\n return <CalendarMonth sx={sx} />;\n case APP_DATA_TYPES.EMAIL:\n return <MailOutline sx={sx} />;\n case APP_DATA_TYPES.CURRENCY:\n return <AttachMoney sx={sx} />;\n case APP_DATA_TYPES.DATETIME:\n return <Schedule sx={sx} />;\n case APP_DATA_TYPES.TEXT:\n case APP_DATA_TYPES.STRING:\n return <SubjectOutlined sx={sx} />;\n case APP_DATA_TYPES.TAG:\n return <LocalOfferOutlined sx={sx} />;\n case APP_DATA_TYPES.MASTER_DATA:\n return <DataBaseIcon size={size} fill={color} />;\n case APP_DATA_TYPES.DYNAMIC:\n return <AutomationIcon size={size} fill={color} />;\n case APP_DATA_TYPES.NUMBER:\n return <Numbers sx={sx} />;\n default:\n return null;\n }\n })()}\n </span>\n </Tooltip>\n );\n};\n"],"names":["DATA_TYPE_ICON_COLORS","APP_DATA_TYPES","NEUTRAL_400","DataBaseIcon","fill","size","jsx","AutomationIcon","LabelValueDataTypeIcon","dataType","tooltip","className","dataTypeOption","APP_DATA_TYPES_OPTIONS","option","isHover","setIsHover","useState","isDark","color","backgroundColor","BG_COLORS_DARK","BG_COLORS","sx","Tooltip","cn","Rule","FormatListBulleted","CalendarMonth","MailOutline","AttachMoney","Schedule","SubjectOutlined","LocalOfferOutlined","Numbers"],"mappings":";;;;;;AAmBO,MAAMA,IAAgD;AAAA,EAC3D,CAACC,EAAe,OAAO,GAAG;AAAA,EAC1B,CAACA,EAAe,MAAM,GAAG;AAAA,EACzB,CAACA,EAAe,IAAI,GAAG;AAAA,EACvB,CAACA,EAAe,KAAK,GAAG;AAAA,EACxB,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,IAAI,GAAG;AAAA,EACvB,CAACA,EAAe,MAAM,GAAG;AAAA,EACzB,CAACA,EAAe,GAAG,GAAG;AAAA,EACtB,CAACA,EAAe,WAAW,GAAG;AAAA,EAC9B,CAACA,EAAe,OAAO,GAAG;AAAA,EAC1B,CAACA,EAAe,MAAM,GAAG;AAC3B,GAGMC,IAAc,WAEdC,IAAe,CAAC,EAAE,MAAAC,IAAOF,GAAa,MAAAG,IAAO,SACjD,gBAAAC,EAAC,SAAI,OAAM,8BAA6B,OAAOD,GAAM,QAAQA,GAAM,SAAQ,aAAY,MAAK,QAC1F,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAAF;AAAA,EAAA;AACF,GACF,GAGIG,IAAiB,CAAC,EAAE,MAAAH,IAAOF,GAAa,MAAAG,IAAO,SACnD,gBAAAC,EAAC,SAAI,OAAOD,GAAM,QAAQA,GAAM,SAAQ,aAAY,MAAK,QAAO,OAAM,8BACpE,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAAF;AAAA,EAAA;AACF,GACF,GA4BWI,IAAyB,CAAC;AAAA,EACrC,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,MAAAL,IAAO;AAAA,EACP,WAAAM;AACF,MAAmC;AACjC,QAAMC,IAAiBC,EAAuB,KAAK,CAACC,MAAWA,EAAO,UAAUL,CAAQ,GAClF,CAACM,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAS,SAAS,gBAAgB,UAAU,SAAS,MAAM,GAE3DC,IAAQJ,IAAUf,EAAsBS,CAAQ,IAAIP,GACpDkB,IAAkBL,IAAWG,IAASG,EAAeZ,CAAQ,IAAIa,EAAUb,CAAQ,IAAK,eACxFc,IAAK,EAAE,UAAUlB,GAAM,OAAAc,GAAO,YAAY,mBAAA;AAEhD,2BACGK,GAAA,EAAQ,OAAOd,KAAWE,GAAgB,OAAO,WAAU,OAC1D,UAAA,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWmB,EAAG,
|
|
1
|
+
{"version":3,"file":"LabelValueDataTypeIcon.es.js","sources":["../../../../src/components/data-display/datatype-icon/LabelValueDataTypeIcon.tsx"],"sourcesContent":["import cn from 'classnames';\nimport { useState } from 'react';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n AttachMoney,\n CalendarMonth,\n FormatListBulleted,\n LocalOfferOutlined,\n MailOutline,\n Numbers,\n Rule,\n Schedule,\n SubjectOutlined,\n} from '@mui/icons-material';\nimport { APP_DATA_TYPES, APP_DATA_TYPES_OPTIONS, BG_COLORS, BG_COLORS_DARK } from './DataTypeIcon';\n\n/**\n * Accent color of each data type — the hover color of the icon\n */\nexport const DATA_TYPE_ICON_COLORS: Record<string, string> = {\n [APP_DATA_TYPES.BOOLEAN]: '#12B76A',\n [APP_DATA_TYPES.CHOICE]: '#DF5384',\n [APP_DATA_TYPES.DATE]: '#292E92',\n [APP_DATA_TYPES.EMAIL]: '#139AFA',\n [APP_DATA_TYPES.CURRENCY]: '#F99417',\n [APP_DATA_TYPES.DATETIME]: '#6E9D6D',\n [APP_DATA_TYPES.TEXT]: '#58B507',\n [APP_DATA_TYPES.STRING]: '#58B507',\n [APP_DATA_TYPES.TAG]: '#B31121',\n [APP_DATA_TYPES.MASTER_DATA]: '#CCAE00',\n [APP_DATA_TYPES.DYNAMIC]: '#DB00CD',\n [APP_DATA_TYPES.NUMBER]: '#00E4D1',\n};\n\n/** Neutral/400 — resting color of the icon */\nconst NEUTRAL_400 = '#98A2B3';\n\nconst DataBaseIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 21 20' fill='none'>\n <path\n d='M10.666 17.5C8.56879 17.5 6.79449 17.1771 5.3431 16.5312C3.89171 15.8854 3.16602 15.0972 3.16602 14.1667V5.83333C3.16602 4.91667 3.89865 4.13194 5.36393 3.47917C6.82921 2.82639 8.59657 2.5 10.666 2.5C12.7355 2.5 14.5028 2.82639 15.9681 3.47917C17.4334 4.13194 18.166 4.91667 18.166 5.83333V14.1667C18.166 15.0972 17.4403 15.8854 15.9889 16.5312C14.5375 17.1771 12.7632 17.5 10.666 17.5Z'\n fill={fill}\n />\n </svg>\n);\n\nconst AutomationIcon = ({ fill = NEUTRAL_400, size = 16 }) => (\n <svg width={size} height={size} viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>\n <path\n d='M3.70019 8.625C3.35019 8.91667 2.98561 9.05 2.60644 9.025C2.22727 9 1.89602 8.87083 1.61269 8.6375C1.32935 8.40417 1.1356 8.09792 1.03144 7.71875C0.927272 7.33958 0.996022 6.95 1.23769 6.55L2.17519 5C1.96685 4.81667 1.80227 4.59583 1.68144 4.3375C1.5606 4.07917 1.50019 3.8 1.50019 3.5C1.50019 2.95 1.69602 2.47917 2.08769 2.0875C2.47936 1.69583 2.95019 1.5 3.50019 1.5C4.05019 1.5 4.52102 1.69583 4.91269 2.0875C5.30436 2.47917 5.50019 2.95 5.50019 3.5C5.50019 4.05 5.30436 4.52083 4.91269 4.9125C4.52102 5.30417 4.05019 5.5 3.50019 5.5C3.42519 5.5 3.35019 5.49583 3.27519 5.4875C3.20019 5.47917 3.12935 5.46667 3.06269 5.45L2.10019 7.075C2.00852 7.225 1.97936 7.37292 2.01269 7.51875C2.04602 7.66458 2.11686 7.78333 2.22519 7.875C2.33352 7.96667 2.46269 8.01875 2.61269 8.03125C2.76269 8.04375 2.90852 7.99167 3.05019 7.875L8.30019 3.3625C8.65019 3.07083 9.01686 2.93958 9.40019 2.96875C9.78352 2.99792 10.1169 3.12917 10.4002 3.3625C10.6835 3.59583 10.8752 3.90208 10.9752 4.28125C11.0752 4.66042 11.0044 5.05 10.7627 5.45L9.82519 7C10.0335 7.18333 10.1981 7.40417 10.3189 7.6625C10.4398 7.92083 10.5002 8.2 10.5002 8.5C10.5002 9.05 10.3044 9.52083 9.91269 9.9125C9.52102 10.3042 9.05019 10.5 8.50019 10.5C7.95019 10.5 7.47936 10.3042 7.08769 9.9125C6.69602 9.52083 6.50019 9.05 6.50019 8.5C6.50019 7.95 6.69602 7.47917 7.08769 7.0875C7.47936 6.69583 7.95019 6.5 8.50019 6.5C8.57519 6.5 8.64811 6.50417 8.71894 6.5125C8.78977 6.52083 8.85852 6.53333 8.92519 6.55L9.90019 4.925C9.99186 4.775 10.021 4.62708 9.98769 4.48125C9.95436 4.33542 9.88352 4.21667 9.77519 4.125C9.66686 4.03333 9.53769 3.98125 9.38769 3.96875C9.23769 3.95625 9.09186 4.00833 8.95019 4.125L3.70019 8.625Z'\n fill={fill}\n />\n </svg>\n);\n\nexport interface LabelValueDataTypeIconProps {\n /** One of `APP_DATA_TYPES` */\n dataType: string;\n /** Overrides the default tooltip (the data type label) */\n tooltip?: React.ReactNode;\n /** Icon size in px (default: 16) */\n size?: number;\n /** Additional CSS classes on the icon wrapper */\n className?: string;\n}\n\n/**\n * Data type icon used to emphasize the data type of a `LabelValue` field.\n *\n * Unlike `DataTypeIcon` — which always renders a colored icon on a colored\n * square, as used in table headers — this one is quiet at rest: the icon sits\n * at Neutral/400 on a transparent background, and only on hover does it take\n * the data type accent color over a round, light tint of that same color.\n * A tooltip names the data type.\n *\n * @example\n * ```tsx\n * <LabelValueDataTypeIcon dataType={APP_DATA_TYPES.CURRENCY} />\n * ```\n */\nexport const LabelValueDataTypeIcon = ({\n dataType = 'text',\n tooltip,\n size = 16,\n className,\n}: LabelValueDataTypeIconProps) => {\n const dataTypeOption = APP_DATA_TYPES_OPTIONS.find((option) => option.value === dataType);\n const [isHover, setIsHover] = useState(false);\n const isDark = document.documentElement.classList.contains('dark');\n\n const color = isHover ? DATA_TYPE_ICON_COLORS[dataType] : NEUTRAL_400;\n const backgroundColor = isHover ? (isDark ? BG_COLORS_DARK[dataType] : BG_COLORS[dataType]) : 'transparent';\n const sx = { fontSize: size, color, transition: 'color 150ms ease' };\n\n return (\n <Tooltip title={tooltip || dataTypeOption?.label} placement='top'>\n <span\n className={cn('flex items-center justify-center -ml-1 p-0.5 rounded-full transition-colors duration-150', className)}\n style={{ backgroundColor }}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n {(() => {\n switch (dataType) {\n case APP_DATA_TYPES.BOOLEAN:\n return <Rule sx={sx} />;\n case APP_DATA_TYPES.CHOICE:\n return <FormatListBulleted sx={sx} />;\n case APP_DATA_TYPES.DATE:\n return <CalendarMonth sx={sx} />;\n case APP_DATA_TYPES.EMAIL:\n return <MailOutline sx={sx} />;\n case APP_DATA_TYPES.CURRENCY:\n return <AttachMoney sx={sx} />;\n case APP_DATA_TYPES.DATETIME:\n return <Schedule sx={sx} />;\n case APP_DATA_TYPES.TEXT:\n case APP_DATA_TYPES.STRING:\n return <SubjectOutlined sx={sx} />;\n case APP_DATA_TYPES.TAG:\n return <LocalOfferOutlined sx={sx} />;\n case APP_DATA_TYPES.MASTER_DATA:\n return <DataBaseIcon size={size} fill={color} />;\n case APP_DATA_TYPES.DYNAMIC:\n return <AutomationIcon size={size} fill={color} />;\n case APP_DATA_TYPES.NUMBER:\n return <Numbers sx={sx} />;\n default:\n return null;\n }\n })()}\n </span>\n </Tooltip>\n );\n};\n"],"names":["DATA_TYPE_ICON_COLORS","APP_DATA_TYPES","NEUTRAL_400","DataBaseIcon","fill","size","jsx","AutomationIcon","LabelValueDataTypeIcon","dataType","tooltip","className","dataTypeOption","APP_DATA_TYPES_OPTIONS","option","isHover","setIsHover","useState","isDark","color","backgroundColor","BG_COLORS_DARK","BG_COLORS","sx","Tooltip","cn","Rule","FormatListBulleted","CalendarMonth","MailOutline","AttachMoney","Schedule","SubjectOutlined","LocalOfferOutlined","Numbers"],"mappings":"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"}
|