react-restyle-components 0.4.37 → 0.4.39
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 -334
- 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 -79
- 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 -1100
- package/lib/src/core-components/src/components/Table/elements.js +153 -240
- 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 -4
- 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/index.js +1 -30
- 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 -125
- 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 +2 -1
- package/lib/src/core-components/src/assets/styles/fontface.css +0 -17
|
@@ -1,11 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { isComponentType } from './isComponentType';
|
|
3
|
-
// Source: https://github.com/grrowl/react-keyed-flatten-children/blob/master/index.ts
|
|
4
|
-
export const flattenChildren = (children) => React.Children.toArray(children).reduce((acc, child) => {
|
|
5
|
-
if (isComponentType(child, React.Fragment)) {
|
|
6
|
-
return acc.concat(...flattenChildren(child.props.children));
|
|
7
|
-
}
|
|
8
|
-
else {
|
|
9
|
-
return acc.concat(child);
|
|
10
|
-
}
|
|
11
|
-
}, []);
|
|
1
|
+
"use strict";import t from"react";import{isComponentType as o}from"./isComponentType";export const flattenChildren=n=>t.Children.toArray(n).reduce((e,r)=>o(r,t.Fragment)?e.concat(...flattenChildren(r.props.children)):e.concat(r),[]);
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { isComponentType } from './isComponentType';
|
|
3
|
-
export const getChildByType = (children, componentType) => React.Children.toArray(children).find((element) => isComponentType(element, componentType));
|
|
1
|
+
"use strict";import e from"react";import{isComponentType as i}from"./isComponentType";export const getChildByType=(o,r)=>e.Children.toArray(o).find(t=>i(t,r));
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
export
|
|
2
|
-
export * from './getChildByType';
|
|
3
|
-
export * from './flattenChildren';
|
|
4
|
-
export * from './isComponentType';
|
|
5
|
-
export * from './separateChildrenByType';
|
|
1
|
+
"use strict";export*from"./attachSubComponents";export*from"./getChildByType";export*from"./flattenChildren";export*from"./isComponentType";export*from"./separateChildrenByType";
|
|
@@ -1,16 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
/**
|
|
3
|
-
* Checks if a ReactNode is an Element of some component.
|
|
4
|
-
* Supports components that are styled using styled-components.
|
|
5
|
-
* Returns false if element is not a ReactElement.
|
|
6
|
-
*
|
|
7
|
-
* @param element a react node to check
|
|
8
|
-
* @param componentType the component type to check
|
|
9
|
-
* @returns true if element is an element with type == componentType
|
|
10
|
-
*/
|
|
11
|
-
export const isComponentType = (element, componentType) => {
|
|
12
|
-
if (!React.isValidElement(element))
|
|
13
|
-
return false;
|
|
14
|
-
return (element.type === componentType ||
|
|
15
|
-
element.type.target === componentType);
|
|
16
|
-
};
|
|
1
|
+
"use strict";import i from"react";export const isComponentType=(t,r)=>i.isValidElement(t)?t.type===r||t.type.target===r:!1;
|
|
@@ -1,12 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { flattenChildren } from './flattenChildren';
|
|
3
|
-
export const separateChildrenByType = (children, ...componentTypes) => flattenChildren(children).reduce((acc, element) => {
|
|
4
|
-
const typeIndex = componentTypes.findIndex((componentType) => isComponentType(element, componentType));
|
|
5
|
-
if (typeIndex !== -1) {
|
|
6
|
-
acc[typeIndex].push(element);
|
|
7
|
-
}
|
|
8
|
-
else {
|
|
9
|
-
acc[componentTypes.length].push(element);
|
|
10
|
-
}
|
|
11
|
-
return acc;
|
|
12
|
-
}, [...componentTypes.map(() => []), []]);
|
|
1
|
+
"use strict";import{isComponentType as n}from"./isComponentType";import{flattenChildren as f}from"./flattenChildren";export const separateChildrenByType=(p,...r)=>f(p).reduce((e,t)=>{const i=r.findIndex(d=>n(t,d));return i!==-1?e[i].push(t):e[r.length].push(t),e},[...r.map(()=>[]),[]]);
|
|
@@ -1,18 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export * from './useClickOutside';
|
|
3
|
-
export * from './useCombinedRefs';
|
|
4
|
-
export * from './useDebouncedCallback';
|
|
5
|
-
export * from './useDebouncedValue';
|
|
6
|
-
export * from './useDeprecation';
|
|
7
|
-
export * from './useDeviceDetect';
|
|
8
|
-
export * from './useDeviceForm';
|
|
9
|
-
export * from './useDisableBodyScroll';
|
|
10
|
-
export * from './useHoverState';
|
|
11
|
-
export * from './useId';
|
|
12
|
-
export * from './useIsBrowser';
|
|
13
|
-
export * from './useMediaQuery';
|
|
14
|
-
export * from './useOverflow';
|
|
15
|
-
export * from './useSafeLayoutEffect';
|
|
16
|
-
export * from './useScrollingUp';
|
|
17
|
-
export * from './useTrapFocus';
|
|
18
|
-
export * from './useWindowDimensions';
|
|
1
|
+
"use strict";"use client";export*from"./useClickOutside";export*from"./useCombinedRefs";export*from"./useDebouncedCallback";export*from"./useDebouncedValue";export*from"./useDeprecation";export*from"./useDeviceDetect";export*from"./useDeviceForm";export*from"./useDisableBodyScroll";export*from"./useHoverState";export*from"./useId";export*from"./useIsBrowser";export*from"./useMediaQuery";export*from"./useOverflow";export*from"./useSafeLayoutEffect";export*from"./useScrollingUp";export*from"./useTrapFocus";export*from"./useWindowDimensions";
|
|
@@ -1,18 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
const CLICK_EVENTS = ['mousedown', 'touchstart'];
|
|
3
|
-
export function useClickOutside(handler, targetRef) {
|
|
4
|
-
const defaultRef = useRef(null);
|
|
5
|
-
const ref = targetRef ?? defaultRef;
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
const listener = (event) => {
|
|
8
|
-
if (ref.current && !ref.current.contains(event.target)) {
|
|
9
|
-
handler();
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
CLICK_EVENTS.forEach((fn) => document.addEventListener(fn, listener));
|
|
13
|
-
return () => {
|
|
14
|
-
CLICK_EVENTS.forEach((fn) => document.removeEventListener(fn, listener));
|
|
15
|
-
};
|
|
16
|
-
}, [ref, handler]);
|
|
17
|
-
return ref;
|
|
18
|
-
}
|
|
1
|
+
"use strict";import{useEffect as s,useRef as f}from"react";const o=["mousedown","touchstart"];export function useClickOutside(n,c){const u=f(null),t=c??u;return s(()=>{const r=e=>{t.current&&!t.current.contains(e.target)&&n()};return o.forEach(e=>document.addEventListener(e,r)),()=>{o.forEach(e=>document.removeEventListener(e,r))}},[t,n]),t}
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export function useCombinedRefs(
|
|
3
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
4
|
-
...refs) {
|
|
5
|
-
return useCallback((value) => {
|
|
6
|
-
refs.forEach((ref) => {
|
|
7
|
-
if (!ref)
|
|
8
|
-
return;
|
|
9
|
-
if (typeof ref === 'function') {
|
|
10
|
-
ref(value);
|
|
11
|
-
}
|
|
12
|
-
else {
|
|
13
|
-
ref.current = value;
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
}, []);
|
|
17
|
-
}
|
|
1
|
+
"use strict";import{useCallback as e}from"react";export function useCombinedRefs(...t){return e(o=>{t.forEach(n=>{n&&(typeof n=="function"?n(o):n.current=o)})},[])}
|
|
@@ -1,12 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export function useDebouncedCallback(func, deps, wait) {
|
|
3
|
-
const timeout = useRef();
|
|
4
|
-
return useCallback((...args) => {
|
|
5
|
-
const later = () => {
|
|
6
|
-
clearTimeout(timeout.current);
|
|
7
|
-
func(...args);
|
|
8
|
-
};
|
|
9
|
-
clearTimeout(timeout.current);
|
|
10
|
-
timeout.current = setTimeout(later, wait);
|
|
11
|
-
}, [func, wait, ...deps]);
|
|
12
|
-
}
|
|
1
|
+
"use strict";import{useRef as n,useCallback as l}from"react";export function useDebouncedCallback(t,u,r){const e=n();return l((...o)=>{const c=()=>{clearTimeout(e.current),t(...o)};clearTimeout(e.current),e.current=setTimeout(c,r)},[t,r,...u])}
|
|
@@ -1,20 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export function useDebouncedValue(value, options = { wait: 300 }) {
|
|
3
|
-
const [debouncedValue, setValue] = useState(value);
|
|
4
|
-
const mountedRef = useRef(false);
|
|
5
|
-
const timeoutRef = useRef(null);
|
|
6
|
-
const cancel = () => window.clearTimeout(timeoutRef.current);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
if (mountedRef.current) {
|
|
9
|
-
cancel();
|
|
10
|
-
timeoutRef.current = window.setTimeout(() => {
|
|
11
|
-
setValue(value);
|
|
12
|
-
}, options.wait);
|
|
13
|
-
}
|
|
14
|
-
}, [value]);
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
mountedRef.current = true;
|
|
17
|
-
return cancel;
|
|
18
|
-
}, []);
|
|
19
|
-
return [debouncedValue, cancel];
|
|
20
|
-
}
|
|
1
|
+
"use strict";import{useEffect as r,useState as f,useRef as o}from"react";export function useDebouncedValue(e,c={wait:300}){const[s,i]=f(e),u=o(!1),n=o(null),t=()=>window.clearTimeout(n.current);return r(()=>{u.current&&(t(),n.current=window.setTimeout(()=>{i(e)},c.wait))},[e]),r(()=>(u.current=!0,t),[]),[s,t]}
|
|
@@ -1,40 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import React, { useEffect } from 'react';
|
|
3
|
-
// Since we have no module bundler it's the only way to detect dev env
|
|
4
|
-
export const isReactDevelopment = () => '_self' in React.createElement('div');
|
|
5
|
-
export const useDeprecation = ({ name, message, version }) => {
|
|
6
|
-
if (!isReactDevelopment())
|
|
7
|
-
return;
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
console.warn(`DEPRECATED: ${name} is deprecated and will be removed in version ${version}. ${message}`);
|
|
10
|
-
}, []);
|
|
11
|
-
};
|
|
12
|
-
export const useComponentDeprecation = ({ name, version, alternative, }) => {
|
|
13
|
-
useDeprecation({
|
|
14
|
-
name,
|
|
15
|
-
version,
|
|
16
|
-
message: alternative
|
|
17
|
-
? `Please use ${alternative} component instead.`
|
|
18
|
-
: `Please remove it carefully.`,
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
export const usePropDeprecation = ({ name, value, version, alternative, }) => {
|
|
22
|
-
if (value) {
|
|
23
|
-
useDeprecation({
|
|
24
|
-
name,
|
|
25
|
-
version,
|
|
26
|
-
message: alternative
|
|
27
|
-
? `Please use ${alternative} prop instead.`
|
|
28
|
-
: `Please remove it carefully.`,
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
export const usePropValueDeprecation = ({ component, prop, currentValue, deprecatedValues, version, }) => {
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
if (!isReactDevelopment())
|
|
35
|
-
return;
|
|
36
|
-
if (deprecatedValues.includes(currentValue)) {
|
|
37
|
-
console.warn(`DEPRECATED: The ${currentValue} value for the ${prop} prop on the ${component} component is deprecated and will be removed in version ${version}.`);
|
|
38
|
-
}
|
|
39
|
-
}, [currentValue]);
|
|
40
|
-
};
|
|
1
|
+
"use strict";import i,{useEffect as t}from"react";export const isReactDevelopment=()=>"_self"in i.createElement("div"),useDeprecation=({name:o,message:s,version:e})=>{isReactDevelopment()&&t(()=>{console.warn(`DEPRECATED: ${o} is deprecated and will be removed in version ${e}. ${s}`)},[])},useComponentDeprecation=({name:o,version:s,alternative:e})=>{useDeprecation({name:o,version:s,message:e?`Please use ${e} component instead.`:"Please remove it carefully."})},usePropDeprecation=({name:o,value:s,version:e,alternative:n})=>{s&&useDeprecation({name:o,version:e,message:n?`Please use ${n} prop instead.`:"Please remove it carefully."})},usePropValueDeprecation=({component:o,prop:s,currentValue:e,deprecatedValues:n,version:r})=>{t(()=>{isReactDevelopment()&&n.includes(e)&&console.warn(`DEPRECATED: The ${e} value for the ${s} prop on the ${o} component is deprecated and will be removed in version ${r}.`)},[e])};
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export const useDeviceDetect = () => useMemo(() => {
|
|
3
|
-
if (typeof window !== 'undefined') {
|
|
4
|
-
return {
|
|
5
|
-
isMobile: !!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),
|
|
6
|
-
isFirefox: !!navigator.userAgent.toLowerCase().includes('firefox'),
|
|
7
|
-
};
|
|
8
|
-
}
|
|
9
|
-
return { isMobile: false, isFirefox: false };
|
|
10
|
-
}, []);
|
|
1
|
+
"use strict";import{useMemo as e}from"react";export const useDeviceDetect=()=>e(()=>typeof window<"u"?{isMobile:!!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),isFirefox:!!navigator.userAgent.toLowerCase().includes("firefox")}:{isMobile:!1,isFirefox:!1},[]);
|
|
@@ -1,24 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Size } from '../abstracts';
|
|
3
|
-
export var DeviceFormFactor;
|
|
4
|
-
(function (DeviceFormFactor) {
|
|
5
|
-
DeviceFormFactor["Mobile"] = "mobile";
|
|
6
|
-
DeviceFormFactor["Tablet"] = "tablet";
|
|
7
|
-
DeviceFormFactor["Laptop"] = "laptop";
|
|
8
|
-
DeviceFormFactor["Desktop"] = "desktop";
|
|
9
|
-
})(DeviceFormFactor || (DeviceFormFactor = {}));
|
|
10
|
-
export function useDeviceForm() {
|
|
11
|
-
const { width } = useWindowDimensions();
|
|
12
|
-
if (width < Size.MD) {
|
|
13
|
-
return DeviceFormFactor.Mobile;
|
|
14
|
-
}
|
|
15
|
-
else if (width < Size.MD2) {
|
|
16
|
-
return DeviceFormFactor.Tablet;
|
|
17
|
-
}
|
|
18
|
-
else if (width < Size.XL) {
|
|
19
|
-
return DeviceFormFactor.Laptop;
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
return DeviceFormFactor.Desktop;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
1
|
+
"use strict";import{useWindowDimensions as o}from"./useWindowDimensions";import{Size as t}from"../abstracts";export var DeviceFormFactor;(function(e){e.Mobile="mobile",e.Tablet="tablet",e.Laptop="laptop",e.Desktop="desktop"})(DeviceFormFactor||(DeviceFormFactor={}));export function useDeviceForm(){const{width:e}=o();return e<t.MD?DeviceFormFactor.Mobile:e<t.MD2?DeviceFormFactor.Tablet:e<t.XL?DeviceFormFactor.Laptop:DeviceFormFactor.Desktop}
|
|
@@ -1,16 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useId } from './useId';
|
|
3
|
-
export const useDisableBackgroundScroll = (shouldDisableScroll, backgroundElement) => {
|
|
4
|
-
const className = useId('disable-scroll');
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
if (!shouldDisableScroll)
|
|
7
|
-
return;
|
|
8
|
-
backgroundElement ??= document.body;
|
|
9
|
-
backgroundElement.classList.add(className);
|
|
10
|
-
return () => {
|
|
11
|
-
backgroundElement?.classList.remove(className);
|
|
12
|
-
};
|
|
13
|
-
}, [shouldDisableScroll, backgroundElement]);
|
|
14
|
-
};
|
|
15
|
-
/** @deprecated Prefer `useDisableBackgroundScroll` instead */
|
|
16
|
-
export const useDisableBodyScroll = useDisableBackgroundScroll;
|
|
1
|
+
"use strict";import{useEffect as t}from"react";import{useId as e}from"./useId";export const useDisableBackgroundScroll=(o,s)=>{const r=e("disable-scroll");t(()=>{if(o)return s??=document.body,s.classList.add(r),()=>{s?.classList.remove(r)}},[o,s])},useDisableBodyScroll=useDisableBackgroundScroll;
|
|
@@ -1,36 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export const useHoverState = (disabled = false) => {
|
|
3
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
4
|
-
const [isActive, setIsActive] = useState(false);
|
|
5
|
-
const onMouseOver = useCallback(() => {
|
|
6
|
-
setIsHovered(true);
|
|
7
|
-
}, []);
|
|
8
|
-
const onMouseOut = useCallback(() => {
|
|
9
|
-
setIsHovered(false);
|
|
10
|
-
}, []);
|
|
11
|
-
const onMouseDown = useCallback(() => {
|
|
12
|
-
setIsActive(true);
|
|
13
|
-
}, []);
|
|
14
|
-
const onMouseUp = useCallback(() => {
|
|
15
|
-
setIsActive(false);
|
|
16
|
-
}, []);
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
const event = () => {
|
|
19
|
-
if (isActive) {
|
|
20
|
-
onMouseUp();
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
document.addEventListener('mouseup', event);
|
|
24
|
-
return () => {
|
|
25
|
-
document.removeEventListener('mouseup', event);
|
|
26
|
-
};
|
|
27
|
-
}, [isActive, onMouseUp]);
|
|
28
|
-
const hoverState = disabled
|
|
29
|
-
? 'disabled'
|
|
30
|
-
: isActive
|
|
31
|
-
? 'active'
|
|
32
|
-
: isHovered
|
|
33
|
-
? 'hover'
|
|
34
|
-
: 'default';
|
|
35
|
-
return { hoverState, onMouseOver, onMouseOut, onMouseDown, onMouseUp };
|
|
36
|
-
};
|
|
1
|
+
"use strict";import{useState as r,useCallback as e,useEffect as d}from"react";export const useHoverState=(c=!1)=>{const[a,o]=r(!1),[t,n]=r(!1),v=e(()=>{o(!0)},[]),f=e(()=>{o(!1)},[]),i=e(()=>{n(!0)},[]),s=e(()=>{n(!1)},[]);return d(()=>{const u=()=>{t&&s()};return document.addEventListener("mouseup",u),()=>{document.removeEventListener("mouseup",u)}},[t,s]),{hoverState:c?"disabled":t?"active":a?"hover":"default",onMouseOver:v,onMouseOut:f,onMouseDown:i,onMouseUp:s}};
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { useId as useReactId } from 'react';
|
|
3
|
-
const PREFIX = 'tech-abl-ui';
|
|
4
|
-
export const useId = (prefix, id) => {
|
|
5
|
-
const randId = `${PREFIX}-${prefix}-${useReactId()}`;
|
|
6
|
-
return id ?? randId;
|
|
7
|
-
};
|
|
1
|
+
"use strict";import{useId as o}from"react";const r="tech-abl-ui";export const useId=(t,e)=>{const s=`${r}-${t}-${o()}`;return e??s};
|
|
@@ -1,11 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
// sometimes components cannot be rendered on the server.
|
|
3
|
-
// so using `useEffect` ensures that the code is only rendered on the client side
|
|
4
|
-
// use this hook to avoid hydration errors
|
|
5
|
-
export const useIsBrowser = () => {
|
|
6
|
-
const [isBrowser, setIsBrowser] = useState(false);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
setIsBrowser(true);
|
|
9
|
-
}, []);
|
|
10
|
-
return isBrowser;
|
|
11
|
-
};
|
|
1
|
+
"use strict";import{useEffect as r,useState as t}from"react";export const useIsBrowser=()=>{const[e,s]=t(!1);return r(()=>{s(!0)},[]),e};
|
|
@@ -1,16 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export const useMediaQuery = (query) => {
|
|
3
|
-
if (typeof window === 'undefined')
|
|
4
|
-
return false;
|
|
5
|
-
const [matches, setMatches] = useState(false);
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
const media = window.matchMedia(query);
|
|
8
|
-
if (media.matches !== matches) {
|
|
9
|
-
setMatches(media.matches);
|
|
10
|
-
}
|
|
11
|
-
const listener = () => setMatches(media.matches);
|
|
12
|
-
window.addEventListener('resize', listener);
|
|
13
|
-
return () => window.removeEventListener('resize', listener);
|
|
14
|
-
}, [matches, query]);
|
|
15
|
-
return matches;
|
|
16
|
-
};
|
|
1
|
+
"use strict";import{useEffect as r,useState as a}from"react";export const useMediaQuery=s=>{if(typeof window>"u")return!1;const[e,n]=a(!1);return r(()=>{const t=window.matchMedia(s);t.matches!==e&&n(t.matches);const i=()=>n(t.matches);return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[e,s]),e};
|
|
@@ -1,22 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useSafeLayoutEffect } from './useSafeLayoutEffect';
|
|
3
|
-
export const useOverflow = (ref) => {
|
|
4
|
-
const [isOverflow, setIsOverflow] = useState(false);
|
|
5
|
-
useSafeLayoutEffect(() => {
|
|
6
|
-
const { current } = ref;
|
|
7
|
-
const trigger = () => {
|
|
8
|
-
if (!current)
|
|
9
|
-
return;
|
|
10
|
-
const hasOverflow = current.scrollHeight > current.clientHeight;
|
|
11
|
-
setIsOverflow(hasOverflow);
|
|
12
|
-
};
|
|
13
|
-
let observer;
|
|
14
|
-
if (current) {
|
|
15
|
-
observer = new ResizeObserver(trigger);
|
|
16
|
-
observer.observe(current);
|
|
17
|
-
trigger();
|
|
18
|
-
}
|
|
19
|
-
return () => observer?.disconnect();
|
|
20
|
-
});
|
|
21
|
-
return isOverflow;
|
|
22
|
-
};
|
|
1
|
+
"use strict";import{useState as c}from"react";import{useSafeLayoutEffect as i}from"./useSafeLayoutEffect";export const useOverflow=o=>{const[s,n]=c(!1);return i(()=>{const{current:e}=o,t=()=>{if(!e)return;const f=e.scrollHeight>e.clientHeight;n(f)};let r;return e&&(r=new ResizeObserver(t),r.observe(e),t()),()=>r?.disconnect()}),s};
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
/**
|
|
3
|
-
* Version of useLayoutEffect that doesn't throw errors in SSR.
|
|
4
|
-
*/
|
|
5
|
-
export const useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
1
|
+
"use strict";import e from"react";export const useSafeLayoutEffect=typeof window<"u"?e.useLayoutEffect:e.useEffect;
|
|
@@ -1,18 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export const useScrollingUp = (initialState = false) => {
|
|
3
|
-
if (typeof window === 'undefined')
|
|
4
|
-
return initialState;
|
|
5
|
-
const [scrollingUp, setScrollingUp] = useState(initialState);
|
|
6
|
-
const prevScroll = useRef(window.scrollY);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
const handleScroll = () => {
|
|
9
|
-
const currScroll = window.pageYOffset;
|
|
10
|
-
const isScrolled = prevScroll.current > currScroll;
|
|
11
|
-
setScrollingUp(isScrolled);
|
|
12
|
-
prevScroll.current = currScroll;
|
|
13
|
-
};
|
|
14
|
-
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
15
|
-
return () => window.removeEventListener('scroll', handleScroll);
|
|
16
|
-
}, []);
|
|
17
|
-
return scrollingUp;
|
|
18
|
-
};
|
|
1
|
+
"use strict";import{useEffect as c,useRef as i,useState as u}from"react";export const useScrollingUp=(e=!1)=>{if(typeof window>"u")return e;const[s,l]=u(e),r=i(window.scrollY);return c(()=>{const o=()=>{const n=window.pageYOffset,t=r.current>n;l(t),r.current=n};return window.addEventListener("scroll",o,{passive:!0}),()=>window.removeEventListener("scroll",o)},[]),s};
|
|
@@ -1,30 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export const keyDownHandler = (firstElement, lastElement, e) => {
|
|
3
|
-
if (e.key !== 'Tab')
|
|
4
|
-
return;
|
|
5
|
-
if (!e.shiftKey && document.activeElement === lastElement) {
|
|
6
|
-
firstElement.focus();
|
|
7
|
-
e.preventDefault();
|
|
8
|
-
}
|
|
9
|
-
if (e.shiftKey && document.activeElement === firstElement) {
|
|
10
|
-
lastElement.focus();
|
|
11
|
-
e.preventDefault();
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
const selectors = [
|
|
15
|
-
'a[href]',
|
|
16
|
-
'button:not([disabled])',
|
|
17
|
-
'textarea',
|
|
18
|
-
'input',
|
|
19
|
-
'select',
|
|
20
|
-
];
|
|
21
|
-
export const useTrapFocus = (ref) => {
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
const focusableElements = ref?.current?.querySelectorAll(selectors.join(', '));
|
|
24
|
-
const firstElement = focusableElements?.[0];
|
|
25
|
-
const lastElement = focusableElements?.[focusableElements.length - 1];
|
|
26
|
-
const boundKeydownHandler = keyDownHandler.bind(null, firstElement, lastElement);
|
|
27
|
-
ref?.current?.addEventListener('keydown', boundKeydownHandler);
|
|
28
|
-
return () => ref?.current?.removeEventListener('keydown', boundKeydownHandler);
|
|
29
|
-
}, [ref?.current]);
|
|
30
|
-
};
|
|
1
|
+
"use strict";import{useEffect as c}from"react";export const keyDownHandler=(e,n,t)=>{t.key==="Tab"&&(!t.shiftKey&&document.activeElement===n&&(e.focus(),t.preventDefault()),t.shiftKey&&document.activeElement===e&&(n.focus(),t.preventDefault()))};const s=["a[href]","button:not([disabled])","textarea","input","select"];export const useTrapFocus=e=>{c(()=>{const n=e?.current?.querySelectorAll(s.join(", ")),t=n?.[0],r=n?.[n.length-1],o=keyDownHandler.bind(null,t,r);return e?.current?.addEventListener("keydown",o),()=>e?.current?.removeEventListener("keydown",o)},[e?.current])};
|
|
@@ -1,23 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
function getWindowDimensions() {
|
|
3
|
-
const { innerWidth: width, innerHeight: height } = window;
|
|
4
|
-
return {
|
|
5
|
-
width,
|
|
6
|
-
height,
|
|
7
|
-
};
|
|
8
|
-
}
|
|
9
|
-
export function useWindowDimensions() {
|
|
10
|
-
const [windowDimensions, setWindowDimensions] = useState({
|
|
11
|
-
width: 0,
|
|
12
|
-
height: 0,
|
|
13
|
-
});
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
setWindowDimensions(getWindowDimensions());
|
|
16
|
-
function handleResize() {
|
|
17
|
-
setWindowDimensions(getWindowDimensions());
|
|
18
|
-
}
|
|
19
|
-
window.addEventListener('resize', handleResize);
|
|
20
|
-
return () => window.removeEventListener('resize', handleResize);
|
|
21
|
-
}, []);
|
|
22
|
-
return windowDimensions;
|
|
23
|
-
}
|
|
1
|
+
"use strict";import{useState as o,useEffect as s}from"react";function t(){const{innerWidth:n,innerHeight:e}=window;return{width:n,height:e}}export function useWindowDimensions(){const[n,e]=o({width:0,height:0});return s(()=>{e(t());function i(){e(t())}return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),n}
|
|
@@ -1,9 +1 @@
|
|
|
1
|
-
export
|
|
2
|
-
export * from './context';
|
|
3
|
-
export * from './helpers';
|
|
4
|
-
export * from './hooks';
|
|
5
|
-
export * from './stories';
|
|
6
|
-
export * from './styling';
|
|
7
|
-
export * from './testing';
|
|
8
|
-
export * from './abstracts';
|
|
9
|
-
export { tokens } from './designTokens';
|
|
1
|
+
"use strict";export*from"./utility.util";export*from"./context";export*from"./helpers";export*from"./hooks";export*from"./stories";export*from"./styling";export*from"./testing";export*from"./abstracts";export{tokens}from"./designTokens";
|
|
@@ -1,47 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { styled } from 'styled-components';
|
|
3
|
-
export const Wrappers = {
|
|
4
|
-
Default: styled.div `
|
|
1
|
+
"use strict";import{jsx as r}from"react/jsx-runtime";import{styled as e}from"styled-components";export const Wrappers={Default:e.div`
|
|
5
2
|
display: flex;
|
|
6
3
|
justify-content: flex-start;
|
|
7
4
|
padding: 2rem;
|
|
8
|
-
`,
|
|
9
|
-
Dashed: styled.div `
|
|
5
|
+
`,Dashed:e.div`
|
|
10
6
|
margin: auto;
|
|
11
|
-
${({
|
|
7
|
+
${({$width:i})=>i&&`width: ${i};`}
|
|
12
8
|
border: 2px dashed var(--aui-primary);
|
|
13
9
|
border-radius: 8px;
|
|
14
10
|
padding: 8px;
|
|
15
|
-
`,
|
|
16
|
-
TextInput: styled.div `
|
|
11
|
+
`,TextInput:e.div`
|
|
17
12
|
width: 250px;
|
|
18
13
|
display: flex;
|
|
19
14
|
flex-direction: column;
|
|
20
15
|
gap: 1rem;
|
|
21
16
|
margin: auto;
|
|
22
|
-
`,
|
|
23
|
-
Modal: styled.div `
|
|
17
|
+
`,Modal:e.div`
|
|
24
18
|
height: 100%;
|
|
25
19
|
margin: -1rem;
|
|
26
|
-
`,
|
|
27
|
-
Row: styled.div `
|
|
20
|
+
`,Row:e.div`
|
|
28
21
|
max-width: 100%;
|
|
29
22
|
flex-wrap: wrap;
|
|
30
23
|
display: flex;
|
|
31
24
|
gap: 10px;
|
|
32
25
|
align-items: center;
|
|
33
26
|
justify-content: center;
|
|
34
|
-
`,
|
|
35
|
-
Test: styled.div `
|
|
27
|
+
`,Test:e.div`
|
|
36
28
|
display: flex;
|
|
37
29
|
flex-direction: column;
|
|
38
30
|
gap: 1rem;
|
|
39
31
|
width: min(100%, 600px);
|
|
40
|
-
|
|
41
|
-
};
|
|
42
|
-
export const Decorators = Object.entries(Wrappers).reduce((acc, [title, Wrapper]) => ({
|
|
43
|
-
...acc,
|
|
44
|
-
[title]: (Story) => (_jsx(Wrapper, { children: _jsx(Story, {}) })),
|
|
45
|
-
}), {}
|
|
46
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
47
|
-
);
|
|
32
|
+
`},Decorators=Object.entries(Wrappers).reduce((i,[t,a])=>({...i,[t]:d=>r(a,{children:r(d,{})})}),{});
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
export function cleanProps(
|
|
2
|
-
return Object.entries(object)
|
|
3
|
-
.filter(([, val]) => val !== undefined)
|
|
4
|
-
.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {});
|
|
5
|
-
}
|
|
1
|
+
"use strict";export function cleanProps(n){return Object.entries(n).filter(([,e])=>e!==void 0).reduce((e,[r,t])=>({...e,[r]:t}),{})}
|
|
@@ -1,50 +1 @@
|
|
|
1
|
-
export const VIEWPORTS
|
|
2
|
-
sm: {
|
|
3
|
-
name: 'SM',
|
|
4
|
-
styles: {
|
|
5
|
-
height: '100%',
|
|
6
|
-
width: '375px',
|
|
7
|
-
},
|
|
8
|
-
type: 'mobile',
|
|
9
|
-
},
|
|
10
|
-
md: {
|
|
11
|
-
name: 'MD',
|
|
12
|
-
styles: {
|
|
13
|
-
height: '100%',
|
|
14
|
-
width: '768px',
|
|
15
|
-
},
|
|
16
|
-
type: 'mobile',
|
|
17
|
-
},
|
|
18
|
-
md2: {
|
|
19
|
-
name: 'MD2',
|
|
20
|
-
styles: {
|
|
21
|
-
height: '100%',
|
|
22
|
-
width: '1024px',
|
|
23
|
-
},
|
|
24
|
-
type: 'mobile',
|
|
25
|
-
},
|
|
26
|
-
lg: {
|
|
27
|
-
name: 'LG',
|
|
28
|
-
styles: {
|
|
29
|
-
height: '100%',
|
|
30
|
-
width: '1280px',
|
|
31
|
-
},
|
|
32
|
-
type: 'mobile',
|
|
33
|
-
},
|
|
34
|
-
xl: {
|
|
35
|
-
name: 'XL',
|
|
36
|
-
styles: {
|
|
37
|
-
height: '100%',
|
|
38
|
-
width: '1440px',
|
|
39
|
-
},
|
|
40
|
-
type: 'mobile',
|
|
41
|
-
},
|
|
42
|
-
xxl: {
|
|
43
|
-
name: 'XXL',
|
|
44
|
-
styles: {
|
|
45
|
-
height: '100%',
|
|
46
|
-
width: '1920px',
|
|
47
|
-
},
|
|
48
|
-
type: 'mobile',
|
|
49
|
-
},
|
|
50
|
-
};
|
|
1
|
+
"use strict";export const VIEWPORTS={sm:{name:"SM",styles:{height:"100%",width:"375px"},type:"mobile"},md:{name:"MD",styles:{height:"100%",width:"768px"},type:"mobile"},md2:{name:"MD2",styles:{height:"100%",width:"1024px"},type:"mobile"},lg:{name:"LG",styles:{height:"100%",width:"1280px"},type:"mobile"},xl:{name:"XL",styles:{height:"100%",width:"1440px"},type:"mobile"},xxl:{name:"XXL",styles:{height:"100%",width:"1920px"},type:"mobile"}};
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
export const calcWidthOfColumns
|
|
2
|
-
const internalGutters = (columns - 1) * gutter;
|
|
3
|
-
const guttersAndMargin = 2 * margin + (totalColumns - 1) * gutter;
|
|
4
|
-
return `calc(${internalGutters}px + ${columns} * (${maxWidth} - ${guttersAndMargin}px) / ${totalColumns})`;
|
|
5
|
-
};
|
|
1
|
+
"use strict";export const calcWidthOfColumns=({columns:n,totalColumns:t,margin:r,gutter:c,maxWidth:$="100%"})=>{const e=(n-1)*c,s=2*r+(t-1)*c;return`calc(${e}px + ${n} * (${$} - ${s}px) / ${t})`};
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
export const createGridContainer
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
gridColumnCount,
|
|
6
|
-
/* Min width of grid items before they wrap to a new row */
|
|
7
|
-
gridItemMinWidth) => `
|
|
8
|
-
--gap-count: calc(${gridColumnCount} - 1);
|
|
9
|
-
--total-gap-width: calc(var(--gap-count) * ${gridLayoutGap});
|
|
10
|
-
--grid-item--max-width: calc((100% - var(--total-gap-width)) / ${gridColumnCount});
|
|
1
|
+
"use strict";export const createGridContainer=(a,t,i)=>`
|
|
2
|
+
--gap-count: calc(${t} - 1);
|
|
3
|
+
--total-gap-width: calc(var(--gap-count) * ${a});
|
|
4
|
+
--grid-item--max-width: calc((100% - var(--total-gap-width)) / ${t});
|
|
11
5
|
|
|
12
6
|
display: grid;
|
|
13
|
-
grid-template-columns: repeat(auto-fill, minmax(max(${
|
|
14
|
-
grid-gap: ${
|
|
7
|
+
grid-template-columns: repeat(auto-fill, minmax(max(${i}, var(--grid-item--max-width)), 1fr));
|
|
8
|
+
grid-gap: ${a};
|
|
15
9
|
`;
|