node_modules ignore

This commit is contained in:
2025-05-08 23:43:47 +02:00
parent e19d52f172
commit 4574544c9f
65041 changed files with 10593536 additions and 0 deletions

View File

@@ -0,0 +1,70 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
require('react');
var designSystem = require('@strapi/design-system');
var icons = require('@strapi/icons');
var reactIntl = require('react-intl');
var ReactSelect = require('react-select');
var styledComponents = require('styled-components');
const ToggleButton = styledComponents.styled(designSystem.Flex)`
align-self: flex-end;
height: 2.2rem;
width: 2.8rem;
&:hover,
&:focus {
background-color: ${({ theme })=>theme.colors.primary200};
}
`;
const Option = ({ children, data, selectProps, ...props })=>{
const { formatMessage } = reactIntl.useIntl();
const { depth, value, children: options } = data;
const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;
const isOpen = openValues.includes(value);
const Icon = isOpen ? icons.ChevronUp : icons.ChevronDown;
return /*#__PURE__*/ jsxRuntime.jsx(ReactSelect.components.Option, {
data: data,
selectProps: selectProps,
...props,
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
alignItems: "start",
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
textColor: "neutral800",
ellipsis: true,
children: /*#__PURE__*/ jsxRuntime.jsx("span", {
style: {
paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px`
},
children: children
})
}),
options && options?.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(ToggleButton, {
"aria-label": formatMessage({
id: 'app.utils.toggle',
defaultMessage: 'Toggle'
}),
tag: "button",
alignItems: "center",
hasRadius: true,
justifyContent: "center",
marginLeft: "auto",
onClick: (event)=>{
event.preventDefault();
event.stopPropagation();
onOptionToggle(value);
},
children: /*#__PURE__*/ jsxRuntime.jsx(Icon, {
width: "1.4rem",
fill: "neutral500"
})
})
]
})
});
};
exports.Option = Option;
//# sourceMappingURL=Option.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Option.js","sources":["../../../../admin/src/components/SelectTree/Option.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { ChevronDown, ChevronUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { components, OptionProps as ReactSelectOptionProps } from 'react-select';\nimport { styled } from 'styled-components';\n\nimport type { Folder } from '../../../../shared/contracts/folders';\n\nconst ToggleButton = styled(Flex)`\n align-self: flex-end;\n height: 2.2rem;\n width: 2.8rem;\n\n &:hover,\n &:focus {\n background-color: ${({ theme }) => theme.colors.primary200};\n }\n`;\n\ninterface SelectProps {\n maxDisplayDepth: number;\n openValues: string[];\n onOptionToggle: (value: string) => void;\n}\n\ninterface FolderWithDepth extends Folder {\n depth: number;\n value: string;\n}\n\ninterface OptionProps extends ReactSelectOptionProps<FolderWithDepth, false> {\n selectProps: SelectProps & ReactSelectOptionProps<FolderWithDepth, false>['selectProps'];\n}\n\nexport const Option = ({ children, data, selectProps, ...props }: OptionProps) => {\n const { formatMessage } = useIntl();\n const { depth, value, children: options } = data;\n const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;\n const isOpen = openValues.includes(value);\n\n const Icon = isOpen ? ChevronUp : ChevronDown;\n\n return (\n <components.Option data={data} selectProps={selectProps} {...props}>\n <Flex alignItems=\"start\">\n <Typography textColor=\"neutral800\" ellipsis>\n <span style={{ paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px` }}>\n {children}\n </span>\n </Typography>\n\n {options && options?.length > 0 && (\n <ToggleButton\n aria-label={formatMessage({\n id: 'app.utils.toggle',\n defaultMessage: 'Toggle',\n })}\n tag=\"button\"\n alignItems=\"center\"\n hasRadius\n justifyContent=\"center\"\n marginLeft=\"auto\"\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n onOptionToggle(value);\n }}\n >\n <Icon width=\"1.4rem\" fill=\"neutral500\" />\n </ToggleButton>\n )}\n </Flex>\n </components.Option>\n );\n};\n"],"names":["ToggleButton","styled","Flex","theme","colors","primary200","Option","children","data","selectProps","props","formatMessage","useIntl","depth","value","options","maxDisplayDepth","openValues","onOptionToggle","isOpen","includes","Icon","ChevronUp","ChevronDown","_jsx","components","_jsxs","alignItems","Typography","textColor","ellipsis","span","style","paddingLeft","Math","min","length","aria-label","id","defaultMessage","tag","hasRadius","justifyContent","marginLeft","onClick","event","preventDefault","stopPropagation","width","fill"],"mappings":";;;;;;;;;;AAUA,MAAMA,YAAAA,GAAeC,uBAAOC,CAAAA,iBAAAA,CAAK;;;;;;;sBAOX,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE/D,CAAC;AAiBM,MAAMC,MAAS,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,KAAoB,EAAA,GAAA;IAC3E,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEP,QAAUQ,EAAAA,OAAO,EAAE,GAAGP,IAAAA;AAC5C,IAAA,MAAM,EAAEQ,eAAe,EAAEC,UAAU,EAAEC,cAAc,EAAE,GAAGT,WAAAA;IACxD,MAAMU,MAAAA,GAASF,UAAWG,CAAAA,QAAQ,CAACN,KAAAA,CAAAA;IAEnC,MAAMO,IAAAA,GAAOF,SAASG,eAAYC,GAAAA,iBAAAA;IAElC,qBACEC,cAAA,CAACC,uBAAWnB,MAAM,EAAA;QAACE,IAAMA,EAAAA,IAAAA;QAAMC,WAAaA,EAAAA,WAAAA;AAAc,QAAA,GAAGC,KAAK;AAChE,QAAA,QAAA,gBAAAgB,eAACxB,CAAAA,iBAAAA,EAAAA;YAAKyB,UAAW,EAAA,OAAA;;8BACfH,cAACI,CAAAA,uBAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,QAAQ,EAAA,IAAA;AACzC,oBAAA,QAAA,gBAAAN,cAACO,CAAAA,MAAAA,EAAAA;wBAAKC,KAAO,EAAA;4BAAEC,WAAa,EAAA,CAAC,EAAEC,IAAKC,CAAAA,GAAG,CAACtB,KAAOG,EAAAA,eAAAA,CAAAA,GAAmB,EAAG,CAAA,EAAE;AAAE,yBAAA;AACtET,wBAAAA,QAAAA,EAAAA;;;gBAIJQ,OAAWA,IAAAA,OAAAA,EAASqB,MAAS,GAAA,CAAA,kBAC5BZ,cAACxB,CAAAA,YAAAA,EAAAA;AACCqC,oBAAAA,YAAAA,EAAY1B,aAAc,CAAA;wBACxB2B,EAAI,EAAA,kBAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAC,GAAI,EAAA,QAAA;oBACJb,UAAW,EAAA,QAAA;oBACXc,SAAS,EAAA,IAAA;oBACTC,cAAe,EAAA,QAAA;oBACfC,UAAW,EAAA,MAAA;AACXC,oBAAAA,OAAAA,EAAS,CAACC,KAAAA,GAAAA;AACRA,wBAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBD,wBAAAA,KAAAA,CAAME,eAAe,EAAA;wBAErB7B,cAAeJ,CAAAA,KAAAA,CAAAA;AACjB,qBAAA;AAEA,oBAAA,QAAA,gBAAAU,cAACH,CAAAA,IAAAA,EAAAA;wBAAK2B,KAAM,EAAA,QAAA;wBAASC,IAAK,EAAA;;;;;;AAMtC;;;;"}

View File

@@ -0,0 +1,68 @@
import { jsx, jsxs } from 'react/jsx-runtime';
import 'react';
import { Flex, Typography } from '@strapi/design-system';
import { ChevronUp, ChevronDown } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { components } from 'react-select';
import { styled } from 'styled-components';
const ToggleButton = styled(Flex)`
align-self: flex-end;
height: 2.2rem;
width: 2.8rem;
&:hover,
&:focus {
background-color: ${({ theme })=>theme.colors.primary200};
}
`;
const Option = ({ children, data, selectProps, ...props })=>{
const { formatMessage } = useIntl();
const { depth, value, children: options } = data;
const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;
const isOpen = openValues.includes(value);
const Icon = isOpen ? ChevronUp : ChevronDown;
return /*#__PURE__*/ jsx(components.Option, {
data: data,
selectProps: selectProps,
...props,
children: /*#__PURE__*/ jsxs(Flex, {
alignItems: "start",
children: [
/*#__PURE__*/ jsx(Typography, {
textColor: "neutral800",
ellipsis: true,
children: /*#__PURE__*/ jsx("span", {
style: {
paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px`
},
children: children
})
}),
options && options?.length > 0 && /*#__PURE__*/ jsx(ToggleButton, {
"aria-label": formatMessage({
id: 'app.utils.toggle',
defaultMessage: 'Toggle'
}),
tag: "button",
alignItems: "center",
hasRadius: true,
justifyContent: "center",
marginLeft: "auto",
onClick: (event)=>{
event.preventDefault();
event.stopPropagation();
onOptionToggle(value);
},
children: /*#__PURE__*/ jsx(Icon, {
width: "1.4rem",
fill: "neutral500"
})
})
]
})
});
};
export { Option };
//# sourceMappingURL=Option.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Option.mjs","sources":["../../../../admin/src/components/SelectTree/Option.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { ChevronDown, ChevronUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { components, OptionProps as ReactSelectOptionProps } from 'react-select';\nimport { styled } from 'styled-components';\n\nimport type { Folder } from '../../../../shared/contracts/folders';\n\nconst ToggleButton = styled(Flex)`\n align-self: flex-end;\n height: 2.2rem;\n width: 2.8rem;\n\n &:hover,\n &:focus {\n background-color: ${({ theme }) => theme.colors.primary200};\n }\n`;\n\ninterface SelectProps {\n maxDisplayDepth: number;\n openValues: string[];\n onOptionToggle: (value: string) => void;\n}\n\ninterface FolderWithDepth extends Folder {\n depth: number;\n value: string;\n}\n\ninterface OptionProps extends ReactSelectOptionProps<FolderWithDepth, false> {\n selectProps: SelectProps & ReactSelectOptionProps<FolderWithDepth, false>['selectProps'];\n}\n\nexport const Option = ({ children, data, selectProps, ...props }: OptionProps) => {\n const { formatMessage } = useIntl();\n const { depth, value, children: options } = data;\n const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;\n const isOpen = openValues.includes(value);\n\n const Icon = isOpen ? ChevronUp : ChevronDown;\n\n return (\n <components.Option data={data} selectProps={selectProps} {...props}>\n <Flex alignItems=\"start\">\n <Typography textColor=\"neutral800\" ellipsis>\n <span style={{ paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px` }}>\n {children}\n </span>\n </Typography>\n\n {options && options?.length > 0 && (\n <ToggleButton\n aria-label={formatMessage({\n id: 'app.utils.toggle',\n defaultMessage: 'Toggle',\n })}\n tag=\"button\"\n alignItems=\"center\"\n hasRadius\n justifyContent=\"center\"\n marginLeft=\"auto\"\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n onOptionToggle(value);\n }}\n >\n <Icon width=\"1.4rem\" fill=\"neutral500\" />\n </ToggleButton>\n )}\n </Flex>\n </components.Option>\n );\n};\n"],"names":["ToggleButton","styled","Flex","theme","colors","primary200","Option","children","data","selectProps","props","formatMessage","useIntl","depth","value","options","maxDisplayDepth","openValues","onOptionToggle","isOpen","includes","Icon","ChevronUp","ChevronDown","_jsx","components","_jsxs","alignItems","Typography","textColor","ellipsis","span","style","paddingLeft","Math","min","length","aria-label","id","defaultMessage","tag","hasRadius","justifyContent","marginLeft","onClick","event","preventDefault","stopPropagation","width","fill"],"mappings":";;;;;;;;AAUA,MAAMA,YAAAA,GAAeC,MAAOC,CAAAA,IAAAA,CAAK;;;;;;;sBAOX,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE/D,CAAC;AAiBM,MAAMC,MAAS,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,KAAoB,EAAA,GAAA;IAC3E,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEP,QAAUQ,EAAAA,OAAO,EAAE,GAAGP,IAAAA;AAC5C,IAAA,MAAM,EAAEQ,eAAe,EAAEC,UAAU,EAAEC,cAAc,EAAE,GAAGT,WAAAA;IACxD,MAAMU,MAAAA,GAASF,UAAWG,CAAAA,QAAQ,CAACN,KAAAA,CAAAA;IAEnC,MAAMO,IAAAA,GAAOF,SAASG,SAAYC,GAAAA,WAAAA;IAElC,qBACEC,GAAA,CAACC,WAAWnB,MAAM,EAAA;QAACE,IAAMA,EAAAA,IAAAA;QAAMC,WAAaA,EAAAA,WAAAA;AAAc,QAAA,GAAGC,KAAK;AAChE,QAAA,QAAA,gBAAAgB,IAACxB,CAAAA,IAAAA,EAAAA;YAAKyB,UAAW,EAAA,OAAA;;8BACfH,GAACI,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,QAAQ,EAAA,IAAA;AACzC,oBAAA,QAAA,gBAAAN,GAACO,CAAAA,MAAAA,EAAAA;wBAAKC,KAAO,EAAA;4BAAEC,WAAa,EAAA,CAAC,EAAEC,IAAKC,CAAAA,GAAG,CAACtB,KAAOG,EAAAA,eAAAA,CAAAA,GAAmB,EAAG,CAAA,EAAE;AAAE,yBAAA;AACtET,wBAAAA,QAAAA,EAAAA;;;gBAIJQ,OAAWA,IAAAA,OAAAA,EAASqB,MAAS,GAAA,CAAA,kBAC5BZ,GAACxB,CAAAA,YAAAA,EAAAA;AACCqC,oBAAAA,YAAAA,EAAY1B,aAAc,CAAA;wBACxB2B,EAAI,EAAA,kBAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAC,GAAI,EAAA,QAAA;oBACJb,UAAW,EAAA,QAAA;oBACXc,SAAS,EAAA,IAAA;oBACTC,cAAe,EAAA,QAAA;oBACfC,UAAW,EAAA,MAAA;AACXC,oBAAAA,OAAAA,EAAS,CAACC,KAAAA,GAAAA;AACRA,wBAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBD,wBAAAA,KAAAA,CAAME,eAAe,EAAA;wBAErB7B,cAAeJ,CAAAA,KAAAA,CAAAA;AACjB,qBAAA;AAEA,oBAAA,QAAA,gBAAAU,GAACH,CAAAA,IAAAA,EAAAA;wBAAK2B,KAAM,EAAA,QAAA;wBAASC,IAAK,EAAA;;;;;;AAMtC;;;;"}

View File

@@ -0,0 +1,276 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var designSystem = require('@strapi/design-system');
var icons = require('@strapi/icons');
var ReactSelect = require('react-select');
var styledComponents = require('styled-components');
var Option = require('./Option.js');
var flattenTree = require('./utils/flattenTree.js');
var getOpenValues = require('./utils/getOpenValues.js');
var getValuesToClose = require('./utils/getValuesToClose.js');
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
const hasParent = (option)=>!option.parent;
const SelectTree = ({ options: defaultOptions, maxDisplayDepth = 5, defaultValue, ...props })=>{
const flatDefaultOptions = React__namespace.useMemo(()=>flattenTree.flattenTree(defaultOptions), [
defaultOptions
]);
const optionsFiltered = React__namespace.useMemo(()=>flatDefaultOptions.filter(hasParent), [
flatDefaultOptions
]);
const [options, setOptions] = React__namespace.useState(optionsFiltered);
const [openValues, setOpenValues] = React__namespace.useState(getOpenValues.getOpenValues(flatDefaultOptions, defaultValue));
React__namespace.useEffect(()=>{
if (openValues.length === 0) {
setOptions(flatDefaultOptions.filter((option)=>option.parent === undefined));
} else {
const allOpenValues = openValues.reduce((acc, value)=>{
const options = flatDefaultOptions.filter((option)=>option.value === value || option.parent === value);
options.forEach((option)=>{
const values = getOpenValues.getOpenValues(flatDefaultOptions, option);
acc = [
...acc,
...values
];
});
return acc;
}, []);
const nextOptions = flatDefaultOptions.filter((option)=>allOpenValues.includes(option.value));
setOptions(nextOptions);
}
}, [
openValues,
flatDefaultOptions,
optionsFiltered
]);
const handleToggle = (value)=>{
if (openValues.includes(value)) {
const valuesToClose = getValuesToClose.getValuesToClose(flatDefaultOptions, value);
setOpenValues((prev)=>prev.filter((prevData)=>!valuesToClose.includes(prevData)));
} else {
setOpenValues((prev)=>[
...prev,
value
]);
}
};
return /*#__PURE__*/ jsxRuntime.jsx(Select, {
components: {
Option: Option.Option
},
options: options,
defaultValue: defaultValue,
isSearchable: false,
/* -- custom props, used by the Option component */ maxDisplayDepth: maxDisplayDepth,
openValues: openValues,
onOptionToggle: handleToggle,
...props
});
};
const Select = ({ components = {}, styles = {}, error, ariaErrorMessage, ...props })=>{
const theme = styledComponents.useTheme();
const customStyles = getSelectStyles(theme, error);
return /*#__PURE__*/ jsxRuntime.jsx(ReactSelect, {
menuPosition: "fixed",
components: {
...components,
ClearIndicator,
DropdownIndicator,
IndicatorSeparator: ()=>null,
LoadingIndicator: ()=>null
},
"aria-errormessage": error && ariaErrorMessage,
"aria-invalid": !!error,
styles: {
...customStyles,
...styles
},
...props
});
};
const IconBox = styledComponents.styled(designSystem.Box)`
background: transparent;
border: none;
position: relative;
z-index: 1;
svg {
height: 1.1rem;
width: 1.1rem;
}
svg path {
fill: ${({ theme })=>theme.colors.neutral600};
}
`;
const ClearIndicator = (props)=>{
const Component = ReactSelect.components.ClearIndicator;
return /*#__PURE__*/ jsxRuntime.jsx(Component, {
...props,
children: /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
tag: "button",
type: "button",
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
})
});
};
const CarretBox = styledComponents.styled(IconBox)`
display: flex;
background: none;
border: none;
svg {
width: 0.9rem;
}
`;
const DropdownIndicator = ({ innerProps })=>{
return /*#__PURE__*/ jsxRuntime.jsx(CarretBox, {
paddingRight: 3,
...innerProps,
children: /*#__PURE__*/ jsxRuntime.jsx(icons.CaretDown, {})
});
};
const getSelectStyles = (theme, error)=>{
return {
clearIndicator: (base)=>({
...base,
padding: 0,
paddingRight: theme.spaces[3]
}),
container: (base)=>({
...base,
background: theme.colors.neutral0,
lineHeight: 'normal'
}),
control (base, state) {
let borderColor = theme.colors.neutral200;
let boxShadowColor = undefined;
let backgroundColor = undefined;
if (state.isFocused) {
borderColor = theme.colors.primary600;
boxShadowColor = theme.colors.primary600;
} else if (error) {
borderColor = theme.colors.danger600;
}
if (state.isDisabled) {
backgroundColor = `${theme.colors.neutral150} !important`;
}
return {
...base,
fontSize: theme.fontSizes[2],
height: 40,
border: `1px solid ${borderColor} !important`,
outline: 0,
backgroundColor,
borderRadius: theme.borderRadius,
boxShadow: boxShadowColor ? `${boxShadowColor} 0px 0px 0px 2px` : ''
};
},
indicatorsContainer: (base)=>({
...base,
padding: 0,
paddingRight: theme.spaces[3]
}),
input: (base)=>({
...base,
margin: 0,
padding: 0,
color: theme.colors.neutral800,
gridTemplateColumns: '0 100%'
}),
menuPortal: (base)=>({
...base,
zIndex: theme.zIndices.dialog,
pointerEvents: 'auto'
}),
menu (base) {
return {
...base,
width: '100%',
marginTop: theme.spaces[1],
backgroundColor: theme.colors.neutral0,
color: theme.colors.neutral800,
borderRadius: theme.borderRadius,
border: `1px solid ${theme.colors.neutral200}`,
boxShadow: theme.shadows.tableShadow,
fontSize: theme.fontSizes[2],
zIndex: 2
};
},
menuList: (base)=>({
...base,
paddingLeft: theme.spaces[1],
paddingTop: theme.spaces[1],
paddingRight: theme.spaces[1],
paddingBottom: theme.spaces[1]
}),
// eslint-disable-next-line @typescript-eslint/no-explicit-any
option (base, state) {
let backgroundColor = base?.backgroundColor;
if (state.isFocused || state.isSelected) {
backgroundColor = theme.colors.primary100;
}
return {
...base,
color: theme.colors.neutral800,
lineHeight: theme.spaces[5],
backgroundColor,
borderRadius: theme.borderRadius,
'&:active': {
backgroundColor: theme.colors.primary100
}
};
},
placeholder: (base)=>({
...base,
color: theme.colors.neutral600,
marginLeft: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: '80%'
}),
singleValue (base, state) {
let color = theme.colors.neutral800;
if (state.isDisabled) {
color = theme.colors.neutral600;
}
return {
...base,
marginLeft: 0,
color
};
},
valueContainer: (base)=>({
...base,
cursor: 'pointer',
padding: 0,
paddingLeft: theme.spaces[4],
marginLeft: 0,
marginRight: 0
})
};
};
exports.SelectTree = SelectTree;
//# sourceMappingURL=SelectTree.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,255 @@
import { jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { Box } from '@strapi/design-system';
import { Cross, CaretDown } from '@strapi/icons';
import ReactSelect, { components } from 'react-select';
import { styled, useTheme } from 'styled-components';
import { Option } from './Option.mjs';
import { flattenTree } from './utils/flattenTree.mjs';
import { getOpenValues } from './utils/getOpenValues.mjs';
import { getValuesToClose } from './utils/getValuesToClose.mjs';
const hasParent = (option)=>!option.parent;
const SelectTree = ({ options: defaultOptions, maxDisplayDepth = 5, defaultValue, ...props })=>{
const flatDefaultOptions = React.useMemo(()=>flattenTree(defaultOptions), [
defaultOptions
]);
const optionsFiltered = React.useMemo(()=>flatDefaultOptions.filter(hasParent), [
flatDefaultOptions
]);
const [options, setOptions] = React.useState(optionsFiltered);
const [openValues, setOpenValues] = React.useState(getOpenValues(flatDefaultOptions, defaultValue));
React.useEffect(()=>{
if (openValues.length === 0) {
setOptions(flatDefaultOptions.filter((option)=>option.parent === undefined));
} else {
const allOpenValues = openValues.reduce((acc, value)=>{
const options = flatDefaultOptions.filter((option)=>option.value === value || option.parent === value);
options.forEach((option)=>{
const values = getOpenValues(flatDefaultOptions, option);
acc = [
...acc,
...values
];
});
return acc;
}, []);
const nextOptions = flatDefaultOptions.filter((option)=>allOpenValues.includes(option.value));
setOptions(nextOptions);
}
}, [
openValues,
flatDefaultOptions,
optionsFiltered
]);
const handleToggle = (value)=>{
if (openValues.includes(value)) {
const valuesToClose = getValuesToClose(flatDefaultOptions, value);
setOpenValues((prev)=>prev.filter((prevData)=>!valuesToClose.includes(prevData)));
} else {
setOpenValues((prev)=>[
...prev,
value
]);
}
};
return /*#__PURE__*/ jsx(Select, {
components: {
Option
},
options: options,
defaultValue: defaultValue,
isSearchable: false,
/* -- custom props, used by the Option component */ maxDisplayDepth: maxDisplayDepth,
openValues: openValues,
onOptionToggle: handleToggle,
...props
});
};
const Select = ({ components = {}, styles = {}, error, ariaErrorMessage, ...props })=>{
const theme = useTheme();
const customStyles = getSelectStyles(theme, error);
return /*#__PURE__*/ jsx(ReactSelect, {
menuPosition: "fixed",
components: {
...components,
ClearIndicator,
DropdownIndicator,
IndicatorSeparator: ()=>null,
LoadingIndicator: ()=>null
},
"aria-errormessage": error && ariaErrorMessage,
"aria-invalid": !!error,
styles: {
...customStyles,
...styles
},
...props
});
};
const IconBox = styled(Box)`
background: transparent;
border: none;
position: relative;
z-index: 1;
svg {
height: 1.1rem;
width: 1.1rem;
}
svg path {
fill: ${({ theme })=>theme.colors.neutral600};
}
`;
const ClearIndicator = (props)=>{
const Component = components.ClearIndicator;
return /*#__PURE__*/ jsx(Component, {
...props,
children: /*#__PURE__*/ jsx(IconBox, {
tag: "button",
type: "button",
children: /*#__PURE__*/ jsx(Cross, {})
})
});
};
const CarretBox = styled(IconBox)`
display: flex;
background: none;
border: none;
svg {
width: 0.9rem;
}
`;
const DropdownIndicator = ({ innerProps })=>{
return /*#__PURE__*/ jsx(CarretBox, {
paddingRight: 3,
...innerProps,
children: /*#__PURE__*/ jsx(CaretDown, {})
});
};
const getSelectStyles = (theme, error)=>{
return {
clearIndicator: (base)=>({
...base,
padding: 0,
paddingRight: theme.spaces[3]
}),
container: (base)=>({
...base,
background: theme.colors.neutral0,
lineHeight: 'normal'
}),
control (base, state) {
let borderColor = theme.colors.neutral200;
let boxShadowColor = undefined;
let backgroundColor = undefined;
if (state.isFocused) {
borderColor = theme.colors.primary600;
boxShadowColor = theme.colors.primary600;
} else if (error) {
borderColor = theme.colors.danger600;
}
if (state.isDisabled) {
backgroundColor = `${theme.colors.neutral150} !important`;
}
return {
...base,
fontSize: theme.fontSizes[2],
height: 40,
border: `1px solid ${borderColor} !important`,
outline: 0,
backgroundColor,
borderRadius: theme.borderRadius,
boxShadow: boxShadowColor ? `${boxShadowColor} 0px 0px 0px 2px` : ''
};
},
indicatorsContainer: (base)=>({
...base,
padding: 0,
paddingRight: theme.spaces[3]
}),
input: (base)=>({
...base,
margin: 0,
padding: 0,
color: theme.colors.neutral800,
gridTemplateColumns: '0 100%'
}),
menuPortal: (base)=>({
...base,
zIndex: theme.zIndices.dialog,
pointerEvents: 'auto'
}),
menu (base) {
return {
...base,
width: '100%',
marginTop: theme.spaces[1],
backgroundColor: theme.colors.neutral0,
color: theme.colors.neutral800,
borderRadius: theme.borderRadius,
border: `1px solid ${theme.colors.neutral200}`,
boxShadow: theme.shadows.tableShadow,
fontSize: theme.fontSizes[2],
zIndex: 2
};
},
menuList: (base)=>({
...base,
paddingLeft: theme.spaces[1],
paddingTop: theme.spaces[1],
paddingRight: theme.spaces[1],
paddingBottom: theme.spaces[1]
}),
// eslint-disable-next-line @typescript-eslint/no-explicit-any
option (base, state) {
let backgroundColor = base?.backgroundColor;
if (state.isFocused || state.isSelected) {
backgroundColor = theme.colors.primary100;
}
return {
...base,
color: theme.colors.neutral800,
lineHeight: theme.spaces[5],
backgroundColor,
borderRadius: theme.borderRadius,
'&:active': {
backgroundColor: theme.colors.primary100
}
};
},
placeholder: (base)=>({
...base,
color: theme.colors.neutral600,
marginLeft: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: '80%'
}),
singleValue (base, state) {
let color = theme.colors.neutral800;
if (state.isDisabled) {
color = theme.colors.neutral600;
}
return {
...base,
marginLeft: 0,
color
};
},
valueContainer: (base)=>({
...base,
cursor: 'pointer',
padding: 0,
paddingLeft: theme.spaces[4],
marginLeft: 0,
marginRight: 0
})
};
};
export { SelectTree };
//# sourceMappingURL=SelectTree.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,19 @@
'use strict';
function flattenTree(tree, parent = null, depth = 0) {
return tree.flatMap((item)=>item.children ? [
{
...item,
parent: parent?.value,
depth
},
...flattenTree(item.children, item, depth + 1)
] : {
...item,
depth,
parent: parent?.value
});
}
exports.flattenTree = flattenTree;
//# sourceMappingURL=flattenTree.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"flattenTree.js","sources":["../../../../../admin/src/components/SelectTree/utils/flattenTree.ts"],"sourcesContent":["type TreeNode<T> = {\n value: T;\n children?: TreeNode<T>[];\n label?: string;\n};\n\nexport type FlattenedNode<T> = {\n value: T;\n parent?: T;\n depth: number;\n // we need the label in places where flattenTree is used\n label?: string;\n children?: TreeNode<T>[];\n};\n\nexport function flattenTree<T>(\n tree: TreeNode<T>[],\n parent: TreeNode<T> | null = null,\n depth: number = 0\n): FlattenedNode<T>[] {\n return tree.flatMap((item) =>\n item.children\n ? [{ ...item, parent: parent?.value, depth }, ...flattenTree(item.children, item, depth + 1)]\n : { ...item, depth, parent: parent?.value }\n );\n}\n"],"names":["flattenTree","tree","parent","depth","flatMap","item","children","value"],"mappings":";;AAeO,SAASA,YACdC,IAAmB,EACnBC,SAA6B,IAAI,EACjCC,QAAgB,CAAC,EAAA;AAEjB,IAAA,OAAOF,KAAKG,OAAO,CAAC,CAACC,IACnBA,GAAAA,IAAAA,CAAKC,QAAQ,GACT;AAAC,YAAA;AAAE,gBAAA,GAAGD,IAAI;AAAEH,gBAAAA,MAAAA,EAAQA,MAAQK,EAAAA,KAAAA;AAAOJ,gBAAAA;AAAM,aAAA;AAAMH,YAAAA,GAAAA,WAAAA,CAAYK,IAAKC,CAAAA,QAAQ,EAAED,IAAAA,EAAMF,KAAQ,GAAA,CAAA;SAAG,GAC3F;AAAE,YAAA,GAAGE,IAAI;AAAEF,YAAAA,KAAAA;AAAOD,YAAAA,MAAAA,EAAQA,MAAQK,EAAAA;AAAM,SAAA,CAAA;AAEhD;;;;"}

View File

@@ -0,0 +1,17 @@
function flattenTree(tree, parent = null, depth = 0) {
return tree.flatMap((item)=>item.children ? [
{
...item,
parent: parent?.value,
depth
},
...flattenTree(item.children, item, depth + 1)
] : {
...item,
depth,
parent: parent?.value
});
}
export { flattenTree };
//# sourceMappingURL=flattenTree.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"flattenTree.mjs","sources":["../../../../../admin/src/components/SelectTree/utils/flattenTree.ts"],"sourcesContent":["type TreeNode<T> = {\n value: T;\n children?: TreeNode<T>[];\n label?: string;\n};\n\nexport type FlattenedNode<T> = {\n value: T;\n parent?: T;\n depth: number;\n // we need the label in places where flattenTree is used\n label?: string;\n children?: TreeNode<T>[];\n};\n\nexport function flattenTree<T>(\n tree: TreeNode<T>[],\n parent: TreeNode<T> | null = null,\n depth: number = 0\n): FlattenedNode<T>[] {\n return tree.flatMap((item) =>\n item.children\n ? [{ ...item, parent: parent?.value, depth }, ...flattenTree(item.children, item, depth + 1)]\n : { ...item, depth, parent: parent?.value }\n );\n}\n"],"names":["flattenTree","tree","parent","depth","flatMap","item","children","value"],"mappings":"AAeO,SAASA,YACdC,IAAmB,EACnBC,SAA6B,IAAI,EACjCC,QAAgB,CAAC,EAAA;AAEjB,IAAA,OAAOF,KAAKG,OAAO,CAAC,CAACC,IACnBA,GAAAA,IAAAA,CAAKC,QAAQ,GACT;AAAC,YAAA;AAAE,gBAAA,GAAGD,IAAI;AAAEH,gBAAAA,MAAAA,EAAQA,MAAQK,EAAAA,KAAAA;AAAOJ,gBAAAA;AAAM,aAAA;AAAMH,YAAAA,GAAAA,WAAAA,CAAYK,IAAKC,CAAAA,QAAQ,EAAED,IAAAA,EAAMF,KAAQ,GAAA,CAAA;SAAG,GAC3F;AAAE,YAAA,GAAGE,IAAI;AAAEF,YAAAA,KAAAA;AAAOD,YAAAA,MAAAA,EAAQA,MAAQK,EAAAA;AAAM,SAAA,CAAA;AAEhD;;;;"}

View File

@@ -0,0 +1,24 @@
'use strict';
function getOpenValues(options, defaultValue = {}) {
const values = [];
const { value } = defaultValue;
const option = options.find((option)=>option.value === value);
if (!option) {
return values;
}
values.push(option.value);
let { parent } = option;
while(parent !== undefined){
const option = options.find(({ value })=>value === parent);
if (!option) {
break;
}
values.push(option.value);
parent = option.parent;
}
return values.reverse();
}
exports.getOpenValues = getOpenValues;
//# sourceMappingURL=getOpenValues.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"getOpenValues.js","sources":["../../../../../admin/src/components/SelectTree/utils/getOpenValues.ts"],"sourcesContent":["interface Option {\n value: number | string | null;\n parent?: number | string | null;\n}\n\ninterface DefaultValue {\n value?: number | string | null;\n}\n\nexport function getOpenValues(options: Option[], defaultValue: DefaultValue = {}) {\n const values: Option['value'][] = [];\n const { value } = defaultValue;\n const option = options.find((option) => option.value === value);\n\n if (!option) {\n return values;\n }\n\n values.push(option.value);\n\n let { parent } = option;\n\n while (parent !== undefined) {\n const option = options.find(({ value }) => value === parent);\n\n if (!option) {\n break;\n }\n\n values.push(option.value);\n parent = option.parent;\n }\n\n return values.reverse();\n}\n"],"names":["getOpenValues","options","defaultValue","values","value","option","find","push","parent","undefined","reverse"],"mappings":";;AASO,SAASA,aAAcC,CAAAA,OAAiB,EAAEC,YAAAA,GAA6B,EAAE,EAAA;AAC9E,IAAA,MAAMC,SAA4B,EAAE;IACpC,MAAM,EAAEC,KAAK,EAAE,GAAGF,YAAAA;IAClB,MAAMG,MAAAA,GAASJ,QAAQK,IAAI,CAAC,CAACD,MAAWA,GAAAA,MAAAA,CAAOD,KAAK,KAAKA,KAAAA,CAAAA;AAEzD,IAAA,IAAI,CAACC,MAAQ,EAAA;QACX,OAAOF,MAAAA;AACT;IAEAA,MAAOI,CAAAA,IAAI,CAACF,MAAAA,CAAOD,KAAK,CAAA;IAExB,IAAI,EAAEI,MAAM,EAAE,GAAGH,MAAAA;AAEjB,IAAA,MAAOG,WAAWC,SAAW,CAAA;QAC3B,MAAMJ,MAAAA,GAASJ,QAAQK,IAAI,CAAC,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAUI,KAAAA,MAAAA,CAAAA;AAErD,QAAA,IAAI,CAACH,MAAQ,EAAA;AACX,YAAA;AACF;QAEAF,MAAOI,CAAAA,IAAI,CAACF,MAAAA,CAAOD,KAAK,CAAA;AACxBI,QAAAA,MAAAA,GAASH,OAAOG,MAAM;AACxB;AAEA,IAAA,OAAOL,OAAOO,OAAO,EAAA;AACvB;;;;"}

View File

@@ -0,0 +1,22 @@
function getOpenValues(options, defaultValue = {}) {
const values = [];
const { value } = defaultValue;
const option = options.find((option)=>option.value === value);
if (!option) {
return values;
}
values.push(option.value);
let { parent } = option;
while(parent !== undefined){
const option = options.find(({ value })=>value === parent);
if (!option) {
break;
}
values.push(option.value);
parent = option.parent;
}
return values.reverse();
}
export { getOpenValues };
//# sourceMappingURL=getOpenValues.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"getOpenValues.mjs","sources":["../../../../../admin/src/components/SelectTree/utils/getOpenValues.ts"],"sourcesContent":["interface Option {\n value: number | string | null;\n parent?: number | string | null;\n}\n\ninterface DefaultValue {\n value?: number | string | null;\n}\n\nexport function getOpenValues(options: Option[], defaultValue: DefaultValue = {}) {\n const values: Option['value'][] = [];\n const { value } = defaultValue;\n const option = options.find((option) => option.value === value);\n\n if (!option) {\n return values;\n }\n\n values.push(option.value);\n\n let { parent } = option;\n\n while (parent !== undefined) {\n const option = options.find(({ value }) => value === parent);\n\n if (!option) {\n break;\n }\n\n values.push(option.value);\n parent = option.parent;\n }\n\n return values.reverse();\n}\n"],"names":["getOpenValues","options","defaultValue","values","value","option","find","push","parent","undefined","reverse"],"mappings":"AASO,SAASA,aAAcC,CAAAA,OAAiB,EAAEC,YAAAA,GAA6B,EAAE,EAAA;AAC9E,IAAA,MAAMC,SAA4B,EAAE;IACpC,MAAM,EAAEC,KAAK,EAAE,GAAGF,YAAAA;IAClB,MAAMG,MAAAA,GAASJ,QAAQK,IAAI,CAAC,CAACD,MAAWA,GAAAA,MAAAA,CAAOD,KAAK,KAAKA,KAAAA,CAAAA;AAEzD,IAAA,IAAI,CAACC,MAAQ,EAAA;QACX,OAAOF,MAAAA;AACT;IAEAA,MAAOI,CAAAA,IAAI,CAACF,MAAAA,CAAOD,KAAK,CAAA;IAExB,IAAI,EAAEI,MAAM,EAAE,GAAGH,MAAAA;AAEjB,IAAA,MAAOG,WAAWC,SAAW,CAAA;QAC3B,MAAMJ,MAAAA,GAASJ,QAAQK,IAAI,CAAC,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAUI,KAAAA,MAAAA,CAAAA;AAErD,QAAA,IAAI,CAACH,MAAQ,EAAA;AACX,YAAA;AACF;QAEAF,MAAOI,CAAAA,IAAI,CAACF,MAAAA,CAAOD,KAAK,CAAA;AACxBI,QAAAA,MAAAA,GAASH,OAAOG,MAAM;AACxB;AAEA,IAAA,OAAOL,OAAOO,OAAO,EAAA;AACvB;;;;"}

View File

@@ -0,0 +1,12 @@
'use strict';
function getValuesToClose(options, value) {
const optionForValue = options.find((option)=>option.value === value);
if (!optionForValue) {
return [];
}
return options.filter((option)=>option.depth >= optionForValue.depth).map((option)=>option.value);
}
exports.getValuesToClose = getValuesToClose;
//# sourceMappingURL=getValuesToClose.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"getValuesToClose.js","sources":["../../../../../admin/src/components/SelectTree/utils/getValuesToClose.ts"],"sourcesContent":["interface Option {\n value: string | number | null;\n depth: number;\n}\n\nexport function getValuesToClose(options: Option[], value: number | string | null) {\n const optionForValue = options.find((option) => option.value === value);\n\n if (!optionForValue) {\n return [];\n }\n\n return options\n .filter((option) => option.depth >= optionForValue.depth)\n .map((option) => option.value);\n}\n"],"names":["getValuesToClose","options","value","optionForValue","find","option","filter","depth","map"],"mappings":";;AAKO,SAASA,gBAAAA,CAAiBC,OAAiB,EAAEC,KAA6B,EAAA;IAC/E,MAAMC,cAAAA,GAAiBF,QAAQG,IAAI,CAAC,CAACC,MAAWA,GAAAA,MAAAA,CAAOH,KAAK,KAAKA,KAAAA,CAAAA;AAEjE,IAAA,IAAI,CAACC,cAAgB,EAAA;AACnB,QAAA,OAAO,EAAE;AACX;AAEA,IAAA,OAAOF,QACJK,MAAM,CAAC,CAACD,MAAAA,GAAWA,OAAOE,KAAK,IAAIJ,cAAeI,CAAAA,KAAK,EACvDC,GAAG,CAAC,CAACH,MAAAA,GAAWA,OAAOH,KAAK,CAAA;AACjC;;;;"}

View File

@@ -0,0 +1,10 @@
function getValuesToClose(options, value) {
const optionForValue = options.find((option)=>option.value === value);
if (!optionForValue) {
return [];
}
return options.filter((option)=>option.depth >= optionForValue.depth).map((option)=>option.value);
}
export { getValuesToClose };
//# sourceMappingURL=getValuesToClose.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"getValuesToClose.mjs","sources":["../../../../../admin/src/components/SelectTree/utils/getValuesToClose.ts"],"sourcesContent":["interface Option {\n value: string | number | null;\n depth: number;\n}\n\nexport function getValuesToClose(options: Option[], value: number | string | null) {\n const optionForValue = options.find((option) => option.value === value);\n\n if (!optionForValue) {\n return [];\n }\n\n return options\n .filter((option) => option.depth >= optionForValue.depth)\n .map((option) => option.value);\n}\n"],"names":["getValuesToClose","options","value","optionForValue","find","option","filter","depth","map"],"mappings":"AAKO,SAASA,gBAAAA,CAAiBC,OAAiB,EAAEC,KAA6B,EAAA;IAC/E,MAAMC,cAAAA,GAAiBF,QAAQG,IAAI,CAAC,CAACC,MAAWA,GAAAA,MAAAA,CAAOH,KAAK,KAAKA,KAAAA,CAAAA;AAEjE,IAAA,IAAI,CAACC,cAAgB,EAAA;AACnB,QAAA,OAAO,EAAE;AACX;AAEA,IAAA,OAAOF,QACJK,MAAM,CAAC,CAACD,MAAAA,GAAWA,OAAOE,KAAK,IAAIJ,cAAeI,CAAAA,KAAK,EACvDC,GAAG,CAAC,CAACH,MAAAA,GAAWA,OAAOH,KAAK,CAAA;AACjC;;;;"}