@pega/cosmos-react-condition-builder 9.0.0-build.29.15 → 9.0.0-build.29.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/components/PromotedFilters/PromotedFilters.d.ts.map +1 -1
  2. package/lib/components/PromotedFilters/PromotedFilters.js +13 -8
  3. package/lib/components/PromotedFilters/PromotedFilters.js.map +1 -1
  4. package/lib/components/PromotedFilters/PromotedFilters.styles.d.ts +185 -1
  5. package/lib/components/PromotedFilters/PromotedFilters.styles.d.ts.map +1 -1
  6. package/lib/components/PromotedFilters/PromotedFilters.styles.js +13 -5
  7. package/lib/components/PromotedFilters/PromotedFilters.styles.js.map +1 -1
  8. package/package.json +2 -2
package/lib/components/PromotedFilters/PromotedFilters.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PromotedFilters.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,+BAA+B,EAIhC,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAGV,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAmNjC,eAAO,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CA2JjF,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"PromotedFilters.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,+BAA+B,EAIhC,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAGV,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAsNjC,eAAO,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CA+JjF,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/lib/components/PromotedFilters/PromotedFilters.js CHANGED
@@ -4,7 +4,7 @@ import { Button, Flex, Icon, Modal, useModalManager, useBreakpoint, useI18n, use
4
4
  import { splitConditionForBuilder } from '../ConditionBuilder/core/utils';
5
5
  import ConditionInput from '../ConditionInput';
6
6
  import { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';
7
- import { basicFieldMap, conditionsEqual } from '../ConditionInput/utils';
7
+ import { basicFieldMap, conditionsEqual, defaultComparators } from '../ConditionInput/utils';
8
8
  import ConditionSelector from './ConditionSelector';
9
9
  import { StyledPromotedFilters, StyledTextWithEllipsis, StyledPromotedFiltersButton } from './PromotedFilters.styles';
10
10
  const generateCondition = (value) => {
@@ -42,10 +42,12 @@ const withStore = (WrappedComponent) => memo(({ conditionStore, filterId, onAppl
42
42
  });
43
43
  const ConditionInputWithStore = withStore(ConditionInput);
44
44
  const ConditionSelectorWithStore = withStore(ConditionSelector);
45
+ const rendersAsSingleInput = (filters) => filters.length === 1 && defaultComparators[filters[0].field.type] !== 'BTW';
45
46
  const PromotedFiltersContent = memo(forwardRef(function PromotedFiltersContent({ filters, conditionStore, orientation: orientationProp = 'horizontal', fields, onApply, timeZone }, ref) {
46
47
  const t = useI18n();
47
48
  const isSmallOrAbove = useBreakpoint('sm');
48
- const orientation = isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';
49
+ const inline = isSmallOrAbove || rendersAsSingleInput(filters);
50
+ const orientation = inline && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';
49
51
  const [collapsed, setCollapsed] = useState(false);
50
52
  const onClear = (fieldName) => {
51
53
  if (!conditionStore.getStore()[fieldName])
@@ -96,6 +98,8 @@ export const PromotedFilters = forwardRef(function PromotedFilters({ filters, co
96
98
  const t = useI18n();
97
99
  const promotedFiltersRef = useRef(null);
98
100
  const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: promotedFiltersRef });
101
+ const inline = isSmallOrAbove || rendersAsSingleInput(filters);
102
+ const compact = rendersAsSingleInput(filters) && !isSmallOrAbove && orientation === 'horizontal';
99
103
  const { create } = useModalManager();
100
104
  const modalMethods = useRef();
101
105
  const conditionStore = useSimpleStoreInstance({});
@@ -143,17 +147,18 @@ export const PromotedFilters = forwardRef(function PromotedFilters({ filters, co
143
147
  onCancel
144
148
  });
145
149
  };
146
- return (_jsx(Flex, { as: StyledPromotedFilters, container: {
147
- alignItems: orientation === 'horizontal' && isSmallOrAbove ? 'start' : undefined,
150
+ return (_jsx(StyledPromotedFilters, { "$compact": compact, container: {
151
+ alignItems: orientation === 'horizontal' && inline ? 'start' : undefined,
148
152
  justify: 'between',
149
- direction: !isSmallOrAbove || orientation === 'horizontal' ? 'row' : 'column',
153
+ direction: orientation === 'vertical' && inline ? 'column' : 'row',
154
+ wrap: compact ? 'wrap' : undefined,
150
155
  pad: 2,
151
- gap: 2
152
- }, ref: promotedFiltersRef, children: isSmallOrAbove ? (_jsxs(_Fragment, { children: [orientation === 'vertical' && (_jsxs(Flex, { container: {
156
+ ...(compact ? { colGap: 2 } : { gap: 2 })
157
+ }, ref: promotedFiltersRef, children: inline ? (_jsxs(_Fragment, { children: [orientation === 'vertical' && (_jsxs(Flex, { container: {
153
158
  justify: 'between',
154
159
  alignItems: 'center',
155
160
  pad: [0, 0, 1, 0]
156
- }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: t('filters') }), _jsxs("div", { children: [_jsx(Button, { onClick: onClear, children: t('reset') }), _jsx(Button, { onClick: onApply, children: t('apply') })] })] })), _jsx(PromotedFiltersContent, { filters: filters, conditionStore: conditionStore, fields: fields, orientation: orientation, ref: ref, onApply: onApply, timeZone: timeZone }), orientation === 'horizontal' && (_jsxs(Flex, { container: true, children: [_jsx(StyledPromotedFiltersButton, { onClick: onClear, children: t('reset') }), _jsx(StyledPromotedFiltersButton, { onClick: onApply, children: t('apply') })] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: 'button', variant: 'text', onClick: openFiltersModal, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'filter' }), _jsxs("span", { children: [t('filters'), !!selectedCount && `\u00a0(${selectedCount})`] })] }) }), _jsx(Button, { onClick: onClear, children: t('reset') })] })) }));
161
+ }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: t('filters') }), _jsxs("div", { children: [_jsx(Button, { onClick: onClear, children: t('reset') }), _jsx(Button, { onClick: onApply, children: t('apply') })] })] })), _jsx(PromotedFiltersContent, { filters: filters, conditionStore: conditionStore, fields: fields, orientation: orientation, ref: ref, onApply: onApply, timeZone: timeZone }), orientation === 'horizontal' && (_jsxs(Flex, { container: true, ...(compact && { item: { shrink: 0 } }), children: [_jsx(StyledPromotedFiltersButton, { onClick: onClear, children: t('reset') }), _jsx(StyledPromotedFiltersButton, { onClick: onApply, children: t('apply') })] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: 'button', variant: 'text', onClick: openFiltersModal, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'filter' }), _jsxs("span", { children: [t('filters'), !!selectedCount && `\u00a0(${selectedCount})`] })] }) }), _jsx(Button, { onClick: onClear, children: t('reset') })] })) }));
157
162
  });
