pixel-react 1.7.9 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AllProjectsDropdown/types.d.ts +2 -0
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
- package/lib/components/Select/Select.stories.d.ts +1 -0
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.esm.js +15 -18
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +15 -18
- package/lib/index.js.map +1 -1
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/package.json +2 -2
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/AllProjectsDropdown/types.ts +2 -0
- package/src/components/AppHeader/AppHeader.scss +6 -2
- /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './AddButton';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './AddVariables';
|
@@ -0,0 +1,35 @@
|
|
1
|
+
export type dynamicObject = {
|
2
|
+
[key: string]: any;
|
3
|
+
};
|
4
|
+
export interface AddVariableProps {
|
5
|
+
/**
|
6
|
+
* Label for the field
|
7
|
+
*/
|
8
|
+
label?: string;
|
9
|
+
/**
|
10
|
+
* List of variables
|
11
|
+
*/
|
12
|
+
variableList?: dynamicObject[];
|
13
|
+
/**
|
14
|
+
* Place holder for the input field
|
15
|
+
*/
|
16
|
+
placeholder?: string;
|
17
|
+
/**
|
18
|
+
* Function to handle input change
|
19
|
+
* @param value
|
20
|
+
* @returns
|
21
|
+
*/
|
22
|
+
onChange: (value: string) => void;
|
23
|
+
/**
|
24
|
+
* Function to handle create variable icon click
|
25
|
+
*/
|
26
|
+
onCreateVariableClick?: () => void;
|
27
|
+
/**
|
28
|
+
* Value of the input field
|
29
|
+
*/
|
30
|
+
value: string;
|
31
|
+
/**
|
32
|
+
* Width of the dropdown
|
33
|
+
*/
|
34
|
+
dropdownWidth?: string;
|
35
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import AttachImage from './AttachImage';
|
3
|
+
import { AttachImageProps } from './types';
|
4
|
+
declare const meta: Meta<typeof AttachImage>;
|
5
|
+
export default meta;
|
6
|
+
type Story = StoryObj<AttachImageProps>;
|
7
|
+
export declare const Default: Story;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import IconRadialChart from './IconRadialChart';
|
3
|
+
declare const meta: Meta<typeof IconRadialChart>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof IconRadialChart>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const Mobile: Story;
|
8
|
+
export declare const WithoutIcon: Story;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import LineChart from './LineChart';
|
3
|
+
import { LineChartProps } from './types';
|
4
|
+
declare const meta: Meta<typeof LineChart>;
|
5
|
+
export default meta;
|
6
|
+
export declare const DefaultLineChart: StoryObj<LineChartProps>;
|
7
|
+
export declare const StatusLineChart: StoryObj<LineChartProps>;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import MultiRadialChart from './MultiRadialChart';
|
3
|
+
declare const meta: Meta<typeof MultiRadialChart>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof MultiRadialChart>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const numberLegend: Story;
|
8
|
+
export declare const PillLegend: Story;
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import ConnectingBranch from './ConnectingBranch';
|
3
|
+
declare const meta: Meta<typeof ConnectingBranch>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof ConnectingBranch>;
|
6
|
+
export declare const Default: Story;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import EditTextField from './EditTextField';
|
3
|
+
import '../../assets/styles/_colors.scss';
|
4
|
+
import './EditTextField.scss';
|
5
|
+
declare const meta: Meta<typeof EditTextField>;
|
6
|
+
type Story = StoryObj<typeof EditTextField>;
|
7
|
+
export declare const textFieldWithLabel: Story;
|
8
|
+
export declare const textFieldWithOutLabel: Story;
|
9
|
+
export declare const openTextField: Story;
|
10
|
+
export default meta;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { CellBase } from "./ExcelFile/Excel";
|
2
|
+
interface ChangeExcelStylesOptions {
|
3
|
+
sheetName: string;
|
4
|
+
styleType: string;
|
5
|
+
value: string;
|
6
|
+
selectedCell: {
|
7
|
+
row: number;
|
8
|
+
column: number;
|
9
|
+
}[];
|
10
|
+
}
|
11
|
+
export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
|
12
|
+
[key: string]: Matrix<CellBase>;
|
13
|
+
}>>, options: ChangeExcelStylesOptions): void;
|
14
|
+
export {};
|
@@ -0,0 +1,24 @@
|
|
1
|
+
interface CellStyle {
|
2
|
+
color?: string;
|
3
|
+
backgroundColor?: string;
|
4
|
+
bold?: boolean;
|
5
|
+
italic?: boolean;
|
6
|
+
name?: string;
|
7
|
+
border: {
|
8
|
+
top: string;
|
9
|
+
bottom: string;
|
10
|
+
left: string;
|
11
|
+
right: string;
|
12
|
+
};
|
13
|
+
alignment: {
|
14
|
+
horizontal?: string;
|
15
|
+
vertical?: string;
|
16
|
+
wrapText?: boolean;
|
17
|
+
};
|
18
|
+
}
|
19
|
+
interface CellData {
|
20
|
+
style?: CellStyle;
|
21
|
+
}
|
22
|
+
type ImportExcelStylesData = Array<Array<CellData>>;
|
23
|
+
export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
|
24
|
+
export {};
|
@@ -6,6 +6,8 @@ declare const meta: Meta<typeof LabelEditTextField>;
|
|
6
6
|
type Story = StoryObj<typeof LabelEditTextField>;
|
7
7
|
export declare const textField: Story;
|
8
8
|
export declare const textFieldWithOutLabel: Story;
|
9
|
+
export declare const openTextFieldWithOutLabel: Story;
|
9
10
|
export declare const textFieldWithDropdown: Story;
|
10
11
|
export declare const textFieldWithHighlight: Story;
|
12
|
+
export declare const openLabelEditTextField: Story;
|
11
13
|
export default meta;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import Card from './StatusCard';
|
3
|
+
import { CardProps } from './types';
|
4
|
+
declare const meta: Meta<typeof Card>;
|
5
|
+
export default meta;
|
6
|
+
type Story = StoryObj<CardProps>;
|
7
|
+
export declare const Passed: Story;
|
8
|
+
export declare const Failed: Story;
|
9
|
+
export declare const Warning: Story;
|
10
|
+
export declare const Skipped: Story;
|
11
|
+
export declare const Flaky: Story;
|
package/lib/index.d.ts
CHANGED
package/lib/index.esm.js
CHANGED
@@ -8021,7 +8021,7 @@ function createFormControl(props = {}) {
|
|
8021
8021
|
timer = setTimeout(callback, wait);
|
8022
8022
|
};
|
8023
8023
|
const _updateValid = async (shouldUpdateValid) => {
|
8024
|
-
if (!
|
8024
|
+
if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
8025
8025
|
const isValid = _options.resolver
|
8026
8026
|
? isEmptyObject((await _executeSchema()).errors)
|
8027
8027
|
: await executeBuiltInValidation(_fields, true);
|
@@ -8033,7 +8033,7 @@ function createFormControl(props = {}) {
|
|
8033
8033
|
}
|
8034
8034
|
};
|
8035
8035
|
const _updateIsValidating = (names, isValidating) => {
|
8036
|
-
if (!
|
8036
|
+
if (!props.disabled &&
|
8037
8037
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
8038
8038
|
(names || Array.from(_names.mount)).forEach((name) => {
|
8039
8039
|
if (name) {
|
@@ -8049,7 +8049,7 @@ function createFormControl(props = {}) {
|
|
8049
8049
|
}
|
8050
8050
|
};
|
8051
8051
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
8052
|
-
if (args && method && !
|
8052
|
+
if (args && method && !props.disabled) {
|
8053
8053
|
_state.action = true;
|
8054
8054
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
8055
8055
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
@@ -8113,7 +8113,7 @@ function createFormControl(props = {}) {
|
|
8113
8113
|
const output = {
|
8114
8114
|
name,
|
8115
8115
|
};
|
8116
|
-
if (!
|
8116
|
+
if (!props.disabled) {
|
8117
8117
|
const disabledField = !!(get$1(_fields, name) &&
|
8118
8118
|
get$1(_fields, name)._f &&
|
8119
8119
|
get$1(_fields, name)._f.disabled);
|
@@ -8249,7 +8249,7 @@ function createFormControl(props = {}) {
|
|
8249
8249
|
}
|
8250
8250
|
_names.unMount = new Set();
|
8251
8251
|
};
|
8252
|
-
const _getDirty = (name, data) => !
|
8252
|
+
const _getDirty = (name, data) => !props.disabled &&
|
8253
8253
|
(name && data && set$1(_formValues, name, data),
|
8254
8254
|
!deepEqual(getValues(), _defaultValues));
|
8255
8255
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
@@ -8565,7 +8565,7 @@ function createFormControl(props = {}) {
|
|
8565
8565
|
};
|
8566
8566
|
const register = (name, options = {}) => {
|
8567
8567
|
let field = get$1(_fields, name);
|
8568
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
8568
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
|
8569
8569
|
set$1(_fields, name, {
|
8570
8570
|
...(field || {}),
|
8571
8571
|
_f: {
|
@@ -8581,7 +8581,7 @@ function createFormControl(props = {}) {
|
|
8581
8581
|
field,
|
8582
8582
|
disabled: isBoolean(options.disabled)
|
8583
8583
|
? options.disabled
|
8584
|
-
:
|
8584
|
+
: props.disabled,
|
8585
8585
|
name,
|
8586
8586
|
value: options.value,
|
8587
8587
|
});
|
@@ -8591,7 +8591,7 @@ function createFormControl(props = {}) {
|
|
8591
8591
|
}
|
8592
8592
|
return {
|
8593
8593
|
...(disabledIsDefined
|
8594
|
-
? { disabled: options.disabled ||
|
8594
|
+
? { disabled: options.disabled || props.disabled }
|
8595
8595
|
: {}),
|
8596
8596
|
...(_options.progressive
|
8597
8597
|
? {
|
@@ -8675,12 +8675,6 @@ function createFormControl(props = {}) {
|
|
8675
8675
|
e.preventDefault && e.preventDefault();
|
8676
8676
|
e.persist && e.persist();
|
8677
8677
|
}
|
8678
|
-
if (_options.disabled) {
|
8679
|
-
if (onInvalid) {
|
8680
|
-
await onInvalid({ ..._formState.errors }, e);
|
8681
|
-
}
|
8682
|
-
return;
|
8683
|
-
}
|
8684
8678
|
let fieldValues = cloneObject(_formValues);
|
8685
8679
|
_subjects.state.next({
|
8686
8680
|
isSubmitting: true,
|
@@ -8859,9 +8853,7 @@ function createFormControl(props = {}) {
|
|
8859
8853
|
: fieldReference.ref;
|
8860
8854
|
if (fieldRef.focus) {
|
8861
8855
|
fieldRef.focus();
|
8862
|
-
options.shouldSelect &&
|
8863
|
-
isFunction$1(fieldRef.select) &&
|
8864
|
-
fieldRef.select();
|
8856
|
+
options.shouldSelect && fieldRef.select();
|
8865
8857
|
}
|
8866
8858
|
}
|
8867
8859
|
};
|
@@ -9062,6 +9054,11 @@ function useForm(props = {}) {
|
|
9062
9054
|
values: control._getWatch(),
|
9063
9055
|
});
|
9064
9056
|
}, [props.shouldUnregister, control]);
|
9057
|
+
React__default.useEffect(() => {
|
9058
|
+
if (_formControl.current) {
|
9059
|
+
_formControl.current.watch = _formControl.current.watch.bind({});
|
9060
|
+
}
|
9061
|
+
}, [formState]);
|
9065
9062
|
_formControl.current.formState = getProxyFormState(formState, control);
|
9066
9063
|
return _formControl.current;
|
9067
9064
|
}
|
@@ -23690,7 +23687,7 @@ const PieChart = ({
|
|
23690
23687
|
});
|
23691
23688
|
};
|
23692
23689
|
|
23693
|
-
var css_248z$D = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding:
|
23690
|
+
var css_248z$D = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 4px;\n padding-bottom: 16px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 700px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n margin: 0px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
|
23694
23691
|
styleInject(css_248z$D);
|
23695
23692
|
|
23696
23693
|
const AppHeader = ({
|