@lax-wp/design-system 0.14.14 → 0.14.16
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/forms/icon-picker/IconPicker.cjs.js +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.d.ts +1 -0
- package/dist/components/forms/icon-picker/IconPicker.es.js +75 -74
- package/dist/components/forms/icon-picker/IconPicker.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 t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),C=require("../../../_virtual/index.cjs.js"),d=require("react"),v=require("react-window"),I=require("@mui/icons-material"),N=require("@mui/material"),j=require("antd"),y=require("../../data-display/typography/Typography.cjs.js"),P=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),S=require("../../../utils/countryFlags.cjs.js"),q=require("../shared/InputLabel.cjs.js");function R(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const h=R(I),O=Object.keys(h).filter(e=>e?.endsWith("Rounded")),D=[...O||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],T=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},L=({onChange:e,selectedIcon:n,setOpen:s})=>{const[a,p]=d.useState(""),c=(D||[]).filter(r=>{if(r?.startsWith("flag-")){const i=r?.replace("flag-","");return i?.toLowerCase()?.includes(a?.trim()?.toLowerCase()||"")||x.countryNameFromCode(i||"")?.toLowerCase()?.includes(a?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(a?.trim()?.toLowerCase()||"")}),m=(r,i)=>{if(i.stopPropagation(),n===r){e?.(null);return}e?.(r),s?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(P.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>p(r||""),fieldSuffix:t.jsx(h.Search,{className:"!w-4 !h-4 text-neutral-400"})}),t.jsx(v.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((c?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:i,style:f})=>{const g=i*5+r,l=c?.[g];return l?t.jsx("div",{style:f,className:"p-1",children:t.jsx(j.Tooltip,{title:T(l),placement:"bottom",children:t.jsx(N.IconButton,{type:"button",className:C("flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===l}),onClick:u=>m(l,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:l,className:"!w-5 !h-5 text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:s,isHovering:a})=>{if(e?.startsWith?.("flag-")){const c=e?.replace("flag-","");return S.getFlagComponent?.(c||"",a||!1)||t.jsx("div",{children:"-"})}const p=h?.[e];return p?t.jsx(p,{sx:n,className:s,isHovering:a}):t.jsx("div",{children:"-"})},F=({selectedIcon:e,onChange:n,label:s,required:a=!1,allowClear:p=!0,disabled:c=!1,errorMessage:m,dropdownPosition:r="bottom",className:i})=>{const[f,g]=d.useState(!1),l=d.useRef(!1),u=d.useRef(null),k=d.useRef(!1);d.useEffect(()=>{k.current&&!f&&u.current?.focus(),k.current=f},[f]);const w=o=>{o.stopPropagation(),n?.("")};return t.jsx(j.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:f,onOpenChange:o=>{o?(l.current&&g(!0),l.current=!1):g(!1)},content:t.jsx(L,{onChange:n,selectedIcon:e,setOpen:g}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[s?t.jsx(q.InputLabel,{label:s||"",required:a||!1}):null,t.jsxs("button",{ref:u,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${c?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${m?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2 ${i}`,disabled:c,onClick:o=>{if(c){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(l.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),f||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,className:"!w-5 !h-5 text-neutral-900 dark:text-white"}):t.jsx(y.Typography,{size:"small",variant:"regular",appearance:"subtitle",children:"Select Icon"}),e&&p&&!c?t.jsx(h.CloseRounded,{className:"!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",onClick:w}):null]}),m&&t.jsx(y.Typography,{size:"extra-small",className:"text-red-500 font-medium",children:m})]})})},E=d.lazy(()=>Promise.resolve({default:e=>t.jsx(d.Suspense,{fallback:t.jsx("div",{className:"min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md"}),children:t.jsx(F,{...e})})}));exports.IconPicker=E;exports.IconRenderer=b;
|
|
2
2
|
//# sourceMappingURL=IconPicker.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='regular'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n className?: string\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n className\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2 ${className}`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='regular'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
@@ -12,6 +12,7 @@ export interface IconPickerContentProps {
|
|
|
12
12
|
errorMessage?: string;
|
|
13
13
|
/** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */
|
|
14
14
|
dropdownPosition?: IconPickerDropdownPosition;
|
|
15
|
+
className?: string;
|
|
15
16
|
}
|
|
16
17
|
interface IconRendererProps {
|
|
17
18
|
iconName: string;
|
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
import { jsx as t, jsxs as b } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { FixedSizeGrid as
|
|
2
|
+
import N from "../../../_virtual/index.es.js";
|
|
3
|
+
import I, { Suspense as P, useState as x, useRef as g, useEffect as S } from "react";
|
|
4
|
+
import { FixedSizeGrid as R } from "react-window";
|
|
5
5
|
import * as h from "@mui/icons-material";
|
|
6
|
-
import { IconButton as
|
|
7
|
-
import { Popover as
|
|
8
|
-
import { Typography as
|
|
9
|
-
import { InputField as
|
|
10
|
-
import { COUNTRY_CODES as
|
|
11
|
-
import { getFlagComponent as
|
|
6
|
+
import { IconButton as D } from "@mui/material";
|
|
7
|
+
import { Popover as L, Tooltip as E } from "antd";
|
|
8
|
+
import { Typography as w } from "../../data-display/typography/Typography.es.js";
|
|
9
|
+
import { InputField as O } from "../input-field/InputField.es.js";
|
|
10
|
+
import { COUNTRY_CODES as T, countryNameFromCode as y } from "../../../types/icon-picker.es.js";
|
|
11
|
+
import { getFlagComponent as $ } from "../../../utils/countryFlags.es.js";
|
|
12
12
|
import { InputLabel as j } from "../shared/InputLabel.es.js";
|
|
13
13
|
const W = Object.keys(h).filter(
|
|
14
14
|
(e) => e?.endsWith("Rounded")
|
|
15
|
-
),
|
|
15
|
+
), z = [
|
|
16
16
|
...W || [],
|
|
17
|
-
...(
|
|
18
|
-
],
|
|
17
|
+
...(T || []).map((e) => `flag-${e}`)
|
|
18
|
+
], B = (e) => {
|
|
19
19
|
if (e?.startsWith("flag-")) {
|
|
20
|
-
const
|
|
21
|
-
return
|
|
20
|
+
const n = e?.replace("flag-", "");
|
|
21
|
+
return y(n || "") || n;
|
|
22
22
|
}
|
|
23
23
|
return e.replaceAll(/([A-Z])/g, " $1").trim();
|
|
24
|
-
},
|
|
24
|
+
}, F = ({
|
|
25
25
|
onChange: e,
|
|
26
|
-
selectedIcon:
|
|
27
|
-
setOpen:
|
|
26
|
+
selectedIcon: n,
|
|
27
|
+
setOpen: f
|
|
28
28
|
}) => {
|
|
29
|
-
const [c,
|
|
29
|
+
const [c, m] = x(""), a = (z || []).filter((r) => {
|
|
30
30
|
if (r?.startsWith("flag-")) {
|
|
31
|
-
const
|
|
32
|
-
return
|
|
31
|
+
const i = r?.replace("flag-", "");
|
|
32
|
+
return i?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "") || y(i || "")?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "");
|
|
33
33
|
}
|
|
34
34
|
return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "");
|
|
35
|
-
}),
|
|
36
|
-
if (
|
|
35
|
+
}), d = (r, i) => {
|
|
36
|
+
if (i.stopPropagation(), n === r) {
|
|
37
37
|
e?.(null);
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
|
-
e?.(r),
|
|
40
|
+
e?.(r), f?.(!1);
|
|
41
41
|
};
|
|
42
42
|
return /* @__PURE__ */ b(
|
|
43
43
|
"div",
|
|
@@ -48,43 +48,43 @@ const W = Object.keys(h).filter(
|
|
|
48
48
|
},
|
|
49
49
|
children: [
|
|
50
50
|
/* @__PURE__ */ t(
|
|
51
|
-
|
|
51
|
+
O,
|
|
52
52
|
{
|
|
53
53
|
id: "input-field-icon-picker",
|
|
54
54
|
placeholder: "Search icons...",
|
|
55
|
-
onChange: (r) =>
|
|
55
|
+
onChange: (r) => m(r || ""),
|
|
56
56
|
fieldSuffix: /* @__PURE__ */ t(h.Search, { className: "!w-4 !h-4 text-neutral-400" })
|
|
57
57
|
}
|
|
58
58
|
),
|
|
59
59
|
/* @__PURE__ */ t(
|
|
60
|
-
|
|
60
|
+
R,
|
|
61
61
|
{
|
|
62
62
|
columnCount: 5,
|
|
63
|
-
rowCount: Math.ceil((
|
|
63
|
+
rowCount: Math.ceil((a?.length || 0) / 5),
|
|
64
64
|
columnWidth: 40,
|
|
65
65
|
rowHeight: 40,
|
|
66
66
|
width: 220,
|
|
67
67
|
height: 240,
|
|
68
|
-
children: ({ columnIndex: r, rowIndex:
|
|
69
|
-
const p =
|
|
70
|
-
return
|
|
71
|
-
|
|
68
|
+
children: ({ columnIndex: r, rowIndex: i, style: u }) => {
|
|
69
|
+
const p = i * 5 + r, l = a?.[p];
|
|
70
|
+
return l ? /* @__PURE__ */ t("div", { style: u, className: "p-1", children: /* @__PURE__ */ t(E, { title: B(l), placement: "bottom", children: /* @__PURE__ */ t(
|
|
71
|
+
D,
|
|
72
72
|
{
|
|
73
73
|
type: "button",
|
|
74
|
-
className:
|
|
74
|
+
className: N(
|
|
75
75
|
"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",
|
|
76
76
|
{
|
|
77
|
-
"!bg-primary-50 dark:!bg-black-800":
|
|
77
|
+
"!bg-primary-50 dark:!bg-black-800": n === l
|
|
78
78
|
}
|
|
79
79
|
),
|
|
80
|
-
onClick: (s) =>
|
|
80
|
+
onClick: (s) => d(l, s),
|
|
81
81
|
onKeyDown: (s) => {
|
|
82
82
|
s.key === "Enter" && (s.preventDefault(), s.stopPropagation());
|
|
83
83
|
},
|
|
84
84
|
children: /* @__PURE__ */ t(
|
|
85
|
-
|
|
85
|
+
C,
|
|
86
86
|
{
|
|
87
|
-
iconName:
|
|
87
|
+
iconName: l,
|
|
88
88
|
className: "!w-5 !h-5 text-neutral-900 dark:text-white"
|
|
89
89
|
}
|
|
90
90
|
)
|
|
@@ -96,65 +96,66 @@ const W = Object.keys(h).filter(
|
|
|
96
96
|
]
|
|
97
97
|
}
|
|
98
98
|
);
|
|
99
|
-
},
|
|
99
|
+
}, C = ({ iconName: e, sx: n, className: f, isHovering: c }) => {
|
|
100
100
|
if (e?.startsWith?.("flag-")) {
|
|
101
|
-
const
|
|
102
|
-
return
|
|
101
|
+
const a = e?.replace("flag-", "");
|
|
102
|
+
return $?.(a || "", c || !1) || /* @__PURE__ */ t("div", { children: "-" });
|
|
103
103
|
}
|
|
104
|
-
const
|
|
105
|
-
return
|
|
106
|
-
},
|
|
104
|
+
const m = h?.[e];
|
|
105
|
+
return m ? /* @__PURE__ */ t(m, { sx: n, className: f, isHovering: c }) : /* @__PURE__ */ t("div", { children: "-" });
|
|
106
|
+
}, A = ({
|
|
107
107
|
selectedIcon: e,
|
|
108
|
-
onChange:
|
|
109
|
-
label:
|
|
108
|
+
onChange: n,
|
|
109
|
+
label: f,
|
|
110
110
|
required: c = !1,
|
|
111
|
-
allowClear:
|
|
112
|
-
disabled:
|
|
113
|
-
errorMessage:
|
|
114
|
-
dropdownPosition: r = "bottom"
|
|
111
|
+
allowClear: m = !0,
|
|
112
|
+
disabled: a = !1,
|
|
113
|
+
errorMessage: d,
|
|
114
|
+
dropdownPosition: r = "bottom",
|
|
115
|
+
className: i
|
|
115
116
|
}) => {
|
|
116
|
-
const [
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}, [
|
|
120
|
-
const
|
|
121
|
-
o.stopPropagation(),
|
|
117
|
+
const [u, p] = x(!1), l = g(!1), s = g(null), k = g(!1);
|
|
118
|
+
S(() => {
|
|
119
|
+
k.current && !u && s.current?.focus(), k.current = u;
|
|
120
|
+
}, [u]);
|
|
121
|
+
const v = (o) => {
|
|
122
|
+
o.stopPropagation(), n?.("");
|
|
122
123
|
};
|
|
123
124
|
return /* @__PURE__ */ t(
|
|
124
|
-
|
|
125
|
+
L,
|
|
125
126
|
{
|
|
126
127
|
arrow: !1,
|
|
127
128
|
placement: r,
|
|
128
129
|
trigger: "click",
|
|
129
130
|
getPopupContainer: (o) => o?.parentElement || document.body,
|
|
130
|
-
open:
|
|
131
|
+
open: u,
|
|
131
132
|
onOpenChange: (o) => {
|
|
132
|
-
o ? (
|
|
133
|
+
o ? (l.current && p(!0), l.current = !1) : p(!1);
|
|
133
134
|
},
|
|
134
|
-
content: /* @__PURE__ */ t(
|
|
135
|
+
content: /* @__PURE__ */ t(F, { onChange: n, selectedIcon: e, setOpen: p }),
|
|
135
136
|
children: /* @__PURE__ */ b("div", { className: "flex flex-col gap-1", children: [
|
|
136
|
-
|
|
137
|
+
f ? /* @__PURE__ */ t(j, { label: f || "", required: c || !1 }) : null,
|
|
137
138
|
/* @__PURE__ */ b(
|
|
138
139
|
"button",
|
|
139
140
|
{
|
|
140
|
-
ref:
|
|
141
|
+
ref: s,
|
|
141
142
|
type: "button",
|
|
142
143
|
id: `btn-icon-picker-icon-${e ? "selected" : "unselected"}`,
|
|
143
|
-
className: `lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${
|
|
144
|
-
disabled:
|
|
144
|
+
className: `lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${a ? "cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800" : "bg-white dark:bg-black-800"} ${d ? "border-red-500" : "focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2 ${i}`,
|
|
145
|
+
disabled: a,
|
|
145
146
|
onClick: (o) => {
|
|
146
|
-
if (
|
|
147
|
+
if (a) {
|
|
147
148
|
o.preventDefault(), o.stopPropagation();
|
|
148
149
|
return;
|
|
149
150
|
}
|
|
150
|
-
o.detail > 0 && (
|
|
151
|
+
o.detail > 0 && (l.current = !0);
|
|
151
152
|
},
|
|
152
153
|
onKeyDown: (o) => {
|
|
153
|
-
o.key === "Enter" && (o.preventDefault(),
|
|
154
|
+
o.key === "Enter" && (o.preventDefault(), u || o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click());
|
|
154
155
|
},
|
|
155
156
|
children: [
|
|
156
|
-
e ? /* @__PURE__ */ t(
|
|
157
|
-
|
|
157
|
+
e ? /* @__PURE__ */ t(C, { iconName: e, className: "!w-5 !h-5 text-neutral-900 dark:text-white" }) : /* @__PURE__ */ t(
|
|
158
|
+
w,
|
|
158
159
|
{
|
|
159
160
|
size: "small",
|
|
160
161
|
variant: "regular",
|
|
@@ -162,27 +163,27 @@ const W = Object.keys(h).filter(
|
|
|
162
163
|
children: "Select Icon"
|
|
163
164
|
}
|
|
164
165
|
),
|
|
165
|
-
e &&
|
|
166
|
+
e && m && !a ? /* @__PURE__ */ t(
|
|
166
167
|
h.CloseRounded,
|
|
167
168
|
{
|
|
168
169
|
className: "!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",
|
|
169
|
-
onClick:
|
|
170
|
+
onClick: v
|
|
170
171
|
}
|
|
171
172
|
) : null
|
|
172
173
|
]
|
|
173
174
|
}
|
|
174
175
|
),
|
|
175
|
-
|
|
176
|
+
d && /* @__PURE__ */ t(w, { size: "extra-small", className: "text-red-500 font-medium", children: d })
|
|
176
177
|
] })
|
|
177
178
|
}
|
|
178
179
|
);
|
|
179
|
-
},
|
|
180
|
+
}, ee = I.lazy(
|
|
180
181
|
() => Promise.resolve({
|
|
181
|
-
default: (e) => /* @__PURE__ */ t(
|
|
182
|
+
default: (e) => /* @__PURE__ */ t(P, { fallback: /* @__PURE__ */ t("div", { className: "min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md" }), children: /* @__PURE__ */ t(A, { ...e }) })
|
|
182
183
|
})
|
|
183
184
|
);
|
|
184
185
|
export {
|
|
185
|
-
|
|
186
|
-
|
|
186
|
+
ee as IconPicker,
|
|
187
|
+
C as IconRenderer
|
|
187
188
|
};
|
|
188
189
|
//# sourceMappingURL=IconPicker.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='regular'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n className?: string\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n className\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2 ${className}`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='regular'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|