@strapi/plugin-color-picker 5.35.0 → 5.36.1

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.
Files changed (5) hide show
  1. package/dist/admin/components/ColorPickerInput.js +9 -3
  2. package/dist/admin/components/ColorPickerInput.js.map +1 -1
  3. package/dist/admin/components/ColorPickerInput.mjs +9 -3
  4. package/dist/admin/components/ColorPickerInput.mjs.map +1 -1
  5. package/package.json +4 -4
package/dist/admin/components/ColorPickerInput.js CHANGED
@@ -86,7 +86,10 @@ const ColorPickerInput = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disa
86
86
  const colorPickerButtonRef = React__namespace.useRef(null);
87
87
  const { formatMessage } = reactIntl.useIntl();
88
88
  const field = admin.useField(name);
89
- const color = field.value ?? '#000000';
89
+ /**
90
+ * The color that will show in the field. We can't presume to show black or something
91
+ * if no value is currently set (as `null` really corresponds to no color, not
92
+ * black), so default to empty string if nothing else is available. */ const color = field.value ?? props.placeholder ?? '';
90
93
  const composedRefs = designSystem.useComposedRefs(forwardedRef, colorPickerButtonRef);
91
94
  return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
92
95
  name: name,
@@ -130,7 +133,7 @@ const ColorPickerInput = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disa
130
133
  style: {
131
134
  textTransform: 'uppercase'
132
135
  },
133
- textColor: field.value ? undefined : 'neutral600',
136
+ textColor: field.value ? undefined : 'neutral500',
134
137
  variant: "omega",
135
138
  children: color
136
139
  })
@@ -176,7 +179,10 @@ const ColorPickerInput = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disa
176
179
  textTransform: 'uppercase'
177
180
  },
178
181
  name: name,
179
- defaultValue: color,
182
+ // No default value. If nothing is selected, the input will be empty.
183
+ defaultValue: field.value ?? '',
184
+ // Here we default to #000000 as the placeholder, because, absent a
185
+ // user defined placeholder, we want to indicate the desired format.
180
186
  placeholder: "#000000",
181
187
  onChange: field.onChange,
182
188
  ...props
package/dist/admin/components/ColorPickerInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPickerInput.js","sources":["../../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button,\n Box,\n Field,\n Flex,\n Popover,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { type InputProps, useField } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps & {\n labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const field = useField(name);\n const color = field.value ?? '#000000';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={field.error} hint={hint} required={required}>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Popover.Root onOpenChange={setShowColorPicker}>\n <Popover.Trigger>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n variant=\"tertiary\"\n size=\"L\"\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={field.value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CaretDown aria-hidden />\n </ColorPickerToggle>\n </Popover.Trigger>\n <ColorPickerPopover sideOffset={4}>\n <ColorPicker color={color} onChange={(hexValue) => field.onChange(name, hexValue)} />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <Field.Root>\n <Field.Input\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n name={name}\n defaultValue={color}\n placeholder=\"#000000\"\n onChange={field.onChange}\n {...props}\n />\n </Field.Root>\n </Flex>\n </ColorPickerPopover>\n </Popover.Root>\n <Field.Hint />\n <Field.Error />\n </Flex>\n </Field.Root>\n );\n }\n);\n"],"names":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","undefined","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","placeholder","Hint","Error"],"mappings":"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"}
1
+ {"version":3,"file":"ColorPickerInput.js","sources":["../../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button,\n Box,\n Field,\n Flex,\n Popover,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { type InputProps, useField } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps & {\n labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const field = useField(name);\n\n /**\n * The color that will show in the field. We can't presume to show black or something\n * if no value is currently set (as `null` really corresponds to no color, not\n * black), so default to empty string if nothing else is available. */\n const color = field.value ?? props.placeholder ?? '';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={field.error} hint={hint} required={required}>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Popover.Root onOpenChange={setShowColorPicker}>\n <Popover.Trigger>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n variant=\"tertiary\"\n size=\"L\"\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={field.value ? undefined : 'neutral500'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CaretDown aria-hidden />\n </ColorPickerToggle>\n </Popover.Trigger>\n <ColorPickerPopover sideOffset={4}>\n <ColorPicker color={color} onChange={(hexValue) => field.onChange(name, hexValue)} />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <Field.Root>\n <Field.Input\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n name={name}\n // No default value. If nothing is selected, the input will be empty.\n defaultValue={field.value ?? ''}\n // Here we default to #000000 as the placeholder, because, absent a\n // user defined placeholder, we want to indicate the desired format.\n placeholder=\"#000000\"\n onChange={field.onChange}\n {...props}\n />\n </Field.Root>\n </Flex>\n </ColorPickerPopover>\n </Popover.Root>\n <Field.Hint />\n <Field.Error />\n </Flex>\n </Field.Root>\n );\n }\n);\n"],"names":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","placeholder","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","undefined","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","Hint","Error"],"mappings":"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"}
package/dist/admin/components/ColorPickerInput.mjs CHANGED
@@ -65,7 +65,10 @@ const ColorPickerInput = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label
65
65
  const colorPickerButtonRef = React.useRef(null);
66
66
  const { formatMessage } = useIntl();
67
67
  const field = useField(name);
68
- const color = field.value ?? '#000000';
68
+ /**
69
+ * The color that will show in the field. We can't presume to show black or something
70
+ * if no value is currently set (as `null` really corresponds to no color, not
71
+ * black), so default to empty string if nothing else is available. */ const color = field.value ?? props.placeholder ?? '';
69
72
  const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
70
73
  return /*#__PURE__*/ jsx(Field.Root, {
71
74
  name: name,
@@ -109,7 +112,7 @@ const ColorPickerInput = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label
109
112
  style: {
110
113
  textTransform: 'uppercase'
111
114
  },
112
- textColor: field.value ? undefined : 'neutral600',
115
+ textColor: field.value ? undefined : 'neutral500',
113
116
  variant: "omega",
114
117
  children: color
115
118
  })
@@ -155,7 +158,10 @@ const ColorPickerInput = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label
155
158
  textTransform: 'uppercase'
156
159
  },
