react-restyle-components 0.4.46 → 0.4.47
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/index.js +1 -3
- package/lib/src/core-components/index.js +1 -1
- package/lib/src/core-components/src/components/Accordion/AccordionSection/Accordion.js +1 -15
- package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionContext.js +1 -6
- package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.js +1 -39
- package/lib/src/core-components/src/components/Accordion/AccordionSection/Header.js +1 -39
- package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.js +57 -94
- package/lib/src/core-components/src/components/Accordion/AccordionSection/hooks/useCurrentAccordionIndex.js +1 -13
- package/lib/src/core-components/src/components/Accordion/AccordionSection/index.js +1 -3
- package/lib/src/core-components/src/components/Accordion/AccordionSection/types.js +1 -9
- package/lib/src/core-components/src/components/Accordion/Collapsible/Collapsible2.component.js +1 -249
- package/lib/src/core-components/src/components/Action/types.js +1 -8
- package/lib/src/core-components/src/components/AlertBanner/AlertBanner.js +1 -45
- package/lib/src/core-components/src/components/AlertBanner/elements.js +45 -120
- package/lib/src/core-components/src/components/AlertBanner/index.js +1 -2
- package/lib/src/core-components/src/components/AlertBanner/types.js +1 -10
- package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.js +1 -451
- package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multi-select-multi-fields-display-drag-drop/auto-complete-filter-multi-select-multi-fields-display-drag-drop.component.js +1 -229
- package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component.js +1 -174
- package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +2 -129
- package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.js +1 -55
- package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +2 -308
- package/lib/src/core-components/src/components/AutoComplete/auto-complete-group-by/auto-complete-group-by.component.js +1 -115
- package/lib/src/core-components/src/components/AutoComplete/autocomplete/autocomplete.js +2 -442
- package/lib/src/core-components/src/components/AutoComplete/index.js +1 -8
- package/lib/src/core-components/src/components/Avatar/Avatar.js +14 -148
- package/lib/src/core-components/src/components/Badge/Badge.js +2 -25
- package/lib/src/core-components/src/components/Badge/InnerBadge/Inline.js +1 -25
- package/lib/src/core-components/src/components/Badge/InnerBadge/InnerBadge.js +1 -25
- package/lib/src/core-components/src/components/Badge/InnerBadge/elements.js +32 -78
- package/lib/src/core-components/src/components/Badge/InnerBadge/index.js +1 -1
- package/lib/src/core-components/src/components/Badge/index.js +1 -1
- package/lib/src/core-components/src/components/Badge/types.js +1 -5
- package/lib/src/core-components/src/components/Breadcrumb/Breadcrumb.js +1 -83
- package/lib/src/core-components/src/components/Breadcrumb/elements.js +94 -166
- package/lib/src/core-components/src/components/Breadcrumb/index.js +1 -3
- package/lib/src/core-components/src/components/Breadcrumb/types.js +1 -3
- package/lib/src/core-components/src/components/Button/button.component.js +1 -18
- package/lib/src/core-components/src/components/Button/buttonGroup/buttonGroup.component.js +1 -4
- package/lib/src/core-components/src/components/Button/index.js +1 -2
- package/lib/src/core-components/src/components/Button/types.js +1 -1
- package/lib/src/core-components/src/components/Chip/Chip.js +1 -64
- package/lib/src/core-components/src/components/Chip/elements.js +48 -148
- package/lib/src/core-components/src/components/Chip/index.js +1 -2
- package/lib/src/core-components/src/components/Chip/types.js +1 -4
- package/lib/src/core-components/src/components/Divider/Divider.js +1 -25
- package/lib/src/core-components/src/components/Divider/elements.js +31 -68
- package/lib/src/core-components/src/components/Divider/index.js +1 -2
- package/lib/src/core-components/src/components/Divider/types.js +1 -4
- package/lib/src/core-components/src/components/DynamicGrid/DynamicGrid.js +1 -147
- package/lib/src/core-components/src/components/DynamicGrid/GridContainer.js +17 -24
- package/lib/src/core-components/src/components/DynamicGrid/elements.js +100 -162
- package/lib/src/core-components/src/components/DynamicGrid/index.js +1 -3
- package/lib/src/core-components/src/components/DynamicGrid/types.js +1 -28
- package/lib/src/core-components/src/components/DynamicGrid/utils.js +1 -193
- package/lib/src/core-components/src/components/FormField/FormField.js +1 -103
- package/lib/src/core-components/src/components/FormField/components/CheckboxGroupInput.js +1 -37
- package/lib/src/core-components/src/components/FormField/components/CheckboxInput.js +1 -8
- package/lib/src/core-components/src/components/FormField/components/CssMultilineInput.js +1 -192
- package/lib/src/core-components/src/components/FormField/components/DatePickerInput.js +1 -99
- package/lib/src/core-components/src/components/FormField/components/DropdownInput.js +1 -70
- package/lib/src/core-components/src/components/FormField/components/OtpInput.js +1 -81
- package/lib/src/core-components/src/components/FormField/components/PasswordInput.js +1 -40
- package/lib/src/core-components/src/components/FormField/components/PinInput.js +1 -75
- package/lib/src/core-components/src/components/FormField/components/RadioInput.js +1 -54
- package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.js +1 -94
- package/lib/src/core-components/src/components/FormField/components/ToggleInput.js +1 -36
- package/lib/src/core-components/src/components/FormField/components/index.js +1 -11
- package/lib/src/core-components/src/components/FormField/css-properties.js +1 -161
- package/lib/src/core-components/src/components/FormField/index.js +1 -2
- package/lib/src/core-components/src/components/Icon/Icon.js +1 -159
- package/lib/src/core-components/src/components/Icon/index.js +1 -2
- package/lib/src/core-components/src/components/Icon/types.js +1 -9
- package/lib/src/core-components/src/components/Loader/loader.component.js +2 -215
- package/lib/src/core-components/src/components/Masonry/Masonry.js +1 -73
- package/lib/src/core-components/src/components/Masonry/elements.js +29 -46
- package/lib/src/core-components/src/components/Masonry/hooks.js +1 -100
- package/lib/src/core-components/src/components/Masonry/index.js +1 -3
- package/lib/src/core-components/src/components/Masonry/types.js +1 -1
- package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.js +1 -116
- package/lib/src/core-components/src/components/Modal/index.js +1 -2
- package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.js +1 -147
- package/lib/src/core-components/src/components/Picker/color-picker/color-picker.component.js +1 -12
- package/lib/src/core-components/src/components/Picker/color-picker-modal/color-picker-modal.component.js +1 -40
- package/lib/src/core-components/src/components/Picker/index.js +1 -2
- package/lib/src/core-components/src/components/Selection/index.js +1 -4
- package/lib/src/core-components/src/components/Selection/multi-select/multi-select.component.js +1 -49
- package/lib/src/core-components/src/components/Selection/multi-select-with-field/multi-select-with-field.component.js +1 -58
- package/lib/src/core-components/src/components/Selection/multi-selection-dropdown/multi-selection-dropdown.component.js +1 -43
- package/lib/src/core-components/src/components/Selection/single-select/single-select.component.js +1 -87
- package/lib/src/core-components/src/components/Skeleton/Skeleton.js +1 -51
- package/lib/src/core-components/src/components/Skeleton/elements.js +54 -143
- package/lib/src/core-components/src/components/Skeleton/index.js +1 -2
- package/lib/src/core-components/src/components/Skeleton/types.js +1 -4
- package/lib/src/core-components/src/components/SpeedDial/SpeedDial.js +1 -128
- package/lib/src/core-components/src/components/SpeedDial/elements.js +62 -132
- package/lib/src/core-components/src/components/SpeedDial/index.js +1 -2
- package/lib/src/core-components/src/components/SpeedDial/types.js +1 -3
- package/lib/src/core-components/src/components/Stepper2/stepper.component.js +1 -139
- package/lib/src/core-components/src/components/Switch/Switch.js +1 -26
- package/lib/src/core-components/src/components/Switch/elements.js +34 -103
- package/lib/src/core-components/src/components/Switch/index.js +1 -2
- package/lib/src/core-components/src/components/Switch/types.js +1 -3
- package/lib/src/core-components/src/components/Table/Table.js +1 -1489
- package/lib/src/core-components/src/components/Table/columnReorder.js +36 -332
- package/lib/src/core-components/src/components/Table/columnResize.js +21 -284
- package/lib/src/core-components/src/components/Table/elements.js +173 -277
- package/lib/src/core-components/src/components/Table/filters.js +30 -555
- package/lib/src/core-components/src/components/Table/hooks.js +2 -536
- package/lib/src/core-components/src/components/Table/index.js +1 -6
- package/lib/src/core-components/src/components/Table/types.js +1 -1
- package/lib/src/core-components/src/components/Tabs/tabs.component.js +1 -22
- package/lib/src/core-components/src/components/Tags1/Tags.component.js +1 -118
- package/lib/src/core-components/src/components/Tags1/types.js +1 -20
- package/lib/src/core-components/src/components/Timer1/timer.component.js +1 -76
- package/lib/src/core-components/src/components/Toast/Toast.js +1 -50
- package/lib/src/core-components/src/components/Toast/elements.js +41 -122
- package/lib/src/core-components/src/components/Toast/index.js +1 -2
- package/lib/src/core-components/src/components/Toast/types.js +1 -9
- package/lib/src/core-components/src/components/Tooltip/Tooltip.js +1 -200
- package/lib/src/core-components/src/components/Tooltip/elements.js +55 -117
- package/lib/src/core-components/src/components/Tooltip/index.js +1 -2
- package/lib/src/core-components/src/components/Tooltip/types.js +1 -17
- package/lib/src/core-components/src/components/Tooltip/utils.js +1 -140
- package/lib/src/core-components/src/components/TreeSelect/TreeSelect.js +1 -303
- package/lib/src/core-components/src/components/TreeSelect/elements.js +117 -216
- package/lib/src/core-components/src/components/TreeSelect/hooks.js +1 -252
- package/lib/src/core-components/src/components/TreeSelect/index.js +1 -3
- package/lib/src/core-components/src/components/TreeSelect/types.js +1 -1
- package/lib/src/core-components/src/components/ag-grid/AgGrid.js +1 -1057
- package/lib/src/core-components/src/components/ag-grid/elements.js +396 -790
- package/lib/src/core-components/src/components/ag-grid/hooks.js +4 -1220
- package/lib/src/core-components/src/components/ag-grid/index.js +1 -15
- package/lib/src/core-components/src/components/ag-grid/types.js +1 -6
- package/lib/src/core-components/src/components/index.js +1 -31
- package/lib/src/core-components/src/components/pdf/pdf-images.components.js +1 -7
- package/lib/src/core-components/src/components/pdf/pdf-table.components.js +5 -48
- package/lib/src/core-components/src/components/pdf/pdf-typography.components.js +1 -70
- package/lib/src/core-components/src/components/pdf/pdf-wrapped-view.components.js +1 -50
- package/lib/src/core-components/src/core-components/Avatar.js +4 -33
- package/lib/src/core-components/src/core-components/CoreButton/CoreButton.js +1 -10
- package/lib/src/core-components/src/core-components/CoreButton/elements.js +67 -176
- package/lib/src/core-components/src/core-components/CoreButton/index.js +1 -3
- package/lib/src/core-components/src/core-components/CoreButton/types.js +1 -6
- package/lib/src/core-components/src/core-components/CoreButton/utils.js +1 -12
- package/lib/src/core-components/src/core-components/Divider/Divider.js +4 -19
- package/lib/src/core-components/src/core-components/Divider/index.js +1 -1
- package/lib/src/core-components/src/core-components/SelectionCardStrip/index.js +1 -1
- package/lib/src/core-components/src/core-components/SelectionCardStrip/selectionCardStrip.js +10 -33
- package/lib/src/core-components/src/core-components/StateLayer.js +3 -5
- package/lib/src/core-components/src/core-components/ToggleCore/elements.js +25 -50
- package/lib/src/core-components/src/core-components/ToggleCore/index.js +1 -2
- package/lib/src/core-components/src/core-components/ToggleCore/toggleCore.js +1 -14
- package/lib/src/core-components/src/core-components/atoms/Input/Input.js +1 -22
- package/lib/src/core-components/src/core-components/atoms/Label/Label.js +1 -21
- package/lib/src/core-components/src/core-components/atoms/Textarea/Textarea.js +1 -19
- package/lib/src/core-components/src/core-components/index.js +1 -3
- package/lib/src/core-components/src/helpers/constants.js +1 -11
- package/lib/src/core-components/src/hooks/index.js +1 -1
- package/lib/src/core-components/src/hooks/outside.hook.js +1 -28
- package/lib/src/core-components/src/index.js +1 -12
- package/lib/src/core-components/src/tc.global.css +1 -0
- package/lib/src/core-components/src/utils/abstracts/breakpoints/index.js +1 -28
- package/lib/src/core-components/src/utils/abstracts/colors/index.js +1 -49
- package/lib/src/core-components/src/utils/abstracts/index.js +1 -5
- package/lib/src/core-components/src/utils/abstracts/space/index.js +1 -26
- package/lib/src/core-components/src/utils/abstracts/theme/ThemeBoundary.js +1 -8
- package/lib/src/core-components/src/utils/abstracts/theme/default-themes.js +1 -30
- package/lib/src/core-components/src/utils/abstracts/theme/index.js +1 -3
- package/lib/src/core-components/src/utils/abstracts/theme/theme.js +1 -30
- package/lib/src/core-components/src/utils/abstracts/theme/types.js +1 -1
- package/lib/src/core-components/src/utils/abstracts/theme/useTheme.js +1 -17
- package/lib/src/core-components/src/utils/abstracts/typography/index.js +1 -25
- package/lib/src/core-components/src/utils/context/DefaultsProvider.js +1 -8
- package/lib/src/core-components/src/utils/context/InternalProvider.js +1 -24
- package/lib/src/core-components/src/utils/context/index.js +1 -2
- package/lib/src/core-components/src/utils/designTokens.js +1 -128
- package/lib/src/core-components/src/utils/helpers/attachSubComponents.js +1 -23
- package/lib/src/core-components/src/utils/helpers/flattenChildren.js +1 -11
- package/lib/src/core-components/src/utils/helpers/getChildByType.js +1 -3
- package/lib/src/core-components/src/utils/helpers/index.js +1 -5
- package/lib/src/core-components/src/utils/helpers/isComponentType.js +1 -16
- package/lib/src/core-components/src/utils/helpers/separateChildrenByType.js +1 -12
- package/lib/src/core-components/src/utils/hooks/index.js +1 -18
- package/lib/src/core-components/src/utils/hooks/useClickOutside.js +1 -18
- package/lib/src/core-components/src/utils/hooks/useCombinedRefs.js +1 -17
- package/lib/src/core-components/src/utils/hooks/useDebouncedCallback.js +1 -12
- package/lib/src/core-components/src/utils/hooks/useDebouncedValue.js +1 -20
- package/lib/src/core-components/src/utils/hooks/useDeprecation.js +1 -40
- package/lib/src/core-components/src/utils/hooks/useDeviceDetect.js +1 -10
- package/lib/src/core-components/src/utils/hooks/useDeviceForm.js +1 -24
- package/lib/src/core-components/src/utils/hooks/useDisableBodyScroll.js +1 -16
- package/lib/src/core-components/src/utils/hooks/useHoverState.js +1 -36
- package/lib/src/core-components/src/utils/hooks/useId.js +1 -7
- package/lib/src/core-components/src/utils/hooks/useIsBrowser.js +1 -11
- package/lib/src/core-components/src/utils/hooks/useMediaQuery.js +1 -16
- package/lib/src/core-components/src/utils/hooks/useOverflow.js +1 -22
- package/lib/src/core-components/src/utils/hooks/useSafeLayoutEffect.js +1 -5
- package/lib/src/core-components/src/utils/hooks/useScrollingUp.js +1 -18
- package/lib/src/core-components/src/utils/hooks/useTrapFocus.js +1 -30
- package/lib/src/core-components/src/utils/hooks/useWindowDimensions.js +1 -23
- package/lib/src/core-components/src/utils/index.js +1 -9
- package/lib/src/core-components/src/utils/stories/Wrappers.js +8 -23
- package/lib/src/core-components/src/utils/stories/cleanProps.js +1 -5
- package/lib/src/core-components/src/utils/stories/index.js +1 -4
- package/lib/src/core-components/src/utils/stories/sleep.js +1 -4
- package/lib/src/core-components/src/utils/stories/view-ports.js +1 -50
- package/lib/src/core-components/src/utils/styling/calcWidthOfColumns.js +1 -5
- package/lib/src/core-components/src/utils/styling/createGridContainer.js +6 -12
- package/lib/src/core-components/src/utils/styling/createTransition.js +2 -7
- package/lib/src/core-components/src/utils/styling/forwardProps.js +1 -10
- package/lib/src/core-components/src/utils/styling/index.js +1 -5
- package/lib/src/core-components/src/utils/styling/pxToRem.js +1 -6
- package/lib/src/core-components/src/utils/testing/getComputedStyle.js +1 -3
- package/lib/src/core-components/src/utils/testing/index.js +1 -1
- package/lib/src/core-components/src/utils/utility.util.js +1 -14
- package/lib/src/core-components/tailwind.config.js +1 -233
- package/lib/src/core-hooks/index.js +1 -3
- package/lib/src/core-hooks/src/useClickOutside/useClickOutside.hook.js +1 -46
- package/lib/src/core-hooks/src/useDebounce/useDebounce.hook.js +1 -30
- package/lib/src/core-hooks/src/usePreventEKey/usePreventEKey.hook.js +1 -8
- package/lib/src/core-utils/index.js +1 -7
- package/lib/src/core-utils/src/calculation/calculation.util.js +1 -89
- package/lib/src/core-utils/src/colors/color.util.js +1 -15
- package/lib/src/core-utils/src/convert/numberToWords/numToWords.util.js +1 -145
- package/lib/src/core-utils/src/convert/typography/camelCaseToTitleCase.util.js +1 -5
- package/lib/src/core-utils/src/form-helper/form-helper.util.js +1 -82
- package/lib/src/core-utils/src/index.js +1 -7
- package/lib/src/core-utils/src/utility/utility.util.js +1 -12
- package/lib/src/core-utils/src/uuid/uuid.util.js +1 -8
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
"use strict";export*from"./src/components";
|
|
@@ -1,15 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import AccordionContext from './AccordionContext';
|
|
5
|
-
import { AccordionElement } from './elements';
|
|
6
|
-
import { usePropDeprecation } from '../../../utils';
|
|
7
|
-
export const Accordion = React.forwardRef(({ ariaLabel = '', variant = 'inline', numbered = false, children, ...props }, fRef) => {
|
|
8
|
-
usePropDeprecation({
|
|
9
|
-
name: 'numbered',
|
|
10
|
-
version: '5.0.0',
|
|
11
|
-
alternative: 'AccordionSection.Header.Leading and AccordionSection.Header.Trailing',
|
|
12
|
-
value: numbered,
|
|
13
|
-
});
|
|
14
|
-
return (_jsx(AccordionContext.Provider, { value: { variant, numbered }, children: _jsx(AccordionElement, { "data-aui": "accordion", "aria-label": ariaLabel, ref: fRef, "$variant": variant, ...props, children: children }) }));
|
|
15
|
-
});
|
|
1
|
+
"use strict";"use client";import{jsx as o}from"react/jsx-runtime";import t from"react";import d from"./AccordionContext";import{AccordionElement as l}from"./elements";import{usePropDeprecation as m}from"../../../utils";export const Accordion=t.forwardRef(({ariaLabel:i="",variant:r="inline",numbered:e=!1,children:n,...a},c)=>(m({name:"numbered",version:"5.0.0",alternative:"AccordionSection.Header.Leading and AccordionSection.Header.Trailing",value:e}),o(d.Provider,{value:{variant:r,numbered:e},children:o(l,{"data-aui":"accordion","aria-label":i,ref:c,$variant:r,...a,children:n})})));
|
package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionContext.js
CHANGED
|
@@ -1,6 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
const AccordionContext = createContext({
|
|
3
|
-
variant: 'inline',
|
|
4
|
-
numbered: false,
|
|
5
|
-
});
|
|
6
|
-
export default AccordionContext;
|
|
1
|
+
"use strict";import{createContext as e}from"react";const t=e({variant:"inline",numbered:!1});export default t;
|
package/lib/src/core-components/src/components/Accordion/AccordionSection/AccordionSection.js
CHANGED
|
@@ -1,39 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import React, { useContext, useRef, useState, useEffect } from 'react';
|
|
4
|
-
import { ButtonElement, AccordionSectionWrapper, AccordionSectionContent, AccordionDivider, AccordionSectionContentWrapper, AccordionFade, } from './elements';
|
|
5
|
-
import { Header } from './Header';
|
|
6
|
-
import { Icon } from '../../Icon/Icon';
|
|
7
|
-
import { useCurrentAccordionIndex } from './hooks/useCurrentAccordionIndex';
|
|
8
|
-
import AccordionContext from './AccordionContext';
|
|
9
|
-
import { StateLayer } from '../../../core-components';
|
|
10
|
-
import { attachSubComponents, separateChildrenByType, usePropDeprecation, } from '../../../utils';
|
|
11
|
-
import { tokens } from '../../../utils/designTokens';
|
|
12
|
-
export const AccordionSection = attachSubComponents('AccordionSection', React.forwardRef(({ buttonClassName = '', headerClassName = '', subheaderClassName = '', iconWrapperClassName = '', ariaLabel = '', icons, children, header, subheader, startOpen = false, transitionDuration = '.3s', transitionTimingFunction = 'ease-in', onClick, onOpenStateChange, isOpen, ...rest }, fRef) => {
|
|
13
|
-
usePropDeprecation({
|
|
14
|
-
name: 'iconSrc',
|
|
15
|
-
version: '5.0.0',
|
|
16
|
-
alternative: 'AccordionSection.Header.Leading and AccordionSection.Header.Trailing',
|
|
17
|
-
value: icons,
|
|
18
|
-
});
|
|
19
|
-
const { numbered, variant } = useContext(AccordionContext);
|
|
20
|
-
const accordionRef = useRef(null);
|
|
21
|
-
const accordionIndex = useCurrentAccordionIndex(accordionRef);
|
|
22
|
-
const [accordionOpen, setAccordionOpenState] = useState(isOpen ?? startOpen);
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
setAccordionOpenState(isOpen ?? startOpen);
|
|
25
|
-
}, [isOpen]);
|
|
26
|
-
const [headerElements, content] = separateChildrenByType(children, Header);
|
|
27
|
-
const sectionHeader = React.Children.count(headerElements) !== 0 ? (headerElements) : (_jsxs(Header, { children: [numbered ? (_jsx(Header.Leading, { children: _jsxs(Header.Number, { children: [accordionIndex, "."] }) })) : (icons && (_jsx(Header.Leading, { alignment: "center", className: iconWrapperClassName, children: _jsx(Icon, { nameIcon: icons.nameIcon, propsIcon: {
|
|
28
|
-
size: 24,
|
|
29
|
-
color: tokens.white,
|
|
30
|
-
...(icons.propsIcon || {})
|
|
31
|
-
} }) }))), _jsx(Header.Heading, { className: headerClassName, children: header }), subheader && (_jsx(Header.SupportiveText, { className: subheaderClassName, children: subheader }))] }));
|
|
32
|
-
return (_jsxs(AccordionSectionWrapper, { "$variant": variant, "$isOpen": accordionOpen, "data-aui": "accordion.section", ref: accordionRef, children: [_jsxs(ButtonElement, { ref: fRef, className: buttonClassName, "aria-label": ariaLabel, "aria-expanded": accordionOpen, "$variant": variant, "$isOpen": accordionOpen, onClick: (e) => {
|
|
33
|
-
onClick?.(e);
|
|
34
|
-
onOpenStateChange?.(!accordionOpen);
|
|
35
|
-
setAccordionOpenState(!accordionOpen);
|
|
36
|
-
}, ...rest, children: [_jsx(StateLayer, {}), sectionHeader] }), _jsxs(AccordionSectionContentWrapper, { "$isOpen": accordionOpen, "$transitionDuration": transitionDuration, "$transitionTimingFunction": transitionTimingFunction, children: [_jsx(AccordionSectionContent, { "aria-hidden": !accordionOpen, "$isOpen": accordionOpen, "$hasLeader": !!icons || numbered, "$transitionDuration": transitionDuration, children: _jsx("div", { style: { zIndex: -1, paddingBottom: 10 }, children: content }) }), _jsx(AccordionFade, { "$isOpen": accordionOpen, "$transitionDuration": transitionDuration, "$transitionTimingFunction": transitionTimingFunction })] }), _jsx(AccordionDivider, {})] }));
|
|
37
|
-
}), {
|
|
38
|
-
Header,
|
|
39
|
-
});
|
|
1
|
+
"use strict";"use client";import{jsxs as i,jsx as e}from"react/jsx-runtime";import h,{useContext as T,useRef as b,useState as B,useEffect as D}from"react";import{ButtonElement as E,AccordionSectionWrapper as k,AccordionSectionContent as w,AccordionDivider as z,AccordionSectionContentWrapper as F,AccordionFade as W}from"./elements";import{Header as o}from"./Header";import{Icon as _}from"../../Icon/Icon";import{useCurrentAccordionIndex as P}from"./hooks/useCurrentAccordionIndex";import q from"./AccordionContext";import{StateLayer as G}from"../../../core-components";import{attachSubComponents as J,separateChildrenByType as K,usePropDeprecation as M}from"../../../utils";import{tokens as Q}from"../../../utils/designTokens";export const AccordionSection=J("AccordionSection",h.forwardRef(({buttonClassName:S="",headerClassName:$="",subheaderClassName:x="",iconWrapperClassName:A="",ariaLabel:v="",icons:r,children:C,header:g,subheader:a,startOpen:d=!1,transitionDuration:t=".3s",transitionTimingFunction:s="ease-in",onClick:I,onOpenStateChange:H,isOpen:c,...L},N)=>{M({name:"iconSrc",version:"5.0.0",alternative:"AccordionSection.Header.Leading and AccordionSection.Header.Trailing",value:r});const{numbered:m,variant:l}=T(q),p=b(null),j=P(p),[n,f]=B(c??d);D(()=>{f(c??d)},[c]);const[u,y]=K(C,o),O=h.Children.count(u)!==0?u:i(o,{children:[m?e(o.Leading,{children:i(o.Number,{children:[j,"."]})}):r&&e(o.Leading,{alignment:"center",className:A,children:e(_,{nameIcon:r.nameIcon,propsIcon:{size:24,color:Q.white,...r.propsIcon||{}}})}),e(o.Heading,{className:$,children:g}),a&&e(o.SupportiveText,{className:x,children:a})]});return i(k,{$variant:l,$isOpen:n,"data-aui":"accordion.section",ref:p,children:[i(E,{ref:N,className:S,"aria-label":v,"aria-expanded":n,$variant:l,$isOpen:n,onClick:R=>{I?.(R),H?.(!n),f(!n)},...L,children:[e(G,{}),O]}),i(F,{$isOpen:n,$transitionDuration:t,$transitionTimingFunction:s,children:[e(w,{"aria-hidden":!n,$isOpen:n,$hasLeader:!!r||m,$transitionDuration:t,children:e("div",{style:{zIndex:-1,paddingBottom:10},children:y})}),e(W,{$isOpen:n,$transitionDuration:t,$transitionTimingFunction:s})]}),e(z,{})]})}),{Header:o});
|
|
@@ -1,39 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { attachSubComponents, DefaultsProvider, separateChildrenByType, } from '../../../utils';
|
|
3
|
-
import { AccordionSectionText, StyledLeadingTrailing } from './elements';
|
|
4
|
-
import { tokens } from '../../../utils/designTokens';
|
|
5
|
-
// import {Text, TextProps} from '../Text';
|
|
6
|
-
const Text = ({ size, weight, color, children, ...props }) => {
|
|
7
|
-
const fontSizeMap = {
|
|
8
|
-
1: '0.875rem',
|
|
9
|
-
2: '1rem',
|
|
10
|
-
3: '1.25rem',
|
|
11
|
-
4: '1.5rem',
|
|
12
|
-
};
|
|
13
|
-
const fontWeightMap = {
|
|
14
|
-
regular: 400,
|
|
15
|
-
medium: 500,
|
|
16
|
-
heavy: 700,
|
|
17
|
-
};
|
|
18
|
-
return (_jsx("span", { style: {
|
|
19
|
-
fontSize: fontSizeMap[size] || fontSizeMap[2],
|
|
20
|
-
fontWeight: fontWeightMap[weight] || fontWeightMap['regular'],
|
|
21
|
-
color: color || tokens.white,
|
|
22
|
-
}, ...props, children: children }));
|
|
23
|
-
};
|
|
24
|
-
const LeadingTrailing = ({ children, ...props }) => (_jsx(StyledLeadingTrailing, { ...props, children: _jsx(DefaultsProvider, { value: { iconSize: 'large' }, children: children }) }));
|
|
25
|
-
const Leading = (props) => _jsx(LeadingTrailing, { ...props });
|
|
26
|
-
const Trailing = (props) => _jsx(LeadingTrailing, { ...props });
|
|
27
|
-
const Number = ({ children, ...props }) => (_jsx(Text, { size: 2, weight: "heavy", ...props, children: children }));
|
|
28
|
-
const Heading = ({ children, ...props }) => (_jsx(Text, { size: 2, weight: "heavy", ...props, children: children }));
|
|
29
|
-
const SupportiveText = ({ children, ...props }) => (_jsx(Text, { size: 1, ...props, children: children }));
|
|
30
|
-
export const Header = attachSubComponents('Header', ({ children }) => {
|
|
31
|
-
const [leading, trailing, content] = separateChildrenByType(children, Leading, Trailing);
|
|
32
|
-
return (_jsxs(_Fragment, { children: [leading, _jsx(AccordionSectionText, { children: content }), trailing] }));
|
|
33
|
-
}, {
|
|
34
|
-
Heading,
|
|
35
|
-
Leading,
|
|
36
|
-
Number,
|
|
37
|
-
SupportiveText,
|
|
38
|
-
Trailing,
|
|
39
|
-
});
|
|
1
|
+
"use strict";import{jsx as r,Fragment as h,jsxs as m}from"react/jsx-runtime";import{attachSubComponents as p,DefaultsProvider as u,separateChildrenByType as f}from"../../../utils";import{AccordionSectionText as x,StyledLeadingTrailing as y}from"./elements";import{tokens as S}from"../../../utils/designTokens";const o=({size:e,weight:n,color:t,children:i,...g})=>{const a={1:"0.875rem",2:"1rem",3:"1.25rem",4:"1.5rem"},s={regular:400,medium:500,heavy:700};return r("span",{style:{fontSize:a[e]||a[2],fontWeight:s[n]||s.regular,color:t||S.white},...g,children:i})},c=({children:e,...n})=>r(y,{...n,children:r(u,{value:{iconSize:"large"},children:e})}),l=e=>r(c,{...e}),d=e=>r(c,{...e}),T=({children:e,...n})=>r(o,{size:2,weight:"heavy",...n,children:e}),v=({children:e,...n})=>r(o,{size:2,weight:"heavy",...n,children:e}),z=({children:e,...n})=>r(o,{size:1,...n,children:e});export const Header=p("Header",({children:e})=>{const[n,t,i]=f(e,l,d);return m(h,{children:[n,r(x,{children:i}),t]})},{Heading:v,Leading:l,Number:T,SupportiveText:z,Trailing:d});
|
|
@@ -1,50 +1,39 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Icon } from '../../Icon/Icon';
|
|
3
|
-
import { StateLayer } from '../../../core-components';
|
|
4
|
-
import { tokens } from '../../../utils/designTokens';
|
|
5
|
-
const Divider = styled.hr `
|
|
1
|
+
"use strict";import{styled as t,css as r}from"styled-components";import{Icon as s}from"../../Icon/Icon";import{StateLayer as n}from"../../../core-components";import{tokens as e}from"../../../utils/designTokens";const d=t.hr`
|
|
6
2
|
border: none;
|
|
7
3
|
border-top: 1px solid;
|
|
8
4
|
margin: 0;
|
|
9
5
|
width: 100%;
|
|
10
|
-
`;
|
|
11
|
-
export const AccordionElement = styled.div `
|
|
6
|
+
`;export const AccordionElement=t.div`
|
|
12
7
|
display: flex;
|
|
13
8
|
justify-content: flex-start;
|
|
14
9
|
align-items: stretch;
|
|
15
10
|
flex-direction: column;
|
|
16
|
-
gap: ${
|
|
17
|
-
${({
|
|
18
|
-
|
|
19
|
-
border:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
background: ${tokens.surface || '#ffffff'};
|
|
11
|
+
gap: ${e.spacing050};
|
|
12
|
+
${({$variant:i})=>i==="inline"&&r`
|
|
13
|
+
border: 1px solid ${e.outline};
|
|
14
|
+
border-radius: ${e.borderRadius100};
|
|
15
|
+
padding: ${e.spacing100};
|
|
16
|
+
background: ${e.surface||"#ffffff"};
|
|
23
17
|
`};
|
|
24
18
|
overflow: hidden;
|
|
25
19
|
width: 100%;
|
|
26
|
-
color: ${
|
|
27
|
-
|
|
28
|
-
export const AccordionSectionWrapper = styled.div `
|
|
20
|
+
color: ${e.onSurface};
|
|
21
|
+
`,AccordionSectionWrapper=t.div`
|
|
29
22
|
overflow: hidden;
|
|
30
23
|
width: 100%;
|
|
31
24
|
isolation: isolate;
|
|
32
25
|
transition: all 0.3s ease;
|
|
33
26
|
|
|
34
|
-
${({
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
box-shadow: ${$isOpen
|
|
39
|
-
? '0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)'
|
|
40
|
-
: 'none'};
|
|
27
|
+
${({$variant:i,$isOpen:o})=>i==="inline"&&r`
|
|
28
|
+
border-radius: ${e.borderRadius100};
|
|
29
|
+
margin-bottom: ${o?e.spacing100:"0"};
|
|
30
|
+
box-shadow: ${o?"0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)":"none"};
|
|
41
31
|
|
|
42
32
|
&:last-child ${AccordionDivider} {
|
|
43
33
|
display: none;
|
|
44
34
|
}
|
|
45
35
|
`};
|
|
46
|
-
|
|
47
|
-
export const ButtonElement = styled.button `
|
|
36
|
+
`,ButtonElement=t.button`
|
|
48
37
|
all: unset;
|
|
49
38
|
box-sizing: border-box;
|
|
50
39
|
|
|
@@ -53,112 +42,88 @@ export const ButtonElement = styled.button `
|
|
|
53
42
|
cursor: pointer;
|
|
54
43
|
width: 100%;
|
|
55
44
|
|
|
56
|
-
background: ${({
|
|
57
|
-
|
|
58
|
-
: tokens.darkGray || '#4a4a4a'} !important;
|
|
59
|
-
color: ${tokens.white || '#ffffff'} !important;
|
|
45
|
+
background: ${({$isOpen:i})=>i?`linear-gradient(135deg, ${e.darkGray||"#4a4a4a"} 0%, #3a3a3a 100%)`:e.darkGray||"#4a4a4a"} !important;
|
|
46
|
+
color: ${e.white||"#ffffff"} !important;
|
|
60
47
|
|
|
61
48
|
display: flex;
|
|
62
|
-
gap: ${
|
|
49
|
+
gap: ${e.spacing100};
|
|
63
50
|
align-items: center;
|
|
64
|
-
padding: ${
|
|
51
|
+
padding: ${e.spacing200} ${e.spacing200};
|
|
65
52
|
|
|
66
53
|
transition: all 0.25s ease;
|
|
67
54
|
|
|
68
|
-
${({
|
|
69
|
-
|
|
70
|
-
border-radius: ${$isOpen
|
|
71
|
-
? `${tokens.borderRadius100} ${tokens.borderRadius100} 0 0`
|
|
72
|
-
: tokens.borderRadius100};
|
|
55
|
+
${({$variant:i,$isOpen:o})=>i==="inline"&&r`
|
|
56
|
+
border-radius: ${o?`${e.borderRadius100} ${e.borderRadius100} 0 0`:e.borderRadius100};
|
|
73
57
|
`}
|
|
74
58
|
|
|
75
59
|
&:hover:not(:disabled) {
|
|
76
60
|
background: linear-gradient(135deg, #555555 0%, #3f3f3f 100%) !important;
|
|
77
61
|
|
|
78
|
-
${
|
|
79
|
-
opacity: ${
|
|
62
|
+
${n} {
|
|
63
|
+
opacity: ${e.stateLayerHover};
|
|
80
64
|
}
|
|
81
65
|
}
|
|
82
66
|
|
|
83
|
-
&:active:not(:disabled) ${
|
|
84
|
-
opacity: ${
|
|
67
|
+
&:active:not(:disabled) ${n} {
|
|
68
|
+
opacity: ${e.stateLayerPress};
|
|
85
69
|
}
|
|
86
70
|
|
|
87
71
|
&:focus-visible {
|
|
88
|
-
outline: 2px solid ${
|
|
72
|
+
outline: 2px solid ${e.primary||"#454cbf"};
|
|
89
73
|
outline-offset: 2px;
|
|
90
74
|
}
|
|
91
|
-
|
|
92
|
-
export const AccordionSectionText = styled.div `
|
|
75
|
+
`,AccordionSectionText=t.div`
|
|
93
76
|
line-height: 1.4;
|
|
94
77
|
flex-grow: 1;
|
|
95
|
-
padding-right: ${
|
|
78
|
+
padding-right: ${e.spacing100};
|
|
96
79
|
position: relative;
|
|
97
80
|
z-index: 1;
|
|
98
81
|
display: flex;
|
|
99
82
|
flex-direction: column;
|
|
100
|
-
gap: ${
|
|
101
|
-
color: ${
|
|
83
|
+
gap: ${e.spacing050};
|
|
84
|
+
color: ${e.white};
|
|
102
85
|
|
|
103
86
|
/* Better text rendering */
|
|
104
87
|
-webkit-font-smoothing: antialiased;
|
|
105
88
|
-moz-osx-font-smoothing: grayscale;
|
|
106
|
-
|
|
107
|
-
export const AccordionFade = styled.div `
|
|
89
|
+
`,AccordionFade=t.div`
|
|
108
90
|
z-index: 0;
|
|
109
91
|
position: relative;
|
|
110
92
|
background: linear-gradient(
|
|
111
93
|
to bottom,
|
|
112
94
|
transparent,
|
|
113
|
-
${
|
|
95
|
+
${e.surface||"#ffffff"}
|
|
114
96
|
);
|
|
115
97
|
width: 100%;
|
|
116
|
-
height: ${
|
|
117
|
-
margin-top: calc(${
|
|
118
|
-
opacity: ${({
|
|
119
|
-
transition: opacity ${({
|
|
98
|
+
height: ${e.spacing200};
|
|
99
|
+
margin-top: calc(${e.spacing200} * -1);
|
|
100
|
+
opacity: ${({$isOpen:i})=>i?1:0};
|
|
101
|
+
transition: opacity ${({$transitionDuration:i})=>i} ease;
|
|
120
102
|
pointer-events: none;
|
|
121
|
-
`;
|
|
122
|
-
const getTransitionTimingFunction = (transitionTimingFunction, isOpen) => {
|
|
123
|
-
if (transitionTimingFunction !== 'ease-in' &&
|
|
124
|
-
transitionTimingFunction !== 'ease-out') {
|
|
125
|
-
return transitionTimingFunction;
|
|
126
|
-
}
|
|
127
|
-
if (isOpen) {
|
|
128
|
-
return 'ease-out';
|
|
129
|
-
}
|
|
130
|
-
return 'ease-in';
|
|
131
|
-
};
|
|
132
|
-
export const AccordionSectionContentWrapper = styled.div `
|
|
103
|
+
`;const c=(i,o)=>i!=="ease-in"&&i!=="ease-out"?i:o?"ease-out":"ease-in";export const AccordionSectionContentWrapper=t.div`
|
|
133
104
|
z-index: -1;
|
|
134
105
|
position: relative;
|
|
135
106
|
display: grid;
|
|
136
|
-
grid-template-rows: ${({
|
|
137
|
-
transition: ${({
|
|
138
|
-
background: ${({
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
border-left: ${({ $isOpen }) => $isOpen
|
|
142
|
-
? `3px solid ${tokens.primary || '#454cbf'}`
|
|
143
|
-
: '3px solid transparent'};
|
|
144
|
-
margin-left: ${({ $isOpen }) => ($isOpen ? tokens.spacing100 : '0')};
|
|
107
|
+
grid-template-rows: ${({$isOpen:i})=>i?"1fr":"0fr"};
|
|
108
|
+
transition: ${({$transitionDuration:i,$transitionTimingFunction:o,$isOpen:a})=>`grid-template-rows ${i} ${c(o,a)}`};
|
|
109
|
+
background: ${({$isOpen:i})=>i?"linear-gradient(180deg, rgba(74, 74, 74, 0.05) 0%, transparent 100%)":"transparent"};
|
|
110
|
+
border-left: ${({$isOpen:i})=>i?`3px solid ${e.primary||"#454cbf"}`:"3px solid transparent"};
|
|
111
|
+
margin-left: ${({$isOpen:i})=>i?e.spacing100:"0"};
|
|
145
112
|
transition: all 0.3s ease;
|
|
146
|
-
|
|
147
|
-
export const AccordionSectionContent = styled.div `
|
|
113
|
+
`,AccordionSectionContent=t.div`
|
|
148
114
|
overflow-y: hidden;
|
|
149
|
-
transition: ${({
|
|
115
|
+
transition: ${({$transitionDuration:i})=>`opacity ${i} linear, transform ${i} ease`};
|
|
150
116
|
line-height: 1.6;
|
|
151
|
-
opacity: ${({
|
|
152
|
-
transform: ${({
|
|
153
|
-
padding-top: ${({
|
|
154
|
-
padding-right: ${
|
|
155
|
-
padding-left: ${({
|
|
156
|
-
|
|
157
|
-
export const StyledLeadingTrailing = styled.div `
|
|
117
|
+
opacity: ${({$isOpen:i})=>i?1:0};
|
|
118
|
+
transform: ${({$isOpen:i})=>i?"translateY(0)":"translateY(-8px)"};
|
|
119
|
+
padding-top: ${({$isOpen:i})=>i?e.spacing150:"0"};
|
|
120
|
+
padding-right: ${e.spacing200};
|
|
121
|
+
padding-left: ${({$hasLeader:i})=>i?e.spacing600:e.spacing200};
|
|
122
|
+
`,StyledLeadingTrailing=t.div`
|
|
158
123
|
flex-shrink: 0;
|
|
159
|
-
min-width: ${
|
|
124
|
+
min-width: ${e.spacing300};
|
|
160
125
|
display: flex;
|
|
161
|
-
align-self: ${({
|
|
126
|
+
align-self: ${({alignment:i})=>i==="center"?"center":"flex-start"};
|
|
162
127
|
position: relative;
|
|
163
128
|
z-index: 1;
|
|
164
129
|
|
|
@@ -166,17 +131,15 @@ export const StyledLeadingTrailing = styled.div `
|
|
|
166
131
|
picture {
|
|
167
132
|
object-fit: contain;
|
|
168
133
|
}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
border-color: ${tokens.outline};
|
|
134
|
+
`,AccordionDivider=t(d)`
|
|
135
|
+
border-color: ${e.outline};
|
|
172
136
|
opacity: 0.5;
|
|
173
|
-
margin: ${
|
|
174
|
-
|
|
175
|
-
export const RotatingIcon = styled(Icon.SSR) `
|
|
137
|
+
margin: ${e.spacing025} 0;
|
|
138
|
+
`,RotatingIcon=t(s.SSR)`
|
|
176
139
|
overflow: hidden;
|
|
177
140
|
flex-shrink: 0;
|
|
178
141
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
179
|
-
transform: ${({
|
|
142
|
+
transform: ${({$rotateIcon:i})=>`rotate(${i?-180:0}deg)`};
|
|
180
143
|
opacity: 0.9;
|
|
181
144
|
|
|
182
145
|
&:hover {
|
|
@@ -1,13 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export const useCurrentAccordionIndex = (ref) => {
|
|
3
|
-
const [currentIndex, setCurrentIndex] = useState(1);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
let node = ref.current;
|
|
6
|
-
let index = 1;
|
|
7
|
-
while (node && (node = node.previousElementSibling)) {
|
|
8
|
-
index++;
|
|
9
|
-
}
|
|
10
|
-
setCurrentIndex(index);
|
|
11
|
-
}, []);
|
|
12
|
-
return currentIndex;
|
|
13
|
-
};
|
|
1
|
+
"use strict";import{useEffect as u,useState as c}from"react";export const useCurrentAccordionIndex=n=>{const[r,o]=c(1);return u(()=>{let e=n.current,t=1;for(;e&&(e=e.previousElementSibling);)t++;o(t)},[]),r};
|
|
@@ -1,9 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export var AccordionVariant;
|
|
3
|
-
(function (AccordionVariant) {
|
|
4
|
-
/** @deprecated use 'inline' instead */
|
|
5
|
-
AccordionVariant["Inline"] = "inline";
|
|
6
|
-
/** @deprecated use 'full-page' instead */
|
|
7
|
-
AccordionVariant["FullPage"] = "full-page";
|
|
8
|
-
})(AccordionVariant || (AccordionVariant = {}));
|
|
9
|
-
export const LEADING_TRAILING_ALIGNMENTS = ['center', 'top'];
|
|
1
|
+
"use strict";export var AccordionVariant;(function(e){e.Inline="inline",e.FullPage="full-page"})(AccordionVariant||(AccordionVariant={}));export const LEADING_TRAILING_ALIGNMENTS=["center","top"];
|