158
163
  export default PromotedFilters;
159
164
  //# sourceMappingURL=PromotedFilters.js.map
package/lib/components/PromotedFilters/PromotedFilters.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PromotedFilters.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState\n} from 'react';\nimport type { ComponentType, PropsWithoutRef } from 'react';\n\nimport {\n Button,\n Flex,\n Icon,\n Modal,\n useModalManager,\n useBreakpoint,\n useI18n,\n useModalContext,\n useSimpleStore,\n useSimpleStoreInstance\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n ModalMethods,\n OmitStrict,\n SimpleStore\n} from '@pega/cosmos-react-core';\n\nimport type { ConditionRow, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\nimport { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';\nimport { basicFieldMap, conditionsEqual } from '../ConditionInput/utils';\n\nimport ConditionSelector from './ConditionSelector';\nimport type {\n FilterModalProps,\n PromotedFiltersContentProps,\n PromotedFiltersProps\n} from './PromotedFilters.types';\nimport {\n StyledPromotedFilters,\n StyledTextWithEllipsis,\n StyledPromotedFiltersButton\n} from './PromotedFilters.styles';\n\nconst generateCondition = (value: {\n [key: string]: (LeafCondition & { filterId?: string }) | undefined;\n}) => {\n const storeValues = Object.values(value);\n return storeValues.length === 0\n ? undefined\n : {\n AND: storeValues.map(\n c => ({ condition: c }) as { condition: LeafCondition & { filterId?: string } }\n )\n };\n};\n\ntype WithStoreProps = {\n conditionStore: SimpleStore<{\n [key: string]: (LeafCondition & { filterId?: string }) | undefined;\n }>;\n filterId: string;\n onApply: () => void;\n};\n\nconst withStore = <\n P extends {\n onChange: (condition?: LeafCondition & { filterId?: string }) => void;\n condition?: LeafCondition & { filterId?: string };\n }\n>(\n WrappedComponent: ComponentType<P>\n) =>\n memo(\n ({\n conditionStore,\n filterId,\n onApply,\n ...componentProps\n }: OmitStrict<P, 'onChange'> & WithStoreProps) => {\n const [storeValue, setStore] = useSimpleStore(\n conditionStore,\n val => val[filterId],\n conditionsEqual\n );\n\n const handleOnChange = (newCondition?: LeafCondition & { filterId?: string }) => {\n if (newCondition) {\n if (!newCondition.filterId && filterId !== newCondition.lhs?.field)\n newCondition = { ...newCondition, filterId };\n if (conditionsEqual(storeValue, newCondition)) return;\n setStore(cur => ({\n ...cur,\n [filterId]: newCondition\n }));\n } else {\n if (!storeValue) return;\n setStore(({ ...cur }) => {\n delete cur[filterId];\n return cur;\n });\n }\n onApply();\n };\n\n return (\n <WrappedComponent\n condition={storeValue}\n {...(componentProps as unknown as P)}\n onChange={handleOnChange}\n />\n );\n }\n );\n\nconst ConditionInputWithStore = withStore(ConditionInput);\nconst ConditionSelectorWithStore = withStore(ConditionSelector);\n\nconst PromotedFiltersContent = memo(\n forwardRef(function PromotedFiltersContent(\n {\n filters,\n conditionStore,\n orientation: orientationProp = 'horizontal',\n fields,\n onApply,\n timeZone\n }: PropsWithoutRef<PromotedFiltersContentProps>,\n ref: PromotedFiltersProps['ref']\n ) {\n const t = useI18n();\n const isSmallOrAbove = useBreakpoint('sm');\n const orientation =\n isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';\n const [collapsed, setCollapsed] = useState(false);\n\n const onClear = (fieldName: string) => {\n if (!conditionStore.getStore()[fieldName]) return;\n conditionStore.setStore(({ ...cur }) => {\n delete cur[fieldName];\n return cur;\n });\n onApply?.();\n };\n\n return (\n <Flex\n container={{\n rowGap: 1,\n colGap: 2,\n direction: orientation === 'vertical' ? 'column' : 'row',\n wrap: 'wrap',\n alignItems: orientation === 'vertical' ? 'stretch' : 'start'\n }}\n ref={ref}\n >\n {filters.map(({ id, field, mode, label, predefinedConditions }) => {\n id = id ?? field.name;\n if (mode !== 'predefined')\n return (\n <ConditionInputWithStore\n conditionStore={conditionStore}\n key={id}\n filterId={id}\n field={field}\n mode={mode}\n label={label ?? field.name}\n flat={orientation === 'vertical'}\n fields={fields}\n onApply={onApply}\n timeZone={timeZone}\n />\n );\n\n const selector = (\n <ConditionSelectorWithStore\n conditionStore={conditionStore}\n key={id}\n filterId={id}\n label={label ?? field.name}\n labelHidden={orientation === 'vertical'}\n fields={[\n {\n id: field.name,\n type: basicFieldMap[field.type],\n primary: label || field.name\n }\n ]}\n conditions={predefinedConditions ?? []}\n onApply={onApply ?? (() => {})}\n {...(orientation !== 'vertical' && { onClear: () => onClear(id) })}\n />\n );\n\n return orientation === 'vertical' ? (\n <StyledVerticalFieldGroup\n key={id}\n name={label ?? id}\n collapsed={collapsed}\n onToggleCollapsed={() => setCollapsed(cur => !cur)}\n actions={[\n {\n id: 'clear',\n text: t('clear'),\n onClick: () => onClear(id)\n }\n ]}\n >\n {selector}\n </StyledVerticalFieldGroup>\n ) : (\n selector\n );\n })}\n </Flex>\n );\n })\n);\n\nconst FilterModal = ({ filters, conditionStore, fields, onApply, onCancel }: FilterModalProps) => {\n const t = useI18n();\n\n const { dismiss, unmount } = useModalContext();\n\n const handleApplyClick = () => {\n onApply();\n unmount();\n };\n\n const actions = (\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button onClick={handleApplyClick}>{t('apply')}</Button>\n </>\n );\n\n return (\n <Modal heading={t('filters')} actions={actions} onBeforeClose={onCancel}>\n <PromotedFiltersContent\n filters={filters}\n conditionStore={conditionStore}\n orientation='vertical'\n fields={fields}\n />\n </Modal>\n );\n};\n\nexport const PromotedFilters: ForwardRefForwardPropsComponent<PromotedFiltersProps> = forwardRef(\n function PromotedFilters(\n {\n filters,\n condition,\n onChange,\n orientation = 'horizontal',\n fields,\n handle,\n timeZone\n }: PropsWithoutRef<PromotedFiltersProps>,\n ref: PromotedFiltersProps['ref']\n ) {\n const t = useI18n();\n\n const promotedFiltersRef = useRef<HTMLDivElement>(null);\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: promotedFiltersRef });\n\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods<FilterModalProps>>();\n\n const conditionStore = useSimpleStoreInstance<{\n [key: string]: (LeafCondition & { filterId?: string }) | undefined;\n }>({});\n\n const prepareConditionForStore = useCallback(() => {\n return condition\n ? splitConditionForBuilder(condition).rows.reduce(\n (\n result: { [key: string]: (LeafCondition & { filterId?: string }) | undefined },\n item: ConditionRow & { filterId?: string }\n ) => {\n const { id, label, ...leaf } = item;\n result[leaf.filterId ?? leaf.lhs.field] = leaf;\n return result;\n },\n {}\n )\n : {};\n }, [condition]);\n\n useEffect(() => {\n conditionStore.setStore(prepareConditionForStore());\n }, [prepareConditionForStore]);\n\n const selectedCount = Object.values(conditionStore.getStore()).length;\n\n useImperativeHandle(\n handle,\n () => ({ getCondition: () => generateCondition(conditionStore.getStore()) }),\n []\n );\n\n const onApply = useCallback(() => {\n const storeValue = generateCondition(conditionStore.getStore());\n if (JSON.stringify(condition) !== JSON.stringify(storeValue)) onChange(storeValue);\n }, [onChange, prepareConditionForStore]);\n\n const onClear = useCallback(() => {\n if (condition) {\n conditionStore.setStore({});\n onChange();\n }\n }, [onChange, prepareConditionForStore]);\n\n const onCancel = useCallback(() => {\n conditionStore.setStore(prepareConditionForStore());\n }, [prepareConditionForStore]);\n\n useEffect(() => {\n modalMethods.current?.update({\n filters,\n conditionStore,\n fields\n });\n }, [filters, condition, fields]);\n\n const openFiltersModal = () => {\n modalMethods.current = create(FilterModal, {\n filters,\n conditionStore,\n fields,\n onApply,\n onCancel\n });\n };\n\n return (\n <Flex\n as={StyledPromotedFilters}\n container={{\n alignItems: orientation === 'horizontal' && isSmallOrAbove ? 'start' : undefined,\n justify: 'between',\n direction: !isSmallOrAbove || orientation === 'horizontal' ? 'row' : 'column',\n pad: 2,\n gap: 2\n }}\n ref={promotedFiltersRef}\n >\n {isSmallOrAbove ? (\n <>\n {orientation === 'vertical' && (\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n pad: [0, 0, 1, 0]\n }}\n >\n <StyledTextWithEllipsis variant='h3'>{t('filters')}</StyledTextWithEllipsis>\n <div>\n <Button onClick={onClear}>{t('reset')}</Button>\n <Button onClick={onApply}>{t('apply')}</Button>\n </div>\n </Flex>\n )}\n\n <PromotedFiltersContent\n filters={filters}\n conditionStore={conditionStore}\n fields={fields}\n orientation={orientation}\n ref={ref}\n onApply={onApply}\n timeZone={timeZone}\n />\n\n {orientation === 'horizontal' && (\n <Flex container>\n <StyledPromotedFiltersButton onClick={onClear}>\n {t('reset')}\n </StyledPromotedFiltersButton>\n <StyledPromotedFiltersButton onClick={onApply}>\n {t('apply')}\n </StyledPromotedFiltersButton>\n </Flex>\n )}\n </>\n ) : (\n <>\n <Button type='button' variant='text' onClick={openFiltersModal}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} forwardedAs='span'>\n <Icon name='filter' />\n <span>\n {t('filters')}\n {!!selectedCount && `\\u00a0(${selectedCount})`}\n </span>\n </Flex>\n </Button>\n <Button onClick={onClear}>{t('reset')}</Button>\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default PromotedFilters;\n"]}
1
+ {"version":3,"file":"PromotedFilters.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState\n} from 'react';\nimport type { ComponentType, PropsWithoutRef } from 'react';\n\nimport {\n Button,\n Flex,\n Icon,\n Modal,\n useModalManager,\n useBreakpoint,\n useI18n,\n useModalContext,\n useSimpleStore,\n useSimpleStoreInstance\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n ModalMethods,\n OmitStrict,\n SimpleStore\n} from '@pega/cosmos-react-core';\n\nimport type { ConditionRow, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\nimport { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';\nimport { basicFieldMap, conditionsEqual, defaultComparators } from '../ConditionInput/utils';\n\nimport ConditionSelector from './ConditionSelector';\nimport type {\n FilterModalProps,\n PromotedFiltersContentProps,\n PromotedFiltersProps\n} from './PromotedFilters.types';\nimport {\n StyledPromotedFilters,\n StyledTextWithEllipsis,\n StyledPromotedFiltersButton\n} from './PromotedFilters.styles';\n\nconst generateCondition = (value: {\n [key: string]: (LeafCondition & { filterId?: string }) | undefined;\n}) => {\n const storeValues = Object.values(value);\n return storeValues.length === 0\n ? undefined\n : {\n AND: storeValues.map(\n c => ({ condition: c }) as { condition: LeafCondition & { filterId?: string } }\n )\n };\n};\n\ntype WithStoreProps = {\n conditionStore: SimpleStore<{\n [key: string]: (LeafCondition & { filterId?: string }) | undefined;\n }>;\n filterId: string;\n onApply: () => void;\n};\n\nconst withStore = <\n P extends {\n onChange: (condition?: LeafCondition & { filterId?: string }) => void;\n condition?: LeafCondition & { filterId?: string };\n }\n>(\n WrappedComponent: ComponentType<P>\n) =>\n memo(\n ({\n conditionStore,\n filterId,\n onApply,\n ...componentProps\n }: OmitStrict<P, 'onChange'> & WithStoreProps) => {\n const [storeValue, setStore] = useSimpleStore(\n conditionStore,\n val => val[filterId],\n conditionsEqual\n );\n\n const handleOnChange = (newCondition?: LeafCondition & { filterId?: string }) => {\n if (newCondition) {\n if (!newCondition.filterId && filterId !== newCondition.lhs?.field)\n newCondition = { ...newCondition, filterId };\n if (conditionsEqual(storeValue, newCondition)) return;\n setStore(cur => ({\n ...cur,\n [filterId]: newCondition\n }));\n } else {\n if (!storeValue) return;\n setStore(({ ...cur }) => {\n delete cur[filterId];\n return cur;\n });\n }\n onApply();\n };\n\n return (\n <WrappedComponent\n condition={storeValue}\n {...(componentProps as unknown as P)}\n onChange={handleOnChange}\n />\n );\n }\n );\n\nconst ConditionInputWithStore = withStore(ConditionInput);\nconst ConditionSelectorWithStore = withStore(ConditionSelector);\n\nconst rendersAsSingleInput = (filters: PromotedFiltersProps['filters']) =>\n filters.length === 1 && defaultComparators[filters[0].field.type] !== 'BTW';\n\nconst PromotedFiltersContent = memo(\n forwardRef(function PromotedFiltersContent(\n {\n filters,\n conditionStore,\n orientation: orientationProp = 'horizontal',\n fields,\n onApply,\n timeZone\n }: PropsWithoutRef<PromotedFiltersContentProps>,\n ref: PromotedFiltersProps['ref']\n ) {\n const t = useI18n();\n const isSmallOrAbove = useBreakpoint('sm');\n const inline = isSmallOrAbove || rendersAsSingleInput(filters);\n const orientation = inline && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';\n const [collapsed, setCollapsed] = useState(false);\n\n const onClear = (fieldName: string) => {\n if (!conditionStore.getStore()[fieldName]) return;\n conditionStore.setStore(({ ...cur }) => {\n delete cur[fieldName];\n return cur;\n });\n onApply?.();\n };\n\n return (\n <Flex\n container={{\n rowGap: 1,\n colGap: 2,\n direction: orientation === 'vertical' ? 'column' : 'row',\n wrap: 'wrap',\n alignItems: orientation === 'vertical' ? 'stretch' : 'start'\n }}\n ref={ref}\n >\n {filters.map(({ id, field, mode, label, predefinedConditions }) => {\n id = id ?? field.name;\n if (mode !== 'predefined')\n return (\n <ConditionInputWithStore\n conditionStore={conditionStore}\n key={id}\n filterId={id}\n field={field}\n mode={mode}\n label={label ?? field.name}\n flat={orientation === 'vertical'}\n fields={fields}\n onApply={onApply}\n timeZone={timeZone}\n />\n );\n\n const selector = (\n <ConditionSelectorWithStore\n conditionStore={conditionStore}\n key={id}\n filterId={id}\n label={label ?? field.name}\n labelHidden={orientation === 'vertical'}\n fields={[\n {\n id: field.name,\n type: basicFieldMap[field.type],\n primary: label || field.name\n }\n ]}\n conditions={predefinedConditions ?? []}\n onApply={onApply ?? (() => {})}\n {...(orientation !== 'vertical' && { onClear: () => onClear(id) })}\n />\n );\n\n return orientation === 'vertical' ? (\n <StyledVerticalFieldGroup\n key={id}\n name={label ?? id}\n collapsed={collapsed}\n onToggleCollapsed={() => setCollapsed(cur => !cur)}\n actions={[\n {\n id: 'clear',\n text: t('clear'),\n onClick: () => onClear(id)\n }\n ]}\n >\n {selector}\n </StyledVerticalFieldGroup>\n ) : (\n selector\n );\n })}\n </Flex>\n );\n })\n);\n\nconst FilterModal = ({ filters, conditionStore, fields, onApply, onCancel }: FilterModalProps) => {\n const t = useI18n();\n\n const { dismiss, unmount } = useModalContext();\n\n const handleApplyClick = () => {\n onApply();\n unmount();\n };\n\n const actions = (\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button onClick={handleApplyClick}>{t('apply')}</Button>\n </>\n );\n\n return (\n <Modal heading={t('filters')} actions={actions} onBeforeClose={onCancel}>\n <PromotedFiltersContent\n filters={filters}\n conditionStore={conditionStore}\n orientation='vertical'\n fields={fields}\n />\n </Modal>\n );\n};\n\nexport const PromotedFilters: ForwardRefForwardPropsComponent<PromotedFiltersProps> = forwardRef(\n function PromotedFilters(\n {\n filters,\n condition,\n onChange,\n orientation = 'horizontal',\n fields,\n handle,\n timeZone\n }: PropsWithoutRef<PromotedFiltersProps>,\n ref: PromotedFiltersProps['ref']\n ) {\n const t = useI18n();\n\n const promotedFiltersRef = useRef<HTMLDivElement>(null);\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: promotedFiltersRef });\n const inline = isSmallOrAbove || rendersAsSingleInput(filters);\n const compact =\n rendersAsSingleInput(filters) && !isSmallOrAbove && orientation === 'horizontal';\n\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods<FilterModalProps>>();\n\n const conditionStore = useSimpleStoreInstance<{\n [key: string]: (LeafCondition & { filterId?: string }) | undefined;\n }>({});\n\n const prepareConditionForStore = useCallback(() => {\n return condition\n ? splitConditionForBuilder(condition).rows.reduce(\n (\n result: { [key: string]: (LeafCondition & { filterId?: string }) | undefined },\n item: ConditionRow & { filterId?: string }\n ) => {\n const { id, label, ...leaf } = item;\n result[leaf.filterId ?? leaf.lhs.field] = leaf;\n return result;\n },\n {}\n )\n : {};\n }, [condition]);\n\n useEffect(() => {\n conditionStore.setStore(prepareConditionForStore());\n }, [prepareConditionForStore]);\n\n const selectedCount = Object.values(conditionStore.getStore()).length;\n\n useImperativeHandle(\n handle,\n () => ({ getCondition: () => generateCondition(conditionStore.getStore()) }),\n []\n );\n\n const onApply = useCallback(() => {\n const storeValue = generateCondition(conditionStore.getStore());\n if (JSON.stringify(condition) !== JSON.stringify(storeValue)) onChange(storeValue);\n }, [onChange, prepareConditionForStore]);\n\n const onClear = useCallback(() => {\n if (condition) {\n conditionStore.setStore({});\n onChange();\n }\n }, [onChange, prepareConditionForStore]);\n\n const onCancel = useCallback(() => {\n conditionStore.setStore(prepareConditionForStore());\n }, [prepareConditionForStore]);\n\n useEffect(() => {\n modalMethods.current?.update({\n filters,\n conditionStore,\n fields\n });\n }, [filters, condition, fields]);\n\n const openFiltersModal = () => {\n modalMethods.current = create(FilterModal, {\n filters,\n conditionStore,\n fields,\n onApply,\n onCancel\n });\n };\n\n return (\n <StyledPromotedFilters\n $compact={compact}\n container={{\n alignItems: orientation === 'horizontal' && inline ? 'start' : undefined,\n justify: 'between',\n direction: orientation === 'vertical' && inline ? 'column' : 'row',\n wrap: compact ? 'wrap' : undefined,\n pad: 2,\n ...(compact ? { colGap: 2 } : { gap: 2 })\n }}\n ref={promotedFiltersRef}\n >\n {inline ? (\n <>\n {orientation === 'vertical' && (\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n pad: [0, 0, 1, 0]\n }}\n >\n <StyledTextWithEllipsis variant='h3'>{t('filters')}</StyledTextWithEllipsis>\n <div>\n <Button onClick={onClear}>{t('reset')}</Button>\n <Button onClick={onApply}>{t('apply')}</Button>\n </div>\n </Flex>\n )}\n\n <PromotedFiltersContent\n filters={filters}\n conditionStore={conditionStore}\n fields={fields}\n orientation={orientation}\n ref={ref}\n onApply={onApply}\n timeZone={timeZone}\n />\n\n {orientation === 'horizontal' && (\n <Flex container {...(compact && { item: { shrink: 0 } })}>\n <StyledPromotedFiltersButton onClick={onClear}>\n {t('reset')}\n </StyledPromotedFiltersButton>\n <StyledPromotedFiltersButton onClick={onApply}>\n {t('apply')}\n </StyledPromotedFiltersButton>\n </Flex>\n )}\n </>\n ) : (\n <>\n <Button type='button' variant='text' onClick={openFiltersModal}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} forwardedAs='span'>\n <Icon name='filter' />\n <span>\n {t('filters')}\n {!!selectedCount && `\\u00a0(${selectedCount})`}\n </span>\n </Flex>\n </Button>\n <Button onClick={onClear}>{t('reset')}</Button>\n </>\n )}\n </StyledPromotedFilters>\n );\n }\n);\n\nexport default PromotedFilters;\n"]}
package/lib/components/PromotedFilters/PromotedFilters.styles.d.ts CHANGED
@@ -1,4 +1,188 @@
1
- export declare const StyledPromotedFilters: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
1
+ export declare const StyledPromotedFilters: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
2
+ children?: import("react").ReactNode;
3
+ ref?: import("react").Ref<Element>;
4
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
5
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
6
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
7
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
8
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
9
+ }, "ref" | "className" | "children" | keyof import("@pega/cosmos-react-core").AsProp> & Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
10
+ children?: import("react").ReactNode;
11
+ ref?: import("react").Ref<Element>;
12
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
13
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
14
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
15
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
16
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
17
+ }, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
18
+ children?: import("react").ReactNode;
19
+ ref?: import("react").Ref<Element>;
20
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
21
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
22
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
23
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
24
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
25
+ }, "item" | "xs" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
26
+ ref?: ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<Element> | null | undefined;
27
+ }) | (Omit<Omit<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
28
+ children?: import("react").ReactNode;
29
+ ref?: import("react").Ref<Element>;
30
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
31
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
32
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
33
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
34
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
35
+ }, "ref" | "className" | "children" | keyof import("@pega/cosmos-react-core").AsProp> & Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
36
+ children?: import("react").ReactNode;
37
+ ref?: import("react").Ref<Element>;
38
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
39
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
40
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
41
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
42
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
43
+ }, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
44
+ children?: import("react").ReactNode;
45
+ ref?: import("react").Ref<Element>;
46
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
47
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
48
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
49
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
50
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
51
+ }, "container" | "xs" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
52
+ ref?: ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<Element> | null | undefined;
53
+ }) | (Omit<Omit<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
54
+ children?: import("react").ReactNode;
55
+ ref?: import("react").Ref<Element>;
56
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
57
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
58
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
59
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
60
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
61
+ }, "ref" | "className" | "children" | keyof import("@pega/cosmos-react-core").AsProp> & Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
62
+ children?: import("react").ReactNode;
63
+ ref?: import("react").Ref<Element>;
64
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
65
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
66
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
67
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
68
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
69
+ }, "xs">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
70
+ children?: import("react").ReactNode;
71
+ ref?: import("react").Ref<Element>;
72
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
73
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
74
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
75
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
76
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
77
+ }, "container" | "item" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
78
+ ref?: ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<Element> | null | undefined;
79
+ }) | (Omit<Omit<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
80
+ children?: import("react").ReactNode;
81
+ ref?: import("react").Ref<Element>;
82
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
83
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
84
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
85
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
86
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
87
+ }, "ref" | "className" | "children" | keyof import("@pega/cosmos-react-core").AsProp> & Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
88
+ children?: import("react").ReactNode;
89
+ ref?: import("react").Ref<Element>;
90
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
91
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
92
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
93
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
94
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
95
+ }, "xl">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
96
+ children?: import("react").ReactNode;
97
+ ref?: import("react").Ref<Element>;
98
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
99
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
100
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
101
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
102
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
103
+ }, "container" | "item" | "xs" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
104
+ ref?: ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<Element> | null | undefined;
105
+ }) | (Omit<Omit<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
106
+ children?: import("react").ReactNode;
107
+ ref?: import("react").Ref<Element>;
108
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
109
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
110
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
111
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
112
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
113
+ }, "ref" | "className" | "children" | keyof import("@pega/cosmos-react-core").AsProp> & Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
114
+ children?: import("react").ReactNode;
115
+ ref?: import("react").Ref<Element>;
116
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
117
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
118
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
119
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
120
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
121
+ }, "sm">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
122
+ children?: import("react").ReactNode;
123
+ ref?: import("react").Ref<Element>;
124
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
125
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
126
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
127
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
128
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
129
+ }, "container" | "item" | "xs" | "xl" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
130
+ ref?: ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<Element> | null | undefined;
131
+ }) | (Omit<Omit<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
132
+ children?: import("react").ReactNode;
133
+ ref?: import("react").Ref<Element>;
134
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
135
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
136
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
137
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
138
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
139
+ }, "ref" | "className" | "children" | keyof import("@pega/cosmos-react-core").AsProp> & Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
140
+ children?: import("react").ReactNode;
141
+ ref?: import("react").Ref<Element>;
142
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
143
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
144
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
145
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
146
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
147
+ }, "md">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
148
+ children?: import("react").ReactNode;
149
+ ref?: import("react").Ref<Element>;
150
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
151
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
152
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
153
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
154
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
155
+ }, "container" | "item" | "xs" | "xl" | "sm" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
156
+ ref?: ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<Element> | null | undefined;
157
+ }) | (Omit<Omit<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
158
+ children?: import("react").ReactNode;
159
+ ref?: import("react").Ref<Element>;
160
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
161
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
162
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
163
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
164
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
165
+ }, "ref" | "className" | "children" | keyof import("@pega/cosmos-react-core").AsProp> & Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
166
+ children?: import("react").ReactNode;
167
+ ref?: import("react").Ref<Element>;
168
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
169
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
170
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
171
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
172
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
173
+ }, "lg">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
174
+ children?: import("react").ReactNode;
175
+ ref?: import("react").Ref<Element>;
176
+ xs?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
177
+ sm?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
178
+ md?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
179
+ lg?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
180
+ xl?: Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps, "container">>));
181
+ }, "container" | "item" | "xs" | "xl" | "sm" | "md">>, "ref"> & import("react").RefAttributes<Element> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
182
+ ref?: ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<Element> | null | undefined;
183
+ }), {
184
+ $compact?: boolean;
185
+ }>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, keyof import("react").Component<any, {}, any>>;
2
186
  export declare const StyledPromotedFiltersButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