157
160
  name: name,
158
- defaultValue: color,
161
+ // No default value. If nothing is selected, the input will be empty.
162
+ defaultValue: field.value ?? '',
163
+ // Here we default to #000000 as the placeholder, because, absent a
164
+ // user defined placeholder, we want to indicate the desired format.
159
165
  placeholder: "#000000",
160
166
  onChange: field.onChange,
161
167
  ...props
package/dist/admin/components/ColorPickerInput.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPickerInput.mjs","sources":["../../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button,\n Box,\n Field,\n Flex,\n Popover,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { type InputProps, useField } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps & {\n labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const field = useField(name);\n const color = field.value ?? '#000000';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={field.error} hint={hint} required={required}>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Popover.Root onOpenChange={setShowColorPicker}>\n <Popover.Trigger>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n variant=\"tertiary\"\n size=\"L\"\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={field.value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CaretDown aria-hidden />\n </ColorPickerToggle>\n </Popover.Trigger>\n <ColorPickerPopover sideOffset={4}>\n <ColorPicker color={color} onChange={(hexValue) => field.onChange(name, hexValue)} />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <Field.Root>\n <Field.Input\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n name={name}\n defaultValue={color}\n placeholder=\"#000000\"\n onChange={field.onChange}\n {...props}\n />\n </Field.Root>\n </Flex>\n </ColorPickerPopover>\n </Popover.Root>\n <Field.Hint />\n <Field.Error />\n </Flex>\n </Field.Root>\n );\n }\n);\n"],"names":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","undefined","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","placeholder","Hint","Error"],"mappings":"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"}
1
+ {"version":3,"file":"ColorPickerInput.mjs","sources":["../../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button,\n Box,\n Field,\n Flex,\n Popover,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { type InputProps, useField } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps & {\n labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const field = useField(name);\n\n /**\n * The color that will show in the field. We can't presume to show black or something\n * if no value is currently set (as `null` really corresponds to no color, not\n * black), so default to empty string if nothing else is available. */\n const color = field.value ?? props.placeholder ?? '';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={field.error} hint={hint} required={required}>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Popover.Root onOpenChange={setShowColorPicker}>\n <Popover.Trigger>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n variant=\"tertiary\"\n size=\"L\"\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={field.value ? undefined : 'neutral500'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CaretDown aria-hidden />\n </ColorPickerToggle>\n </Popover.Trigger>\n <ColorPickerPopover sideOffset={4}>\n <ColorPicker color={color} onChange={(hexValue) => field.onChange(name, hexValue)} />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <Field.Root>\n <Field.Input\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n name={name}\n // No default value. If nothing is selected, the input will be empty.\n defaultValue={field.value ?? ''}\n // Here we default to #000000 as the placeholder, because, absent a\n // user defined placeholder, we want to indicate the desired format.\n placeholder=\"#000000\"\n onChange={field.onChange}\n {...props}\n />\n </Field.Root>\n </Flex>\n </ColorPickerPopover>\n </Popover.Root>\n <Field.Hint />\n <Field.Error />\n </Flex>\n </Field.Root>\n );\n }\n);\n"],"names":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","placeholder","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","undefined","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","Hint","Error"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@strapi/plugin-color-picker",
3
- "version": "5.35.0",
3
+ "version": "5.36.1",
4
4
  "description": "Strapi maintained Custom Fields",
5
5
  "repository": {
6
6
  "type": "git",
@@ -63,12 +63,12 @@
63
63
  "react-intl": "6.6.2"
64
64
  },
65
65
  "devDependencies": {
66
- "@strapi/strapi": "5.35.0",
66
+ "@strapi/strapi": "5.36.1",
67
67
  "@testing-library/react": "16.3.0",
68
68
  "@testing-library/user-event": "14.6.1",
69
69
  "react": "18.3.1",
70
70
  "react-dom": "18.3.1",
71
- "react-router-dom": "6.22.3",
71
+ "react-router-dom": "6.30.3",
72
72
  "styled-components": "6.1.8",
73
73
  "typescript": "5.4.4"
74
74
  },
@@ -76,7 +76,7 @@
76
76
  "@strapi/strapi": "^5.0.0",
77
77
  "react": "^17.0.0 || ^18.0.0",
78
78
  "react-dom": "^17.0.0 || ^18.0.0",
79
- "react-router-dom": "^6.0.0",
79
+ "react-router-dom": "^6.30.3",
80
80
  "styled-components": "^6.0.0"
81
81
  },
82
82
  "engines": {