@strapi/content-type-builder 5.23.3 → 5.23.4
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/admin/components/CustomRadioGroup/Styles.js.map +1 -1
- package/dist/admin/components/CustomRadioGroup/Styles.mjs.map +1 -1
- package/dist/admin/components/Footers.js.map +1 -1
- package/dist/admin/components/Footers.mjs.map +1 -1
- package/dist/admin/components/IconPicker/IconPicker.js.map +1 -1
- package/dist/admin/components/IconPicker/IconPicker.mjs.map +1 -1
- package/dist/admin/icons/Curve.js +1 -0
- package/dist/admin/icons/Curve.js.map +1 -1
- package/dist/admin/icons/Curve.mjs +1 -0
- package/dist/admin/icons/Curve.mjs.map +1 -1
- package/dist/admin/src/icons/Curve.d.ts +2 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","sources":["../../../../admin/src/components/CustomRadioGroup/Styles.tsx"],"sourcesContent":["import { Flex, inputFocusStyle } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled(Flex)`\n position: relative;\n align-items: stretch;\n\n label {\n max-width: 50%;\n cursor: pointer;\n user-select: none;\n flex: 1;\n\n ${inputFocusStyle()}\n }\n\n input {\n position: absolute;\n opacity: 0;\n }\n\n .option {\n height: 100%;\n will-change: transform, opacity;\n background: ${({ theme }) => theme.colors.neutral0};\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-radius: ${({ theme }) => theme.borderRadius};\n\n .checkmark {\n position: relative;\n display: block;\n will-change: transform;\n background: ${({ theme }) => theme.colors.neutral0};\n width: ${({ theme }) => theme.spaces[5]};\n height: ${({ theme }) => theme.spaces[5]};\n border: solid 1px ${({ theme }) => theme.colors.neutral300};\n border-radius: 50%;\n\n &:before,\n &:after {\n content: '';\n display: block;\n border-radius: 50%;\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n position: absolute;\n top: 3px;\n left: 3px;\n }\n\n &:after {\n transform: scale(0);\n transition: inherit;\n will-change: transform;\n }\n }\n }\n\n .container input:checked ~ div {\n background: ${({ theme }) => theme.colors.primary100};\n color: ${({ theme }) => theme.colors.primary600};\n .checkmark {\n border: solid 1px ${({ theme }) => theme.colors.primary600};\n &::after {\n background: ${({ theme }) => theme.colors.primary600};\n transform: scale(1);\n }\n }\n }\n`;\n\nexport { Wrapper };\n"],"names":["Wrapper","styled","Flex","inputFocusStyle","theme","colors","neutral0","neutral200","borderRadius","spaces","neutral300","primary100","primary600"],"mappings":";;;;;AAGMA,MAAAA,OAAAA,GAAUC,uBAAOC,CAAAA,iBAAAA,CAAK;;;;;;;;;;AAUxB,IAAA,EAAEC,
|
|
1
|
+
{"version":3,"file":"Styles.js","sources":["../../../../admin/src/components/CustomRadioGroup/Styles.tsx"],"sourcesContent":["import { Flex, inputFocusStyle } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled(Flex)`\n position: relative;\n align-items: stretch;\n\n label {\n max-width: 50%;\n cursor: pointer;\n user-select: none;\n flex: 1;\n\n ${inputFocusStyle() as any}\n }\n\n input {\n position: absolute;\n opacity: 0;\n }\n\n .option {\n height: 100%;\n will-change: transform, opacity;\n background: ${({ theme }) => theme.colors.neutral0};\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-radius: ${({ theme }) => theme.borderRadius};\n\n .checkmark {\n position: relative;\n display: block;\n will-change: transform;\n background: ${({ theme }) => theme.colors.neutral0};\n width: ${({ theme }) => theme.spaces[5]};\n height: ${({ theme }) => theme.spaces[5]};\n border: solid 1px ${({ theme }) => theme.colors.neutral300};\n border-radius: 50%;\n\n &:before,\n &:after {\n content: '';\n display: block;\n border-radius: 50%;\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n position: absolute;\n top: 3px;\n left: 3px;\n }\n\n &:after {\n transform: scale(0);\n transition: inherit;\n will-change: transform;\n }\n }\n }\n\n .container input:checked ~ div {\n background: ${({ theme }) => theme.colors.primary100};\n color: ${({ theme }) => theme.colors.primary600};\n .checkmark {\n border: solid 1px ${({ theme }) => theme.colors.primary600};\n &::after {\n background: ${({ theme }) => theme.colors.primary600};\n transform: scale(1);\n }\n }\n }\n`;\n\nexport { Wrapper };\n"],"names":["Wrapper","styled","Flex","inputFocusStyle","theme","colors","neutral0","neutral200","borderRadius","spaces","neutral300","primary100","primary600"],"mappings":";;;;;AAGMA,MAAAA,OAAAA,GAAUC,uBAAOC,CAAAA,iBAAAA,CAAK;;;;;;;;;;AAUxB,IAAA,EAAEC,4BAAyB,EAAA;;;;;;;;;;;gBAWf,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,QAAQ,CAAC;sBACjC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;AAC5C,mBAAA,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;;;;;;kBAMrC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,QAAQ,CAAC;aAC5C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;cAChC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;wBACvB,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACK,UAAU,CAAC;;;;;;;;eAQlD,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;gBAChC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;;;;;gBAejC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACM,UAAU,CAAC;WAC9C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;wBAE5B,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;oBAE7C,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;;;;AAK7D;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.mjs","sources":["../../../../admin/src/components/CustomRadioGroup/Styles.tsx"],"sourcesContent":["import { Flex, inputFocusStyle } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled(Flex)`\n position: relative;\n align-items: stretch;\n\n label {\n max-width: 50%;\n cursor: pointer;\n user-select: none;\n flex: 1;\n\n ${inputFocusStyle()}\n }\n\n input {\n position: absolute;\n opacity: 0;\n }\n\n .option {\n height: 100%;\n will-change: transform, opacity;\n background: ${({ theme }) => theme.colors.neutral0};\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-radius: ${({ theme }) => theme.borderRadius};\n\n .checkmark {\n position: relative;\n display: block;\n will-change: transform;\n background: ${({ theme }) => theme.colors.neutral0};\n width: ${({ theme }) => theme.spaces[5]};\n height: ${({ theme }) => theme.spaces[5]};\n border: solid 1px ${({ theme }) => theme.colors.neutral300};\n border-radius: 50%;\n\n &:before,\n &:after {\n content: '';\n display: block;\n border-radius: 50%;\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n position: absolute;\n top: 3px;\n left: 3px;\n }\n\n &:after {\n transform: scale(0);\n transition: inherit;\n will-change: transform;\n }\n }\n }\n\n .container input:checked ~ div {\n background: ${({ theme }) => theme.colors.primary100};\n color: ${({ theme }) => theme.colors.primary600};\n .checkmark {\n border: solid 1px ${({ theme }) => theme.colors.primary600};\n &::after {\n background: ${({ theme }) => theme.colors.primary600};\n transform: scale(1);\n }\n }\n }\n`;\n\nexport { Wrapper };\n"],"names":["Wrapper","styled","Flex","inputFocusStyle","theme","colors","neutral0","neutral200","borderRadius","spaces","neutral300","primary100","primary600"],"mappings":";;;AAGMA,MAAAA,OAAAA,GAAUC,MAAOC,CAAAA,IAAAA,CAAK;;;;;;;;;;AAUxB,IAAA,EAAEC,
|
|
1
|
+
{"version":3,"file":"Styles.mjs","sources":["../../../../admin/src/components/CustomRadioGroup/Styles.tsx"],"sourcesContent":["import { Flex, inputFocusStyle } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled(Flex)`\n position: relative;\n align-items: stretch;\n\n label {\n max-width: 50%;\n cursor: pointer;\n user-select: none;\n flex: 1;\n\n ${inputFocusStyle() as any}\n }\n\n input {\n position: absolute;\n opacity: 0;\n }\n\n .option {\n height: 100%;\n will-change: transform, opacity;\n background: ${({ theme }) => theme.colors.neutral0};\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-radius: ${({ theme }) => theme.borderRadius};\n\n .checkmark {\n position: relative;\n display: block;\n will-change: transform;\n background: ${({ theme }) => theme.colors.neutral0};\n width: ${({ theme }) => theme.spaces[5]};\n height: ${({ theme }) => theme.spaces[5]};\n border: solid 1px ${({ theme }) => theme.colors.neutral300};\n border-radius: 50%;\n\n &:before,\n &:after {\n content: '';\n display: block;\n border-radius: 50%;\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n position: absolute;\n top: 3px;\n left: 3px;\n }\n\n &:after {\n transform: scale(0);\n transition: inherit;\n will-change: transform;\n }\n }\n }\n\n .container input:checked ~ div {\n background: ${({ theme }) => theme.colors.primary100};\n color: ${({ theme }) => theme.colors.primary600};\n .checkmark {\n border: solid 1px ${({ theme }) => theme.colors.primary600};\n &::after {\n background: ${({ theme }) => theme.colors.primary600};\n transform: scale(1);\n }\n }\n }\n`;\n\nexport { Wrapper };\n"],"names":["Wrapper","styled","Flex","inputFocusStyle","theme","colors","neutral0","neutral200","borderRadius","spaces","neutral300","primary100","primary600"],"mappings":";;;AAGMA,MAAAA,OAAAA,GAAUC,MAAOC,CAAAA,IAAAA,CAAK;;;;;;;;;;AAUxB,IAAA,EAAEC,eAAyB,EAAA;;;;;;;;;;;gBAWf,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,QAAQ,CAAC;sBACjC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;AAC5C,mBAAA,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;;;;;;kBAMrC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,QAAQ,CAAC;aAC5C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;cAChC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;wBACvB,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACK,UAAU,CAAC;;;;;;;;eAQlD,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;gBAChC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;;;;;gBAejC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACM,UAAU,CAAC;WAC9C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;wBAE5B,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;oBAE7C,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;;;;AAK7D;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footers.js","sources":["../../../admin/src/components/Footers.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Box, Divider, Flex, TFooterProps, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Box)`\n height: 2.4rem;\n width: 2.4rem;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n height: 1rem;\n width: 1rem;\n }\n\n svg path {\n fill: ${({ theme, color }) => theme.colors[`${color}600`]};\n }\n`;\n\nconst ButtonBox = styled(Box)`\n border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};\n display: block;\n width: 100%;\n border: none;\n position: relative;\n`;\n\ninterface NestedTFooterProps extends TFooterProps {\n color: string;\n children: ReactNode;\n icon: ReactNode;\n onClick?: () => void;\n}\n\nexport const NestedTFooter = ({ children, icon, color, ...props }: NestedTFooterProps) => {\n return (\n <ButtonBox\n paddingBottom={4}\n paddingTop={4}\n paddingLeft=\"6rem\"\n tag=\"button\"\n type=\"button\"\n {...props}\n >\n <Flex>\n <IconBox color={color} aria-hidden background={`${color}200`}>\n {icon}\n </IconBox>\n <Box paddingLeft={3}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n {children}\n </Typography>\n </Box>\n </Flex>\n </ButtonBox>\n );\n};\n\nexport const TFooter = ({ children, icon, color, ...props }: TFooterProps & { color: string }) => {\n return (\n <div>\n <Divider />\n <ButtonBox tag=\"button\" background={`${color}100`} padding={5} {...props}>\n <Flex>\n <IconBox color={color} aria-hidden background={`${color}200`}>\n {icon}\n </IconBox>\n <Box paddingLeft={3}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n {children}\n </Typography>\n </Box>\n </Flex>\n </ButtonBox>\n </div>\n );\n};\n"],"names":["IconBox","styled","Box","theme","color","colors","ButtonBox","borderRadius","NestedTFooter","children","icon","props","_jsx","paddingBottom","paddingTop","paddingLeft","tag","type","_jsxs","Flex","aria-hidden","background","Typography","variant","fontWeight","textColor","TFooter","div","Divider","padding"],"mappings":";;;;;;AAKA,MAAMA,OAAAA,GAAUC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;;;;;;;;;;AAcjB,UAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAAC,CAAC,EAAED,KAAAA,CAAM,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"Footers.js","sources":["../../../admin/src/components/Footers.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Box, Divider, Flex, TFooterProps, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Box)`\n height: 2.4rem;\n width: 2.4rem;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n height: 1rem;\n width: 1rem;\n }\n\n svg path {\n fill: ${({ theme, color }) => theme.colors[`${color}600` as keyof typeof theme.colors]};\n }\n`;\n\nconst ButtonBox = styled(Box)`\n border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};\n display: block;\n width: 100%;\n border: none;\n position: relative;\n`;\n\ninterface NestedTFooterProps extends TFooterProps {\n color: string;\n children: ReactNode;\n icon: ReactNode;\n onClick?: () => void;\n}\n\nexport const NestedTFooter = ({ children, icon, color, ...props }: NestedTFooterProps) => {\n return (\n <ButtonBox\n paddingBottom={4}\n paddingTop={4}\n paddingLeft=\"6rem\"\n tag=\"button\"\n type=\"button\"\n {...props}\n >\n <Flex>\n <IconBox color={color} aria-hidden background={`${color}200`}>\n {icon}\n </IconBox>\n <Box paddingLeft={3}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n {children}\n </Typography>\n </Box>\n </Flex>\n </ButtonBox>\n );\n};\n\nexport const TFooter = ({ children, icon, color, ...props }: TFooterProps & { color: string }) => {\n return (\n <div>\n <Divider />\n <ButtonBox tag=\"button\" background={`${color}100`} padding={5} {...props}>\n <Flex>\n <IconBox color={color} aria-hidden background={`${color}200`}>\n {icon}\n </IconBox>\n <Box paddingLeft={3}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n {children}\n </Typography>\n </Box>\n </Flex>\n </ButtonBox>\n </div>\n );\n};\n"],"names":["IconBox","styled","Box","theme","color","colors","ButtonBox","borderRadius","NestedTFooter","children","icon","props","_jsx","paddingBottom","paddingTop","paddingLeft","tag","type","_jsxs","Flex","aria-hidden","background","Typography","variant","fontWeight","textColor","TFooter","div","Divider","padding"],"mappings":";;;;;;AAKA,MAAMA,OAAAA,GAAUC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;;;;;;;;;;AAcjB,UAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAAC,CAAC,EAAED,KAAAA,CAAM,GAAG,CAAC,CAA8B,CAAC;;AAE3F,CAAC;AAED,MAAME,SAAAA,GAAYL,uBAAOC,CAAAA,gBAAAA,CAAI;AACR,qBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMI,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;;;;;AAK9F,CAAC;AASM,MAAMC,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAA2B,EAAA,GAAA;AACnF,IAAA,qBACEC,cAACN,CAAAA,SAAAA,EAAAA;QACCO,aAAe,EAAA,CAAA;QACfC,UAAY,EAAA,CAAA;QACZC,WAAY,EAAA,MAAA;QACZC,GAAI,EAAA,QAAA;QACJC,IAAK,EAAA,QAAA;AACJ,QAAA,GAAGN,KAAK;AAET,QAAA,QAAA,gBAAAO,eAACC,CAAAA,iBAAAA,EAAAA;;8BACCP,cAACZ,CAAAA,OAAAA,EAAAA;oBAAQI,KAAOA,EAAAA,KAAAA;oBAAOgB,aAAW,EAAA,IAAA;AAACC,oBAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;AACzDM,oBAAAA,QAAAA,EAAAA;;8BAEHE,cAACV,CAAAA,gBAAAA,EAAAA;oBAAIa,WAAa,EAAA,CAAA;AAChB,oBAAA,QAAA,gBAAAH,cAACU,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;AAAOC,wBAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,wBAAAA,QAAAA,EAAAA;;;;;;AAMb;AAEO,MAAMiB,OAAU,GAAA,CAAC,EAAEjB,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAAyC,EAAA,GAAA;AAC3F,IAAA,qBACEO,eAACS,CAAAA,KAAAA,EAAAA;;0BACCf,cAACgB,CAAAA,oBAAAA,EAAAA,EAAAA,CAAAA;0BACDhB,cAACN,CAAAA,SAAAA,EAAAA;gBAAUU,GAAI,EAAA,QAAA;AAASK,gBAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;gBAAEyB,OAAS,EAAA,CAAA;AAAI,gBAAA,GAAGlB,KAAK;AACtE,gBAAA,QAAA,gBAAAO,eAACC,CAAAA,iBAAAA,EAAAA;;sCACCP,cAACZ,CAAAA,OAAAA,EAAAA;4BAAQI,KAAOA,EAAAA,KAAAA;4BAAOgB,aAAW,EAAA,IAAA;AAACC,4BAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;AACzDM,4BAAAA,QAAAA,EAAAA;;sCAEHE,cAACV,CAAAA,gBAAAA,EAAAA;4BAAIa,WAAa,EAAA,CAAA;AAChB,4BAAA,QAAA,gBAAAH,cAACU,CAAAA,uBAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,UAAW,EAAA,MAAA;AAAOC,gCAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,gCAAAA,QAAAA,EAAAA;;;;;;;;AAOf;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footers.mjs","sources":["../../../admin/src/components/Footers.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Box, Divider, Flex, TFooterProps, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Box)`\n height: 2.4rem;\n width: 2.4rem;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n height: 1rem;\n width: 1rem;\n }\n\n svg path {\n fill: ${({ theme, color }) => theme.colors[`${color}600`]};\n }\n`;\n\nconst ButtonBox = styled(Box)`\n border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};\n display: block;\n width: 100%;\n border: none;\n position: relative;\n`;\n\ninterface NestedTFooterProps extends TFooterProps {\n color: string;\n children: ReactNode;\n icon: ReactNode;\n onClick?: () => void;\n}\n\nexport const NestedTFooter = ({ children, icon, color, ...props }: NestedTFooterProps) => {\n return (\n <ButtonBox\n paddingBottom={4}\n paddingTop={4}\n paddingLeft=\"6rem\"\n tag=\"button\"\n type=\"button\"\n {...props}\n >\n <Flex>\n <IconBox color={color} aria-hidden background={`${color}200`}>\n {icon}\n </IconBox>\n <Box paddingLeft={3}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n {children}\n </Typography>\n </Box>\n </Flex>\n </ButtonBox>\n );\n};\n\nexport const TFooter = ({ children, icon, color, ...props }: TFooterProps & { color: string }) => {\n return (\n <div>\n <Divider />\n <ButtonBox tag=\"button\" background={`${color}100`} padding={5} {...props}>\n <Flex>\n <IconBox color={color} aria-hidden background={`${color}200`}>\n {icon}\n </IconBox>\n <Box paddingLeft={3}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n {children}\n </Typography>\n </Box>\n </Flex>\n </ButtonBox>\n </div>\n );\n};\n"],"names":["IconBox","styled","Box","theme","color","colors","ButtonBox","borderRadius","NestedTFooter","children","icon","props","_jsx","paddingBottom","paddingTop","paddingLeft","tag","type","_jsxs","Flex","aria-hidden","background","Typography","variant","fontWeight","textColor","TFooter","div","Divider","padding"],"mappings":";;;;AAKA,MAAMA,OAAAA,GAAUC,MAAOC,CAAAA,GAAAA,CAAI;;;;;;;;;;;;;;AAcjB,UAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAAC,CAAC,EAAED,KAAAA,CAAM,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"Footers.mjs","sources":["../../../admin/src/components/Footers.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Box, Divider, Flex, TFooterProps, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Box)`\n height: 2.4rem;\n width: 2.4rem;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n height: 1rem;\n width: 1rem;\n }\n\n svg path {\n fill: ${({ theme, color }) => theme.colors[`${color}600` as keyof typeof theme.colors]};\n }\n`;\n\nconst ButtonBox = styled(Box)`\n border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};\n display: block;\n width: 100%;\n border: none;\n position: relative;\n`;\n\ninterface NestedTFooterProps extends TFooterProps {\n color: string;\n children: ReactNode;\n icon: ReactNode;\n onClick?: () => void;\n}\n\nexport const NestedTFooter = ({ children, icon, color, ...props }: NestedTFooterProps) => {\n return (\n <ButtonBox\n paddingBottom={4}\n paddingTop={4}\n paddingLeft=\"6rem\"\n tag=\"button\"\n type=\"button\"\n {...props}\n >\n <Flex>\n <IconBox color={color} aria-hidden background={`${color}200`}>\n {icon}\n </IconBox>\n <Box paddingLeft={3}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n {children}\n </Typography>\n </Box>\n </Flex>\n </ButtonBox>\n );\n};\n\nexport const TFooter = ({ children, icon, color, ...props }: TFooterProps & { color: string }) => {\n return (\n <div>\n <Divider />\n <ButtonBox tag=\"button\" background={`${color}100`} padding={5} {...props}>\n <Flex>\n <IconBox color={color} aria-hidden background={`${color}200`}>\n {icon}\n </IconBox>\n <Box paddingLeft={3}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor={`${color}600`}>\n {children}\n </Typography>\n </Box>\n </Flex>\n </ButtonBox>\n </div>\n );\n};\n"],"names":["IconBox","styled","Box","theme","color","colors","ButtonBox","borderRadius","NestedTFooter","children","icon","props","_jsx","paddingBottom","paddingTop","paddingLeft","tag","type","_jsxs","Flex","aria-hidden","background","Typography","variant","fontWeight","textColor","TFooter","div","Divider","padding"],"mappings":";;;;AAKA,MAAMA,OAAAA,GAAUC,MAAOC,CAAAA,GAAAA,CAAI;;;;;;;;;;;;;;AAcjB,UAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAAC,CAAC,EAAED,KAAAA,CAAM,GAAG,CAAC,CAA8B,CAAC;;AAE3F,CAAC;AAED,MAAME,SAAAA,GAAYL,MAAOC,CAAAA,GAAAA,CAAI;AACR,qBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMI,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;;;;;AAK9F,CAAC;AASM,MAAMC,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAA2B,EAAA,GAAA;AACnF,IAAA,qBACEC,GAACN,CAAAA,SAAAA,EAAAA;QACCO,aAAe,EAAA,CAAA;QACfC,UAAY,EAAA,CAAA;QACZC,WAAY,EAAA,MAAA;QACZC,GAAI,EAAA,QAAA;QACJC,IAAK,EAAA,QAAA;AACJ,QAAA,GAAGN,KAAK;AAET,QAAA,QAAA,gBAAAO,IAACC,CAAAA,IAAAA,EAAAA;;8BACCP,GAACZ,CAAAA,OAAAA,EAAAA;oBAAQI,KAAOA,EAAAA,KAAAA;oBAAOgB,aAAW,EAAA,IAAA;AAACC,oBAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;AACzDM,oBAAAA,QAAAA,EAAAA;;8BAEHE,GAACV,CAAAA,GAAAA,EAAAA;oBAAIa,WAAa,EAAA,CAAA;AAChB,oBAAA,QAAA,gBAAAH,GAACU,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;AAAOC,wBAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,wBAAAA,QAAAA,EAAAA;;;;;;AAMb;AAEO,MAAMiB,OAAU,GAAA,CAAC,EAAEjB,QAAQ,EAAEC,IAAI,EAAEN,KAAK,EAAE,GAAGO,KAAyC,EAAA,GAAA;AAC3F,IAAA,qBACEO,IAACS,CAAAA,KAAAA,EAAAA;;0BACCf,GAACgB,CAAAA,OAAAA,EAAAA,EAAAA,CAAAA;0BACDhB,GAACN,CAAAA,SAAAA,EAAAA;gBAAUU,GAAI,EAAA,QAAA;AAASK,gBAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;gBAAEyB,OAAS,EAAA,CAAA;AAAI,gBAAA,GAAGlB,KAAK;AACtE,gBAAA,QAAA,gBAAAO,IAACC,CAAAA,IAAAA,EAAAA;;sCACCP,GAACZ,CAAAA,OAAAA,EAAAA;4BAAQI,KAAOA,EAAAA,KAAAA;4BAAOgB,aAAW,EAAA,IAAA;AAACC,4BAAAA,UAAAA,EAAY,CAAC,EAAEjB,KAAM,CAAA,GAAG,CAAC;AACzDM,4BAAAA,QAAAA,EAAAA;;sCAEHE,GAACV,CAAAA,GAAAA,EAAAA;4BAAIa,WAAa,EAAA,CAAA;AAChB,4BAAA,QAAA,gBAAAH,GAACU,CAAAA,UAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,UAAW,EAAA,MAAA;AAAOC,gCAAAA,SAAAA,EAAW,CAAC,EAAErB,KAAM,CAAA,GAAG,CAAC;AAChEK,gCAAAA,QAAAA,EAAAA;;;;;;;;AAOf;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.js","sources":["../../../../admin/src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n Box,\n Field,\n Flex,\n IconButton,\n inputFocusStyle,\n Searchbar,\n Tooltip,\n Typography,\n VisuallyHidden,\n} from '@strapi/design-system';\nimport { Search, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nimport { COMPONENT_ICONS } from './constants';\n\nimport type { IntlLabel } from '../../types';\n\nconst IconPickerWrapper = styled(Flex)`\n label {\n ${inputFocusStyle()}\n border-radius: ${({ theme }) => theme.borderRadius};\n border: 1px solid ${({ theme }) => theme.colors.neutral100};\n }\n`;\n\ntype Icons = keyof typeof COMPONENT_ICONS;\n\ninterface IconPickProps {\n iconKey: Icons;\n name: string;\n onChange: (value: any) => void;\n isSelected: boolean;\n ariaLabel: string;\n}\n\nconst IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }: IconPickProps) => {\n const Icon = COMPONENT_ICONS[iconKey];\n\n return (\n <Field.Root name={name} required={false}>\n <Field.Label>\n <VisuallyHidden>\n {ariaLabel}\n <Field.Input\n type=\"radio\"\n checked={isSelected}\n onChange={onChange}\n value={iconKey}\n aria-checked={isSelected}\n />\n </VisuallyHidden>\n <Tooltip label={iconKey}>\n <Flex\n padding={2}\n cursor=\"pointer\"\n hasRadius\n background={isSelected ? 'primary200' : undefined}\n >\n <Icon width={'2rem'} height={'2rem'} fill={isSelected ? 'primary600' : 'neutral300'} />\n </Flex>\n </Tooltip>\n </Field.Label>\n </Field.Root>\n );\n};\n\nexport interface IconPickerProps {\n intlLabel: IntlLabel;\n name: string;\n onChange: (value: { target: { name: string; value: string } }) => void;\n value?: string;\n}\n\nexport const IconPicker = ({ intlLabel, name, onChange, value = '' }: IconPickerProps) => {\n const { formatMessage } = useIntl();\n const [showSearch, setShowSearch] = useState(false);\n const [search, setSearch] = useState('');\n const allIcons = Object.keys(COMPONENT_ICONS) as Icons[];\n const [icons, setIcons] = useState(allIcons);\n const searchIconRef = useRef(null);\n const searchBarRef = useRef(null);\n\n const toggleSearch = () => {\n setShowSearch(!showSearch);\n };\n\n const onChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n setSearch(value);\n setIcons(() => allIcons.filter((icon) => icon.toLowerCase().includes(value.toLowerCase())));\n };\n\n const onClearSearch = () => {\n toggleSearch();\n setSearch('');\n setIcons(allIcons);\n };\n\n const removeIconSelected = () => {\n onChange({ target: { name, value: '' } });\n };\n\n useEffect(() => {\n if (showSearch) {\n (searchBarRef.current as unknown as HTMLInputElement)?.focus();\n }\n }, [showSearch]);\n\n return (\n <>\n <Flex justifyContent=\"space-between\" paddingBottom={2}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"label\">\n {formatMessage(intlLabel)}\n </Typography>\n <Flex gap={1}>\n {showSearch ? (\n <Searchbar\n ref={searchBarRef}\n name=\"searchbar\"\n placeholder={formatMessage({\n id: getTrad('ComponentIconPicker.search.placeholder'),\n defaultMessage: 'Search for an icon',\n })}\n onBlur={() => {\n if (!search) {\n toggleSearch();\n }\n }}\n onChange={onChangeSearch}\n value={search}\n onClear={onClearSearch}\n clearLabel={formatMessage({\n id: getTrad('IconPicker.search.clear.label'),\n defaultMessage: 'Clear the icon search',\n })}\n >\n {formatMessage({\n id: getTrad('IconPicker.search.placeholder.label'),\n defaultMessage: 'Search for an icon',\n })}\n </Searchbar>\n ) : (\n <IconButton\n ref={searchIconRef}\n onClick={toggleSearch}\n withTooltip={false}\n label={formatMessage({\n id: getTrad('IconPicker.search.button.label'),\n defaultMessage: 'Search icon button',\n })}\n variant=\"ghost\"\n >\n <Search />\n </IconButton>\n )}\n {value && (\n <Tooltip\n label={formatMessage({\n id: getTrad('IconPicker.remove.tooltip'),\n defaultMessage: 'Remove the selected icon',\n })}\n >\n <IconButton\n onClick={removeIconSelected}\n withTooltip={false}\n label={formatMessage({\n id: getTrad('IconPicker.remove.button'),\n defaultMessage: 'Remove the selected icon',\n })}\n variant=\"ghost\"\n >\n <Trash />\n </IconButton>\n </Tooltip>\n )}\n </Flex>\n </Flex>\n <IconPickerWrapper\n position=\"relative\"\n padding={1}\n background=\"neutral100\"\n hasRadius\n wrap=\"wrap\"\n gap={2}\n maxHeight=\"126px\"\n overflow=\"auto\"\n textAlign=\"center\"\n >\n {icons.length > 0 ? (\n icons.map((iconKey) => (\n <IconPick\n key={iconKey}\n iconKey={iconKey}\n name={name}\n onChange={onChange}\n isSelected={iconKey === value}\n ariaLabel={formatMessage(\n {\n id: getTrad('IconPicker.icon.label'),\n defaultMessage: 'Select {icon} icon',\n },\n { icon: iconKey }\n )}\n />\n ))\n ) : (\n <Box padding={4} grow={2}>\n <Typography variant=\"delta\" textColor=\"neutral600\" textAlign=\"center\">\n {formatMessage({\n id: getTrad('IconPicker.emptyState.label'),\n defaultMessage: 'No icon found',\n })}\n </Typography>\n </Box>\n )}\n </IconPickerWrapper>\n </>\n );\n};\n"],"names":["IconPickerWrapper","styled","Flex","inputFocusStyle","theme","borderRadius","colors","neutral100","IconPick","iconKey","name","onChange","isSelected","ariaLabel","Icon","COMPONENT_ICONS","_jsx","Field","Root","required","_jsxs","Label","VisuallyHidden","Input","type","checked","value","aria-checked","Tooltip","label","padding","cursor","hasRadius","background","undefined","width","height","fill","IconPicker","intlLabel","formatMessage","useIntl","showSearch","setShowSearch","useState","search","setSearch","allIcons","Object","keys","icons","setIcons","searchIconRef","useRef","searchBarRef","toggleSearch","onChangeSearch","target","filter","icon","toLowerCase","includes","onClearSearch","removeIconSelected","useEffect","current","focus","_Fragment","justifyContent","paddingBottom","Typography","variant","fontWeight","textColor","tag","gap","Searchbar","ref","placeholder","id","getTrad","defaultMessage","onBlur","onClear","clearLabel","IconButton","onClick","withTooltip","Search","Trash","position","wrap","maxHeight","overflow","textAlign","length","map","Box","grow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IconPicker.js","sources":["../../../../admin/src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n Box,\n Field,\n Flex,\n IconButton,\n inputFocusStyle,\n Searchbar,\n Tooltip,\n Typography,\n VisuallyHidden,\n} from '@strapi/design-system';\nimport { Search, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nimport { COMPONENT_ICONS } from './constants';\n\nimport type { IntlLabel } from '../../types';\n\nconst IconPickerWrapper = styled(Flex)`\n label {\n ${inputFocusStyle() as any}\n border-radius: ${({ theme }) => theme.borderRadius};\n border: 1px solid ${({ theme }) => theme.colors.neutral100};\n }\n`;\n\ntype Icons = keyof typeof COMPONENT_ICONS;\n\ninterface IconPickProps {\n iconKey: Icons;\n name: string;\n onChange: (value: any) => void;\n isSelected: boolean;\n ariaLabel: string;\n}\n\nconst IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }: IconPickProps) => {\n const Icon = COMPONENT_ICONS[iconKey];\n\n return (\n <Field.Root name={name} required={false}>\n <Field.Label>\n <VisuallyHidden>\n {ariaLabel}\n <Field.Input\n type=\"radio\"\n checked={isSelected}\n onChange={onChange}\n value={iconKey}\n aria-checked={isSelected}\n />\n </VisuallyHidden>\n <Tooltip label={iconKey}>\n <Flex\n padding={2}\n cursor=\"pointer\"\n hasRadius\n background={isSelected ? 'primary200' : undefined}\n >\n <Icon width={'2rem'} height={'2rem'} fill={isSelected ? 'primary600' : 'neutral300'} />\n </Flex>\n </Tooltip>\n </Field.Label>\n </Field.Root>\n );\n};\n\nexport interface IconPickerProps {\n intlLabel: IntlLabel;\n name: string;\n onChange: (value: { target: { name: string; value: string } }) => void;\n value?: string;\n}\n\nexport const IconPicker = ({ intlLabel, name, onChange, value = '' }: IconPickerProps) => {\n const { formatMessage } = useIntl();\n const [showSearch, setShowSearch] = useState(false);\n const [search, setSearch] = useState('');\n const allIcons = Object.keys(COMPONENT_ICONS) as Icons[];\n const [icons, setIcons] = useState(allIcons);\n const searchIconRef = useRef(null);\n const searchBarRef = useRef(null);\n\n const toggleSearch = () => {\n setShowSearch(!showSearch);\n };\n\n const onChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n setSearch(value);\n setIcons(() => allIcons.filter((icon) => icon.toLowerCase().includes(value.toLowerCase())));\n };\n\n const onClearSearch = () => {\n toggleSearch();\n setSearch('');\n setIcons(allIcons);\n };\n\n const removeIconSelected = () => {\n onChange({ target: { name, value: '' } });\n };\n\n useEffect(() => {\n if (showSearch) {\n (searchBarRef.current as unknown as HTMLInputElement)?.focus();\n }\n }, [showSearch]);\n\n return (\n <>\n <Flex justifyContent=\"space-between\" paddingBottom={2}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"label\">\n {formatMessage(intlLabel)}\n </Typography>\n <Flex gap={1}>\n {showSearch ? (\n <Searchbar\n ref={searchBarRef}\n name=\"searchbar\"\n placeholder={formatMessage({\n id: getTrad('ComponentIconPicker.search.placeholder'),\n defaultMessage: 'Search for an icon',\n })}\n onBlur={() => {\n if (!search) {\n toggleSearch();\n }\n }}\n onChange={onChangeSearch}\n value={search}\n onClear={onClearSearch}\n clearLabel={formatMessage({\n id: getTrad('IconPicker.search.clear.label'),\n defaultMessage: 'Clear the icon search',\n })}\n >\n {formatMessage({\n id: getTrad('IconPicker.search.placeholder.label'),\n defaultMessage: 'Search for an icon',\n })}\n </Searchbar>\n ) : (\n <IconButton\n ref={searchIconRef}\n onClick={toggleSearch}\n withTooltip={false}\n label={formatMessage({\n id: getTrad('IconPicker.search.button.label'),\n defaultMessage: 'Search icon button',\n })}\n variant=\"ghost\"\n >\n <Search />\n </IconButton>\n )}\n {value && (\n <Tooltip\n label={formatMessage({\n id: getTrad('IconPicker.remove.tooltip'),\n defaultMessage: 'Remove the selected icon',\n })}\n >\n <IconButton\n onClick={removeIconSelected}\n withTooltip={false}\n label={formatMessage({\n id: getTrad('IconPicker.remove.button'),\n defaultMessage: 'Remove the selected icon',\n })}\n variant=\"ghost\"\n >\n <Trash />\n </IconButton>\n </Tooltip>\n )}\n </Flex>\n </Flex>\n <IconPickerWrapper\n position=\"relative\"\n padding={1}\n background=\"neutral100\"\n hasRadius\n wrap=\"wrap\"\n gap={2}\n maxHeight=\"126px\"\n overflow=\"auto\"\n textAlign=\"center\"\n >\n {icons.length > 0 ? (\n icons.map((iconKey) => (\n <IconPick\n key={iconKey}\n iconKey={iconKey}\n name={name}\n onChange={onChange}\n isSelected={iconKey === value}\n ariaLabel={formatMessage(\n {\n id: getTrad('IconPicker.icon.label'),\n defaultMessage: 'Select {icon} icon',\n },\n { icon: iconKey }\n )}\n />\n ))\n ) : (\n <Box padding={4} grow={2}>\n <Typography variant=\"delta\" textColor=\"neutral600\" textAlign=\"center\">\n {formatMessage({\n id: getTrad('IconPicker.emptyState.label'),\n defaultMessage: 'No icon found',\n })}\n </Typography>\n </Box>\n )}\n </IconPickerWrapper>\n </>\n );\n};\n"],"names":["IconPickerWrapper","styled","Flex","inputFocusStyle","theme","borderRadius","colors","neutral100","IconPick","iconKey","name","onChange","isSelected","ariaLabel","Icon","COMPONENT_ICONS","_jsx","Field","Root","required","_jsxs","Label","VisuallyHidden","Input","type","checked","value","aria-checked","Tooltip","label","padding","cursor","hasRadius","background","undefined","width","height","fill","IconPicker","intlLabel","formatMessage","useIntl","showSearch","setShowSearch","useState","search","setSearch","allIcons","Object","keys","icons","setIcons","searchIconRef","useRef","searchBarRef","toggleSearch","onChangeSearch","target","filter","icon","toLowerCase","includes","onClearSearch","removeIconSelected","useEffect","current","focus","_Fragment","justifyContent","paddingBottom","Typography","variant","fontWeight","textColor","tag","gap","Searchbar","ref","placeholder","id","getTrad","defaultMessage","onBlur","onClear","clearLabel","IconButton","onClick","withTooltip","Search","Trash","position","wrap","maxHeight","overflow","textAlign","length","map","Box","grow"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,iBAAAA,GAAoBC,uBAAOC,CAAAA,iBAAAA,CAAK;;AAElC,IAAA,EAAEC,4BAAyB,EAAA;AACZ,mBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;sBACjC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE/D,CAAC;AAYD,MAAMC,QAAW,GAAA,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAiB,GAAA;IACjF,MAAMC,IAAAA,GAAOC,yBAAe,CAACN,OAAQ,CAAA;IAErC,qBACEO,cAAA,CAACC,mBAAMC,IAAI,EAAA;QAACR,IAAMA,EAAAA,IAAAA;QAAMS,QAAU,EAAA,KAAA;gCAChCC,eAAA,CAACH,mBAAMI,KAAK,EAAA;;8BACVD,eAACE,CAAAA,2BAAAA,EAAAA;;AACET,wBAAAA,SAAAA;AACD,sCAAAG,cAAA,CAACC,mBAAMM,KAAK,EAAA;4BACVC,IAAK,EAAA,OAAA;4BACLC,OAASb,EAAAA,UAAAA;4BACTD,QAAUA,EAAAA,QAAAA;4BACVe,KAAOjB,EAAAA,OAAAA;4BACPkB,cAAcf,EAAAA;;;;8BAGlBI,cAACY,CAAAA,oBAAAA,EAAAA;oBAAQC,KAAOpB,EAAAA,OAAAA;AACd,oBAAA,QAAA,gBAAAO,cAACd,CAAAA,iBAAAA,EAAAA;wBACC4B,OAAS,EAAA,CAAA;wBACTC,MAAO,EAAA,SAAA;wBACPC,SAAS,EAAA,IAAA;AACTC,wBAAAA,UAAAA,EAAYrB,aAAa,YAAesB,GAAAA,SAAAA;AAExC,wBAAA,QAAA,gBAAAlB,cAACF,CAAAA,IAAAA,EAAAA;4BAAKqB,KAAO,EAAA,MAAA;4BAAQC,MAAQ,EAAA,MAAA;AAAQC,4BAAAA,IAAAA,EAAMzB,aAAa,YAAe,GAAA;;;;;;;AAMnF,CAAA;AASa0B,MAAAA,UAAAA,GAAa,CAAC,EAAEC,SAAS,EAAE7B,IAAI,EAAEC,QAAQ,EAAEe,KAAQ,GAAA,EAAE,EAAmB,GAAA;IACnF,MAAM,EAAEc,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAc,CAAA,GAAGC,cAAS,CAAA,KAAA,CAAA;AAC7C,IAAA,MAAM,CAACC,MAAAA,EAAQC,SAAU,CAAA,GAAGF,cAAS,CAAA,EAAA,CAAA;IACrC,MAAMG,QAAAA,GAAWC,MAAOC,CAAAA,IAAI,CAAClC,yBAAAA,CAAAA;AAC7B,IAAA,MAAM,CAACmC,KAAAA,EAAOC,QAAS,CAAA,GAAGP,cAASG,CAAAA,QAAAA,CAAAA;AACnC,IAAA,MAAMK,gBAAgBC,YAAO,CAAA,IAAA,CAAA;AAC7B,IAAA,MAAMC,eAAeD,YAAO,CAAA,IAAA,CAAA;AAE5B,IAAA,MAAME,YAAe,GAAA,IAAA;AACnBZ,QAAAA,aAAAA,CAAc,CAACD,UAAAA,CAAAA;AACjB,KAAA;AAEA,IAAA,MAAMc,iBAAiB,CAAC,EAAEC,QAAQ,EAAE/B,KAAK,EAAE,EAAiC,GAAA;QAC1EoB,SAAUpB,CAAAA,KAAAA,CAAAA;AACVyB,QAAAA,QAAAA,CAAS,IAAMJ,QAAAA,CAASW,MAAM,CAAC,CAACC,IAAAA,GAASA,IAAKC,CAAAA,WAAW,EAAGC,CAAAA,QAAQ,CAACnC,KAAAA,CAAMkC,WAAW,EAAA,CAAA,CAAA,CAAA;AACxF,KAAA;AAEA,IAAA,MAAME,aAAgB,GAAA,IAAA;AACpBP,QAAAA,YAAAA,EAAAA;QACAT,SAAU,CAAA,EAAA,CAAA;QACVK,QAASJ,CAAAA,QAAAA,CAAAA;AACX,KAAA;AAEA,IAAA,MAAMgB,kBAAqB,GAAA,IAAA;QACzBpD,QAAS,CAAA;YAAE8C,MAAQ,EAAA;AAAE/C,gBAAAA,IAAAA;gBAAMgB,KAAO,EAAA;AAAG;AAAE,SAAA,CAAA;AACzC,KAAA;IAEAsC,eAAU,CAAA,IAAA;AACR,QAAA,IAAItB,UAAY,EAAA;AACbY,YAAAA,YAAAA,CAAaW,OAAO,EAAkCC,KAAAA,EAAAA;AACzD;KACC,EAAA;AAACxB,QAAAA;AAAW,KAAA,CAAA;IAEf,qBACEtB,eAAA,CAAA+C,mBAAA,EAAA;;0BACE/C,eAAClB,CAAAA,iBAAAA,EAAAA;gBAAKkE,cAAe,EAAA,eAAA;gBAAgBC,aAAe,EAAA,CAAA;;kCAClDrD,cAACsD,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;wBAAOC,SAAU,EAAA,YAAA;wBAAaC,GAAI,EAAA,OAAA;kCACnElC,aAAcD,CAAAA,SAAAA;;kCAEjBnB,eAAClB,CAAAA,iBAAAA,EAAAA;wBAAKyE,GAAK,EAAA,CAAA;;AACRjC,4BAAAA,UAAAA,iBACC1B,cAAC4D,CAAAA,sBAAAA,EAAAA;gCACCC,GAAKvB,EAAAA,YAAAA;gCACL5C,IAAK,EAAA,WAAA;AACLoE,gCAAAA,WAAAA,EAAatC,aAAc,CAAA;AACzBuC,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,wCAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAC,MAAQ,EAAA,IAAA;AACN,oCAAA,IAAI,CAACrC,MAAQ,EAAA;AACXU,wCAAAA,YAAAA,EAAAA;AACF;AACF,iCAAA;gCACA5C,QAAU6C,EAAAA,cAAAA;gCACV9B,KAAOmB,EAAAA,MAAAA;gCACPsC,OAASrB,EAAAA,aAAAA;AACTsB,gCAAAA,UAAAA,EAAY5C,aAAc,CAAA;AACxBuC,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,+BAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;0CAECzC,aAAc,CAAA;AACbuC,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,qCAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA;+CAGFjE,cAACqE,CAAAA,uBAAAA,EAAAA;gCACCR,GAAKzB,EAAAA,aAAAA;gCACLkC,OAAS/B,EAAAA,YAAAA;gCACTgC,WAAa,EAAA,KAAA;AACb1D,gCAAAA,KAAAA,EAAOW,aAAc,CAAA;AACnBuC,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,gCAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAV,OAAQ,EAAA,OAAA;AAER,gCAAA,QAAA,gBAAAvD,cAACwE,CAAAA,YAAAA,EAAAA,EAAAA;;AAGJ9D,4BAAAA,KAAAA,kBACCV,cAACY,CAAAA,oBAAAA,EAAAA;AACCC,gCAAAA,KAAAA,EAAOW,aAAc,CAAA;AACnBuC,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,2BAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;AAEA,gCAAA,QAAA,gBAAAjE,cAACqE,CAAAA,uBAAAA,EAAAA;oCACCC,OAASvB,EAAAA,kBAAAA;oCACTwB,WAAa,EAAA,KAAA;AACb1D,oCAAAA,KAAAA,EAAOW,aAAc,CAAA;AACnBuC,wCAAAA,EAAAA,EAAIC,eAAQ,CAAA,0BAAA,CAAA;wCACZC,cAAgB,EAAA;AAClB,qCAAA,CAAA;oCACAV,OAAQ,EAAA,OAAA;AAER,oCAAA,QAAA,gBAAAvD,cAACyE,CAAAA,WAAAA,EAAAA,EAAAA;;;;;;;0BAMXzE,cAAChB,CAAAA,iBAAAA,EAAAA;gBACC0F,QAAS,EAAA,UAAA;gBACT5D,OAAS,EAAA,CAAA;gBACTG,UAAW,EAAA,YAAA;gBACXD,SAAS,EAAA,IAAA;gBACT2D,IAAK,EAAA,MAAA;gBACLhB,GAAK,EAAA,CAAA;gBACLiB,SAAU,EAAA,OAAA;gBACVC,QAAS,EAAA,MAAA;gBACTC,SAAU,EAAA,QAAA;0BAET5C,KAAM6C,CAAAA,MAAM,GAAG,CACd7C,GAAAA,KAAAA,CAAM8C,GAAG,CAAC,CAACvF,wBACTO,cAACR,CAAAA,QAAAA,EAAAA;wBAECC,OAASA,EAAAA,OAAAA;wBACTC,IAAMA,EAAAA,IAAAA;wBACNC,QAAUA,EAAAA,QAAAA;AACVC,wBAAAA,UAAAA,EAAYH,OAAYiB,KAAAA,KAAAA;AACxBb,wBAAAA,SAAAA,EAAW2B,aACT,CAAA;AACEuC,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,uBAAA,CAAA;4BACZC,cAAgB,EAAA;yBAElB,EAAA;4BAAEtB,IAAMlD,EAAAA;AAAQ,yBAAA;AAVbA,qBAAAA,EAAAA,OAAAA,CAAAA,CAAAA,iBAeTO,cAACiF,CAAAA,gBAAAA,EAAAA;oBAAInE,OAAS,EAAA,CAAA;oBAAGoE,IAAM,EAAA,CAAA;AACrB,oBAAA,QAAA,gBAAAlF,cAACsD,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,OAAA;wBAAQE,SAAU,EAAA,YAAA;wBAAaqB,SAAU,EAAA,QAAA;kCAC1DtD,aAAc,CAAA;AACbuC,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,6BAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA;;;;;;AAOd;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.mjs","sources":["../../../../admin/src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n Box,\n Field,\n Flex,\n IconButton,\n inputFocusStyle,\n Searchbar,\n Tooltip,\n Typography,\n VisuallyHidden,\n} from '@strapi/design-system';\nimport { Search, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nimport { COMPONENT_ICONS } from './constants';\n\nimport type { IntlLabel } from '../../types';\n\nconst IconPickerWrapper = styled(Flex)`\n label {\n ${inputFocusStyle()}\n border-radius: ${({ theme }) => theme.borderRadius};\n border: 1px solid ${({ theme }) => theme.colors.neutral100};\n }\n`;\n\ntype Icons = keyof typeof COMPONENT_ICONS;\n\ninterface IconPickProps {\n iconKey: Icons;\n name: string;\n onChange: (value: any) => void;\n isSelected: boolean;\n ariaLabel: string;\n}\n\nconst IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }: IconPickProps) => {\n const Icon = COMPONENT_ICONS[iconKey];\n\n return (\n <Field.Root name={name} required={false}>\n <Field.Label>\n <VisuallyHidden>\n {ariaLabel}\n <Field.Input\n type=\"radio\"\n checked={isSelected}\n onChange={onChange}\n value={iconKey}\n aria-checked={isSelected}\n />\n </VisuallyHidden>\n <Tooltip label={iconKey}>\n <Flex\n padding={2}\n cursor=\"pointer\"\n hasRadius\n background={isSelected ? 'primary200' : undefined}\n >\n <Icon width={'2rem'} height={'2rem'} fill={isSelected ? 'primary600' : 'neutral300'} />\n </Flex>\n </Tooltip>\n </Field.Label>\n </Field.Root>\n );\n};\n\nexport interface IconPickerProps {\n intlLabel: IntlLabel;\n name: string;\n onChange: (value: { target: { name: string; value: string } }) => void;\n value?: string;\n}\n\nexport const IconPicker = ({ intlLabel, name, onChange, value = '' }: IconPickerProps) => {\n const { formatMessage } = useIntl();\n const [showSearch, setShowSearch] = useState(false);\n const [search, setSearch] = useState('');\n const allIcons = Object.keys(COMPONENT_ICONS) as Icons[];\n const [icons, setIcons] = useState(allIcons);\n const searchIconRef = useRef(null);\n const searchBarRef = useRef(null);\n\n const toggleSearch = () => {\n setShowSearch(!showSearch);\n };\n\n const onChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n setSearch(value);\n setIcons(() => allIcons.filter((icon) => icon.toLowerCase().includes(value.toLowerCase())));\n };\n\n const onClearSearch = () => {\n toggleSearch();\n setSearch('');\n setIcons(allIcons);\n };\n\n const removeIconSelected = () => {\n onChange({ target: { name, value: '' } });\n };\n\n useEffect(() => {\n if (showSearch) {\n (searchBarRef.current as unknown as HTMLInputElement)?.focus();\n }\n }, [showSearch]);\n\n return (\n <>\n <Flex justifyContent=\"space-between\" paddingBottom={2}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"label\">\n {formatMessage(intlLabel)}\n </Typography>\n <Flex gap={1}>\n {showSearch ? (\n <Searchbar\n ref={searchBarRef}\n name=\"searchbar\"\n placeholder={formatMessage({\n id: getTrad('ComponentIconPicker.search.placeholder'),\n defaultMessage: 'Search for an icon',\n })}\n onBlur={() => {\n if (!search) {\n toggleSearch();\n }\n }}\n onChange={onChangeSearch}\n value={search}\n onClear={onClearSearch}\n clearLabel={formatMessage({\n id: getTrad('IconPicker.search.clear.label'),\n defaultMessage: 'Clear the icon search',\n })}\n >\n {formatMessage({\n id: getTrad('IconPicker.search.placeholder.label'),\n defaultMessage: 'Search for an icon',\n })}\n </Searchbar>\n ) : (\n <IconButton\n ref={searchIconRef}\n onClick={toggleSearch}\n withTooltip={false}\n label={formatMessage({\n id: getTrad('IconPicker.search.button.label'),\n defaultMessage: 'Search icon button',\n })}\n variant=\"ghost\"\n >\n <Search />\n </IconButton>\n )}\n {value && (\n <Tooltip\n label={formatMessage({\n id: getTrad('IconPicker.remove.tooltip'),\n defaultMessage: 'Remove the selected icon',\n })}\n >\n <IconButton\n onClick={removeIconSelected}\n withTooltip={false}\n label={formatMessage({\n id: getTrad('IconPicker.remove.button'),\n defaultMessage: 'Remove the selected icon',\n })}\n variant=\"ghost\"\n >\n <Trash />\n </IconButton>\n </Tooltip>\n )}\n </Flex>\n </Flex>\n <IconPickerWrapper\n position=\"relative\"\n padding={1}\n background=\"neutral100\"\n hasRadius\n wrap=\"wrap\"\n gap={2}\n maxHeight=\"126px\"\n overflow=\"auto\"\n textAlign=\"center\"\n >\n {icons.length > 0 ? (\n icons.map((iconKey) => (\n <IconPick\n key={iconKey}\n iconKey={iconKey}\n name={name}\n onChange={onChange}\n isSelected={iconKey === value}\n ariaLabel={formatMessage(\n {\n id: getTrad('IconPicker.icon.label'),\n defaultMessage: 'Select {icon} icon',\n },\n { icon: iconKey }\n )}\n />\n ))\n ) : (\n <Box padding={4} grow={2}>\n <Typography variant=\"delta\" textColor=\"neutral600\" textAlign=\"center\">\n {formatMessage({\n id: getTrad('IconPicker.emptyState.label'),\n defaultMessage: 'No icon found',\n })}\n </Typography>\n </Box>\n )}\n </IconPickerWrapper>\n </>\n );\n};\n"],"names":["IconPickerWrapper","styled","Flex","inputFocusStyle","theme","borderRadius","colors","neutral100","IconPick","iconKey","name","onChange","isSelected","ariaLabel","Icon","COMPONENT_ICONS","_jsx","Field","Root","required","_jsxs","Label","VisuallyHidden","Input","type","checked","value","aria-checked","Tooltip","label","padding","cursor","hasRadius","background","undefined","width","height","fill","IconPicker","intlLabel","formatMessage","useIntl","showSearch","setShowSearch","useState","search","setSearch","allIcons","Object","keys","icons","setIcons","searchIconRef","useRef","searchBarRef","toggleSearch","onChangeSearch","target","filter","icon","toLowerCase","includes","onClearSearch","removeIconSelected","useEffect","current","focus","_Fragment","justifyContent","paddingBottom","Typography","variant","fontWeight","textColor","tag","gap","Searchbar","ref","placeholder","id","getTrad","defaultMessage","onBlur","onClear","clearLabel","IconButton","onClick","withTooltip","Search","Trash","position","wrap","maxHeight","overflow","textAlign","length","map","Box","grow"],"mappings":";;;;;;;;;AAuBA,MAAMA,iBAAAA,GAAoBC,MAAOC,CAAAA,IAAAA,CAAK;;AAElC,IAAA,EAAEC,eAAkB,EAAA;AACL,mBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;sBACjC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE/D,CAAC;AAYD,MAAMC,QAAW,GAAA,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAiB,GAAA;IACjF,MAAMC,IAAAA,GAAOC,eAAe,CAACN,OAAQ,CAAA;IAErC,qBACEO,GAAA,CAACC,MAAMC,IAAI,EAAA;QAACR,IAAMA,EAAAA,IAAAA;QAAMS,QAAU,EAAA,KAAA;gCAChCC,IAAA,CAACH,MAAMI,KAAK,EAAA;;8BACVD,IAACE,CAAAA,cAAAA,EAAAA;;AACET,wBAAAA,SAAAA;AACD,sCAAAG,GAAA,CAACC,MAAMM,KAAK,EAAA;4BACVC,IAAK,EAAA,OAAA;4BACLC,OAASb,EAAAA,UAAAA;4BACTD,QAAUA,EAAAA,QAAAA;4BACVe,KAAOjB,EAAAA,OAAAA;4BACPkB,cAAcf,EAAAA;;;;8BAGlBI,GAACY,CAAAA,OAAAA,EAAAA;oBAAQC,KAAOpB,EAAAA,OAAAA;AACd,oBAAA,QAAA,gBAAAO,GAACd,CAAAA,IAAAA,EAAAA;wBACC4B,OAAS,EAAA,CAAA;wBACTC,MAAO,EAAA,SAAA;wBACPC,SAAS,EAAA,IAAA;AACTC,wBAAAA,UAAAA,EAAYrB,aAAa,YAAesB,GAAAA,SAAAA;AAExC,wBAAA,QAAA,gBAAAlB,GAACF,CAAAA,IAAAA,EAAAA;4BAAKqB,KAAO,EAAA,MAAA;4BAAQC,MAAQ,EAAA,MAAA;AAAQC,4BAAAA,IAAAA,EAAMzB,aAAa,YAAe,GAAA;;;;;;;AAMnF,CAAA;AASa0B,MAAAA,UAAAA,GAAa,CAAC,EAAEC,SAAS,EAAE7B,IAAI,EAAEC,QAAQ,EAAEe,KAAQ,GAAA,EAAE,EAAmB,GAAA;IACnF,MAAM,EAAEc,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAc,CAAA,GAAGC,QAAS,CAAA,KAAA,CAAA;AAC7C,IAAA,MAAM,CAACC,MAAAA,EAAQC,SAAU,CAAA,GAAGF,QAAS,CAAA,EAAA,CAAA;IACrC,MAAMG,QAAAA,GAAWC,MAAOC,CAAAA,IAAI,CAAClC,eAAAA,CAAAA;AAC7B,IAAA,MAAM,CAACmC,KAAAA,EAAOC,QAAS,CAAA,GAAGP,QAASG,CAAAA,QAAAA,CAAAA;AACnC,IAAA,MAAMK,gBAAgBC,MAAO,CAAA,IAAA,CAAA;AAC7B,IAAA,MAAMC,eAAeD,MAAO,CAAA,IAAA,CAAA;AAE5B,IAAA,MAAME,YAAe,GAAA,IAAA;AACnBZ,QAAAA,aAAAA,CAAc,CAACD,UAAAA,CAAAA;AACjB,KAAA;AAEA,IAAA,MAAMc,iBAAiB,CAAC,EAAEC,QAAQ,EAAE/B,KAAK,EAAE,EAAiC,GAAA;QAC1EoB,SAAUpB,CAAAA,KAAAA,CAAAA;AACVyB,QAAAA,QAAAA,CAAS,IAAMJ,QAAAA,CAASW,MAAM,CAAC,CAACC,IAAAA,GAASA,IAAKC,CAAAA,WAAW,EAAGC,CAAAA,QAAQ,CAACnC,KAAAA,CAAMkC,WAAW,EAAA,CAAA,CAAA,CAAA;AACxF,KAAA;AAEA,IAAA,MAAME,aAAgB,GAAA,IAAA;AACpBP,QAAAA,YAAAA,EAAAA;QACAT,SAAU,CAAA,EAAA,CAAA;QACVK,QAASJ,CAAAA,QAAAA,CAAAA;AACX,KAAA;AAEA,IAAA,MAAMgB,kBAAqB,GAAA,IAAA;QACzBpD,QAAS,CAAA;YAAE8C,MAAQ,EAAA;AAAE/C,gBAAAA,IAAAA;gBAAMgB,KAAO,EAAA;AAAG;AAAE,SAAA,CAAA;AACzC,KAAA;IAEAsC,SAAU,CAAA,IAAA;AACR,QAAA,IAAItB,UAAY,EAAA;AACbY,YAAAA,YAAAA,CAAaW,OAAO,EAAkCC,KAAAA,EAAAA;AACzD;KACC,EAAA;AAACxB,QAAAA;AAAW,KAAA,CAAA;IAEf,qBACEtB,IAAA,CAAA+C,QAAA,EAAA;;0BACE/C,IAAClB,CAAAA,IAAAA,EAAAA;gBAAKkE,cAAe,EAAA,eAAA;gBAAgBC,aAAe,EAAA,CAAA;;kCAClDrD,GAACsD,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;wBAAOC,SAAU,EAAA,YAAA;wBAAaC,GAAI,EAAA,OAAA;kCACnElC,aAAcD,CAAAA,SAAAA;;kCAEjBnB,IAAClB,CAAAA,IAAAA,EAAAA;wBAAKyE,GAAK,EAAA,CAAA;;AACRjC,4BAAAA,UAAAA,iBACC1B,GAAC4D,CAAAA,SAAAA,EAAAA;gCACCC,GAAKvB,EAAAA,YAAAA;gCACL5C,IAAK,EAAA,WAAA;AACLoE,gCAAAA,WAAAA,EAAatC,aAAc,CAAA;AACzBuC,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,wCAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAC,MAAQ,EAAA,IAAA;AACN,oCAAA,IAAI,CAACrC,MAAQ,EAAA;AACXU,wCAAAA,YAAAA,EAAAA;AACF;AACF,iCAAA;gCACA5C,QAAU6C,EAAAA,cAAAA;gCACV9B,KAAOmB,EAAAA,MAAAA;gCACPsC,OAASrB,EAAAA,aAAAA;AACTsB,gCAAAA,UAAAA,EAAY5C,aAAc,CAAA;AACxBuC,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,+BAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;0CAECzC,aAAc,CAAA;AACbuC,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,qCAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA;+CAGFjE,GAACqE,CAAAA,UAAAA,EAAAA;gCACCR,GAAKzB,EAAAA,aAAAA;gCACLkC,OAAS/B,EAAAA,YAAAA;gCACTgC,WAAa,EAAA,KAAA;AACb1D,gCAAAA,KAAAA,EAAOW,aAAc,CAAA;AACnBuC,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,gCAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAV,OAAQ,EAAA,OAAA;AAER,gCAAA,QAAA,gBAAAvD,GAACwE,CAAAA,MAAAA,EAAAA,EAAAA;;AAGJ9D,4BAAAA,KAAAA,kBACCV,GAACY,CAAAA,OAAAA,EAAAA;AACCC,gCAAAA,KAAAA,EAAOW,aAAc,CAAA;AACnBuC,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,2BAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;AAEA,gCAAA,QAAA,gBAAAjE,GAACqE,CAAAA,UAAAA,EAAAA;oCACCC,OAASvB,EAAAA,kBAAAA;oCACTwB,WAAa,EAAA,KAAA;AACb1D,oCAAAA,KAAAA,EAAOW,aAAc,CAAA;AACnBuC,wCAAAA,EAAAA,EAAIC,OAAQ,CAAA,0BAAA,CAAA;wCACZC,cAAgB,EAAA;AAClB,qCAAA,CAAA;oCACAV,OAAQ,EAAA,OAAA;AAER,oCAAA,QAAA,gBAAAvD,GAACyE,CAAAA,KAAAA,EAAAA,EAAAA;;;;;;;0BAMXzE,GAAChB,CAAAA,iBAAAA,EAAAA;gBACC0F,QAAS,EAAA,UAAA;gBACT5D,OAAS,EAAA,CAAA;gBACTG,UAAW,EAAA,YAAA;gBACXD,SAAS,EAAA,IAAA;gBACT2D,IAAK,EAAA,MAAA;gBACLhB,GAAK,EAAA,CAAA;gBACLiB,SAAU,EAAA,OAAA;gBACVC,QAAS,EAAA,MAAA;gBACTC,SAAU,EAAA,QAAA;0BAET5C,KAAM6C,CAAAA,MAAM,GAAG,CACd7C,GAAAA,KAAAA,CAAM8C,GAAG,CAAC,CAACvF,wBACTO,GAACR,CAAAA,QAAAA,EAAAA;wBAECC,OAASA,EAAAA,OAAAA;wBACTC,IAAMA,EAAAA,IAAAA;wBACNC,QAAUA,EAAAA,QAAAA;AACVC,wBAAAA,UAAAA,EAAYH,OAAYiB,KAAAA,KAAAA;AACxBb,wBAAAA,SAAAA,EAAW2B,aACT,CAAA;AACEuC,4BAAAA,EAAAA,EAAIC,OAAQ,CAAA,uBAAA,CAAA;4BACZC,cAAgB,EAAA;yBAElB,EAAA;4BAAEtB,IAAMlD,EAAAA;AAAQ,yBAAA;AAVbA,qBAAAA,EAAAA,OAAAA,CAAAA,CAAAA,iBAeTO,GAACiF,CAAAA,GAAAA,EAAAA;oBAAInE,OAAS,EAAA,CAAA;oBAAGoE,IAAM,EAAA,CAAA;AACrB,oBAAA,QAAA,gBAAAlF,GAACsD,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,OAAA;wBAAQE,SAAU,EAAA,YAAA;wBAAaqB,SAAU,EAAA,QAAA;kCAC1DtD,aAAc,CAAA;AACbuC,4BAAAA,EAAAA,EAAIC,OAAQ,CAAA,6BAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA;;;;;;AAOd;;;;"}
|
|
1
|
+
{"version":3,"file":"IconPicker.mjs","sources":["../../../../admin/src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n Box,\n Field,\n Flex,\n IconButton,\n inputFocusStyle,\n Searchbar,\n Tooltip,\n Typography,\n VisuallyHidden,\n} from '@strapi/design-system';\nimport { Search, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nimport { COMPONENT_ICONS } from './constants';\n\nimport type { IntlLabel } from '../../types';\n\nconst IconPickerWrapper = styled(Flex)`\n label {\n ${inputFocusStyle() as any}\n border-radius: ${({ theme }) => theme.borderRadius};\n border: 1px solid ${({ theme }) => theme.colors.neutral100};\n }\n`;\n\ntype Icons = keyof typeof COMPONENT_ICONS;\n\ninterface IconPickProps {\n iconKey: Icons;\n name: string;\n onChange: (value: any) => void;\n isSelected: boolean;\n ariaLabel: string;\n}\n\nconst IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }: IconPickProps) => {\n const Icon = COMPONENT_ICONS[iconKey];\n\n return (\n <Field.Root name={name} required={false}>\n <Field.Label>\n <VisuallyHidden>\n {ariaLabel}\n <Field.Input\n type=\"radio\"\n checked={isSelected}\n onChange={onChange}\n value={iconKey}\n aria-checked={isSelected}\n />\n </VisuallyHidden>\n <Tooltip label={iconKey}>\n <Flex\n padding={2}\n cursor=\"pointer\"\n hasRadius\n background={isSelected ? 'primary200' : undefined}\n >\n <Icon width={'2rem'} height={'2rem'} fill={isSelected ? 'primary600' : 'neutral300'} />\n </Flex>\n </Tooltip>\n </Field.Label>\n </Field.Root>\n );\n};\n\nexport interface IconPickerProps {\n intlLabel: IntlLabel;\n name: string;\n onChange: (value: { target: { name: string; value: string } }) => void;\n value?: string;\n}\n\nexport const IconPicker = ({ intlLabel, name, onChange, value = '' }: IconPickerProps) => {\n const { formatMessage } = useIntl();\n const [showSearch, setShowSearch] = useState(false);\n const [search, setSearch] = useState('');\n const allIcons = Object.keys(COMPONENT_ICONS) as Icons[];\n const [icons, setIcons] = useState(allIcons);\n const searchIconRef = useRef(null);\n const searchBarRef = useRef(null);\n\n const toggleSearch = () => {\n setShowSearch(!showSearch);\n };\n\n const onChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n setSearch(value);\n setIcons(() => allIcons.filter((icon) => icon.toLowerCase().includes(value.toLowerCase())));\n };\n\n const onClearSearch = () => {\n toggleSearch();\n setSearch('');\n setIcons(allIcons);\n };\n\n const removeIconSelected = () => {\n onChange({ target: { name, value: '' } });\n };\n\n useEffect(() => {\n if (showSearch) {\n (searchBarRef.current as unknown as HTMLInputElement)?.focus();\n }\n }, [showSearch]);\n\n return (\n <>\n <Flex justifyContent=\"space-between\" paddingBottom={2}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" tag=\"label\">\n {formatMessage(intlLabel)}\n </Typography>\n <Flex gap={1}>\n {showSearch ? (\n <Searchbar\n ref={searchBarRef}\n name=\"searchbar\"\n placeholder={formatMessage({\n id: getTrad('ComponentIconPicker.search.placeholder'),\n defaultMessage: 'Search for an icon',\n })}\n onBlur={() => {\n if (!search) {\n toggleSearch();\n }\n }}\n onChange={onChangeSearch}\n value={search}\n onClear={onClearSearch}\n clearLabel={formatMessage({\n id: getTrad('IconPicker.search.clear.label'),\n defaultMessage: 'Clear the icon search',\n })}\n >\n {formatMessage({\n id: getTrad('IconPicker.search.placeholder.label'),\n defaultMessage: 'Search for an icon',\n })}\n </Searchbar>\n ) : (\n <IconButton\n ref={searchIconRef}\n onClick={toggleSearch}\n withTooltip={false}\n label={formatMessage({\n id: getTrad('IconPicker.search.button.label'),\n defaultMessage: 'Search icon button',\n })}\n variant=\"ghost\"\n >\n <Search />\n </IconButton>\n )}\n {value && (\n <Tooltip\n label={formatMessage({\n id: getTrad('IconPicker.remove.tooltip'),\n defaultMessage: 'Remove the selected icon',\n })}\n >\n <IconButton\n onClick={removeIconSelected}\n withTooltip={false}\n label={formatMessage({\n id: getTrad('IconPicker.remove.button'),\n defaultMessage: 'Remove the selected icon',\n })}\n variant=\"ghost\"\n >\n <Trash />\n </IconButton>\n </Tooltip>\n )}\n </Flex>\n </Flex>\n <IconPickerWrapper\n position=\"relative\"\n padding={1}\n background=\"neutral100\"\n hasRadius\n wrap=\"wrap\"\n gap={2}\n maxHeight=\"126px\"\n overflow=\"auto\"\n textAlign=\"center\"\n >\n {icons.length > 0 ? (\n icons.map((iconKey) => (\n <IconPick\n key={iconKey}\n iconKey={iconKey}\n name={name}\n onChange={onChange}\n isSelected={iconKey === value}\n ariaLabel={formatMessage(\n {\n id: getTrad('IconPicker.icon.label'),\n defaultMessage: 'Select {icon} icon',\n },\n { icon: iconKey }\n )}\n />\n ))\n ) : (\n <Box padding={4} grow={2}>\n <Typography variant=\"delta\" textColor=\"neutral600\" textAlign=\"center\">\n {formatMessage({\n id: getTrad('IconPicker.emptyState.label'),\n defaultMessage: 'No icon found',\n })}\n </Typography>\n </Box>\n )}\n </IconPickerWrapper>\n </>\n );\n};\n"],"names":["IconPickerWrapper","styled","Flex","inputFocusStyle","theme","borderRadius","colors","neutral100","IconPick","iconKey","name","onChange","isSelected","ariaLabel","Icon","COMPONENT_ICONS","_jsx","Field","Root","required","_jsxs","Label","VisuallyHidden","Input","type","checked","value","aria-checked","Tooltip","label","padding","cursor","hasRadius","background","undefined","width","height","fill","IconPicker","intlLabel","formatMessage","useIntl","showSearch","setShowSearch","useState","search","setSearch","allIcons","Object","keys","icons","setIcons","searchIconRef","useRef","searchBarRef","toggleSearch","onChangeSearch","target","filter","icon","toLowerCase","includes","onClearSearch","removeIconSelected","useEffect","current","focus","_Fragment","justifyContent","paddingBottom","Typography","variant","fontWeight","textColor","tag","gap","Searchbar","ref","placeholder","id","getTrad","defaultMessage","onBlur","onClear","clearLabel","IconButton","onClick","withTooltip","Search","Trash","position","wrap","maxHeight","overflow","textAlign","length","map","Box","grow"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Curve.js","sources":["../../../admin/src/icons/Curve.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst StyledBox = styled(Box)
|
|
1
|
+
{"version":3,"file":"Curve.js","sources":["../../../admin/src/icons/Curve.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport { styled, type DefaultTheme } from 'styled-components';\n\nconst StyledBox = styled(Box)<CurveProps>`\n position: absolute;\n left: -3.4rem;\n top: 0px;\n\n &:before {\n content: '';\n width: 0.4rem;\n height: 1.2rem;\n background: ${({ theme, color }) => theme.colors[color!]};\n display: block;\n }\n`;\n\nconst Svg = styled.svg<CurveProps>`\n position: relative;\n flex-shrink: 0;\n transform: translate(-0.5px, -1px);\n\n * {\n fill: ${({ theme, color }) => theme.colors[color!]};\n }\n`;\n\ninterface CurveProps {\n color: keyof DefaultTheme['colors'];\n}\n\nexport const Curve = (props: CurveProps) => (\n <StyledBox {...props}>\n <Svg\n width=\"20\"\n height=\"23\"\n viewBox=\"0 0 20 23\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.02477 14.7513C8.65865 17.0594 11.6046 18.6059 17.5596 18.8856C18.6836 18.9384 19.5976 19.8435 19.5976 20.9688V20.9688C19.5976 22.0941 18.6841 23.0125 17.5599 22.9643C10.9409 22.6805 6.454 20.9387 3.75496 17.1258C0.937988 13.1464 0.486328 7.39309 0.486328 0.593262H4.50974C4.50974 7.54693 5.06394 11.9813 7.02477 14.7513Z\"\n />\n </Svg>\n </StyledBox>\n);\n"],"names":["StyledBox","styled","Box","theme","color","colors","Svg","svg","Curve","props","_jsx","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";;;;;;AAGA,MAAMA,SAAAA,GAAYC,uBAAOC,CAAAA,gBAAAA,CAAgB;;;;;;;;;gBASzB,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAME,CAAAA,MAAM,CAACD,KAAAA,CAAO,CAAC;;;AAG7D,CAAC;AAED,MAAME,GAAML,GAAAA,uBAAAA,CAAOM,GAAe;;;;;;UAMxB,EAAE,CAAC,EAAEJ,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAME,CAAAA,MAAM,CAACD,KAAAA,CAAO,CAAC;;AAEvD,CAAC;AAMYI,MAAAA,KAAAA,GAAQ,CAACC,KAAAA,iBACpBC,cAACV,CAAAA,SAAAA,EAAAA;AAAW,QAAA,GAAGS,KAAK;AAClB,QAAA,QAAA,gBAAAC,cAACJ,CAAAA,GAAAA,EAAAA;YACCK,KAAM,EAAA,IAAA;YACNC,MAAO,EAAA,IAAA;YACPC,OAAQ,EAAA,WAAA;YACRC,IAAK,EAAA,MAAA;YACLC,KAAM,EAAA,4BAAA;AACL,YAAA,GAAGN,KAAK;AAET,YAAA,QAAA,gBAAAC,cAACM,CAAAA,MAAAA,EAAAA;gBACCC,QAAS,EAAA,SAAA;gBACTC,QAAS,EAAA,SAAA;gBACTC,CAAE,EAAA;;;AAIR,KAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Curve.mjs","sources":["../../../admin/src/icons/Curve.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst StyledBox = styled(Box)
|
|
1
|
+
{"version":3,"file":"Curve.mjs","sources":["../../../admin/src/icons/Curve.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport { styled, type DefaultTheme } from 'styled-components';\n\nconst StyledBox = styled(Box)<CurveProps>`\n position: absolute;\n left: -3.4rem;\n top: 0px;\n\n &:before {\n content: '';\n width: 0.4rem;\n height: 1.2rem;\n background: ${({ theme, color }) => theme.colors[color!]};\n display: block;\n }\n`;\n\nconst Svg = styled.svg<CurveProps>`\n position: relative;\n flex-shrink: 0;\n transform: translate(-0.5px, -1px);\n\n * {\n fill: ${({ theme, color }) => theme.colors[color!]};\n }\n`;\n\ninterface CurveProps {\n color: keyof DefaultTheme['colors'];\n}\n\nexport const Curve = (props: CurveProps) => (\n <StyledBox {...props}>\n <Svg\n width=\"20\"\n height=\"23\"\n viewBox=\"0 0 20 23\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.02477 14.7513C8.65865 17.0594 11.6046 18.6059 17.5596 18.8856C18.6836 18.9384 19.5976 19.8435 19.5976 20.9688V20.9688C19.5976 22.0941 18.6841 23.0125 17.5599 22.9643C10.9409 22.6805 6.454 20.9387 3.75496 17.1258C0.937988 13.1464 0.486328 7.39309 0.486328 0.593262H4.50974C4.50974 7.54693 5.06394 11.9813 7.02477 14.7513Z\"\n />\n </Svg>\n </StyledBox>\n);\n"],"names":["StyledBox","styled","Box","theme","color","colors","Svg","svg","Curve","props","_jsx","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";;;;AAGA,MAAMA,SAAAA,GAAYC,MAAOC,CAAAA,GAAAA,CAAgB;;;;;;;;;gBASzB,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAME,CAAAA,MAAM,CAACD,KAAAA,CAAO,CAAC;;;AAG7D,CAAC;AAED,MAAME,GAAML,GAAAA,MAAAA,CAAOM,GAAe;;;;;;UAMxB,EAAE,CAAC,EAAEJ,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAME,CAAAA,MAAM,CAACD,KAAAA,CAAO,CAAC;;AAEvD,CAAC;AAMYI,MAAAA,KAAAA,GAAQ,CAACC,KAAAA,iBACpBC,GAACV,CAAAA,SAAAA,EAAAA;AAAW,QAAA,GAAGS,KAAK;AAClB,QAAA,QAAA,gBAAAC,GAACJ,CAAAA,GAAAA,EAAAA;YACCK,KAAM,EAAA,IAAA;YACNC,MAAO,EAAA,IAAA;YACPC,OAAQ,EAAA,WAAA;YACRC,IAAK,EAAA,MAAA;YACLC,KAAM,EAAA,4BAAA;AACL,YAAA,GAAGN,KAAK;AAET,YAAA,QAAA,gBAAAC,GAACM,CAAAA,MAAAA,EAAAA;gBACCC,QAAS,EAAA,SAAA;gBACTC,QAAS,EAAA,SAAA;gBACTC,CAAE,EAAA;;;AAIR,KAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/content-type-builder",
|
|
3
|
-
"version": "5.23.
|
|
3
|
+
"version": "5.23.4",
|
|
4
4
|
"description": "Create and manage content types",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"@reduxjs/toolkit": "1.9.7",
|
|
68
68
|
"@sindresorhus/slugify": "1.1.0",
|
|
69
69
|
"@strapi/design-system": "2.0.0-rc.29",
|
|
70
|
-
"@strapi/generators": "5.23.
|
|
70
|
+
"@strapi/generators": "5.23.4",
|
|
71
71
|
"@strapi/icons": "2.0.0-rc.29",
|
|
72
|
-
"@strapi/utils": "5.23.
|
|
72
|
+
"@strapi/utils": "5.23.4",
|
|
73
73
|
"date-fns": "2.30.0",
|
|
74
74
|
"fs-extra": "11.2.0",
|
|
75
75
|
"immer": "9.0.21",
|
|
@@ -82,8 +82,8 @@
|
|
|
82
82
|
"zod": "3.25.67"
|
|
83
83
|
},
|
|
84
84
|
"devDependencies": {
|
|
85
|
-
"@strapi/admin": "5.23.
|
|
86
|
-
"@strapi/types": "5.23.
|
|
85
|
+
"@strapi/admin": "5.23.4",
|
|
86
|
+
"@strapi/types": "5.23.4",
|
|
87
87
|
"@testing-library/dom": "10.1.0",
|
|
88
88
|
"@testing-library/react": "15.0.7",
|
|
89
89
|
"@testing-library/user-event": "14.5.2",
|