3
187
  ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
4
188
  }, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
package/lib/components/PromotedFilters/PromotedFilters.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PromotedFilters.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,6NAgBhC,CAAC;AAIH,eAAO,MAAM,2BAA2B;;2LAOvC,CAAC;AAIF,eAAO,MAAM,sBAAsB;;yLAIlC,CAAC"}
1
+ {"version":3,"file":"PromotedFilters.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAA6B,OAAO;kLAyBrE,CAAC;AAIF,eAAO,MAAM,2BAA2B;;2LAOvC,CAAC;AAIF,eAAO,MAAM,sBAAsB;;yLAIlC,CAAC"}
package/lib/components/PromotedFilters/PromotedFilters.styles.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import styled, { css } from 'styled-components';
2
- import { defaultThemeProp, Button, Text } from '@pega/cosmos-react-core';
2
+ import { defaultThemeProp, Button, Flex, Text } from '@pega/cosmos-react-core';
3
+ import { StyledFlex } from '@pega/cosmos-react-core/lib/components/Flex/Flex';
3
4
  import { StyledModalChildrenWrap } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';
4
5
  import { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.styles';
5
- export const StyledPromotedFilters = styled.div(({ theme }) => {
6
- return css `
6
+ export const StyledPromotedFilters = styled(Flex)(({ theme, $compact }) => css `
7
+ max-width: 100%;
7
8
  border-radius: var(--border-radius, ${theme.components.card['border-radius']});
8
9
  background-color: ${theme.base.palette['secondary-background']};
9
10
  padding-block: ${theme.base.spacing};
@@ -17,8 +18,15 @@ export const StyledPromotedFilters = styled.div(({ theme }) => {
17
18
  );
18
19
  }
19
20
  }
20
- `;
21
- });
21
+
22
+ ${$compact &&
23
+ css `
24
+ > ${StyledFlex}:first-child {
25
+ flex: 1 1 0%;
26
+ min-width: min-content;
27
+ }
28
+ `}
29
+ `);
22
30
  StyledPromotedFilters.defaultProps = defaultThemeProp;
23
31
  export const StyledPromotedFiltersButton = styled(Button) `
24
32
  margin: 1.125rem 0 0.625rem;
package/lib/components/PromotedFilters/PromotedFilters.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PromotedFilters.styles.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2DAA2D,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,iEAAiE,CAAC;AAEpG,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;0CAC8B,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;wBACxD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;qBAC7C,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEjC,iBAAiB;wBACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;;YAInF,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;GAIjF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;IAIrD,uBAAuB;;;CAG1B,CAAC;AAEF,2BAA2B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Button, Text } from '@pega/cosmos-react-core';\nimport { StyledModalChildrenWrap } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';\nimport { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.styles';\n\nexport const StyledPromotedFilters = styled.div(({ theme }) => {\n return css`\n border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n background-color: ${theme.base.palette['secondary-background']};\n padding-block: ${theme.base.spacing};\n\n ${StyledSelectInput} {\n min-width: calc(${theme.base['content-width'].xs} + ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(\n ${theme.base['content-width'].xs} + ${theme.base['hit-area']['finger-min']}\n );\n }\n }\n `;\n});\n\nStyledPromotedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledPromotedFiltersButton = styled(Button)`\n margin: 1.125rem 0 0.625rem;\n white-space: nowrap;\n\n ${StyledModalChildrenWrap} & {\n margin-top: 0;\n }\n`;\n\nStyledPromotedFiltersButton.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"PromotedFilters.styles.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAC9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,2DAA2D,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,iEAAiE,CAAC;AAEpG,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;0CAEY,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;wBACxD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;qBAC7C,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEjC,iBAAiB;wBACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;;YAInF,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;MAK9E,QAAQ;IACV,GAAG,CAAA;UACG,UAAU;;;;KAIf;GACF,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;IAIrD,uBAAuB;;;CAG1B,CAAC;AAEF,2BAA2B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Button, Flex, Text } from '@pega/cosmos-react-core';\nimport { StyledFlex } from '@pega/cosmos-react-core/lib/components/Flex/Flex';\nimport { StyledModalChildrenWrap } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';\nimport { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.styles';\n\nexport const StyledPromotedFilters = styled(Flex)<{ $compact?: boolean }>(\n ({ theme, $compact }) => css`\n max-width: 100%;\n border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n background-color: ${theme.base.palette['secondary-background']};\n padding-block: ${theme.base.spacing};\n\n ${StyledSelectInput} {\n min-width: calc(${theme.base['content-width'].xs} + ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(\n ${theme.base['content-width'].xs} + ${theme.base['hit-area']['finger-min']}\n );\n }\n }\n\n ${$compact &&\n css`\n > ${StyledFlex}:first-child {\n flex: 1 1 0%;\n min-width: min-content;\n }\n `}\n `\n);\n\nStyledPromotedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledPromotedFiltersButton = styled(Button)`\n margin: 1.125rem 0 0.625rem;\n white-space: nowrap;\n\n ${StyledModalChildrenWrap} & {\n margin-top: 0;\n }\n`;\n\nStyledPromotedFiltersButton.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-condition-builder",
3
- "version": "9.0.0-build.29.15",
3
+ "version": "9.0.0-build.29.16",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "Pegasystems",
6
6
  "sideEffects": [
@@ -17,7 +17,7 @@
17
17
  "build": "tsc -b tsconfig.build.json"
18
18
  },
19
19
  "dependencies": {
20
- "@pega/cosmos-react-core": "9.0.0-build.29.15",
20
+ "@pega/cosmos-react-core": "9.0.0-build.29.16",
21
21
  "@types/react": "^17.0.62 || ^18.3.3",
22
22
  "@types/react-dom": "^17.0.20 || ^18.3.0",
23
23
  "dayjs": "^1.11.13",