@mittwald/flow-react-components 0.2.0-alpha.995 → 0.2.0-alpha.997
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/CHANGELOG.md +12 -0
- package/dist/assets/doc-properties.json +9655 -9647
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/AccentBox/AccentBox.mjs +2 -1
- package/dist/js/packages/components/src/components/AccentBox/AccentBox.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Accordion/Accordion.mjs +1 -0
- package/dist/js/packages/components/src/components/Accordion/Accordion.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Action/Action.mjs +1 -0
- package/dist/js/packages/components/src/components/Action/Action.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ActionGroup/ActionGroup.mjs +1 -0
- package/dist/js/packages/components/src/components/ActionGroup/ActionGroup.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Alert/Alert.mjs +1 -0
- package/dist/js/packages/components/src/components/Alert/Alert.mjs.map +1 -1
- package/dist/js/packages/components/src/components/AlertIcon/AlertIcon.mjs +1 -1
- package/dist/js/packages/components/src/components/AlertIcon/AlertIcon.mjs.map +1 -1
- package/dist/js/packages/components/src/components/AlertText/AlertText.mjs +1 -0
- package/dist/js/packages/components/src/components/AlertText/AlertText.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Align/Align.mjs +2 -1
- package/dist/js/packages/components/src/components/Align/Align.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Autocomplete/Autocomplete.mjs +1 -0
- package/dist/js/packages/components/src/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Avatar/Avatar.mjs +1 -0
- package/dist/js/packages/components/src/components/Avatar/Avatar.mjs.map +1 -1
- package/dist/js/packages/components/src/components/AvatarStack/AvatarStack.mjs +1 -0
- package/dist/js/packages/components/src/components/AvatarStack/AvatarStack.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Badge/Badge.mjs +1 -0
- package/dist/js/packages/components/src/components/Badge/Badge.mjs.map +1 -1
- package/dist/js/packages/components/src/components/BigNumber/BigNumber.mjs +1 -0
- package/dist/js/packages/components/src/components/BigNumber/BigNumber.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.mjs +1 -0
- package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.mjs.map +1 -1
- package/dist/js/packages/components/src/components/BrowserOnly/BrowserOnly.mjs +1 -0
- package/dist/js/packages/components/src/components/BrowserOnly/BrowserOnly.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Button/Button.mjs +2 -9
- package/dist/js/packages/components/src/components/Button/Button.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Chat/Chat.mjs +1 -0
- package/dist/js/packages/components/src/components/Chat/Chat.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Checkbox/Checkbox.mjs +1 -0
- package/dist/js/packages/components/src/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CheckboxButton/CheckboxButton.mjs +1 -0
- package/dist/js/packages/components/src/components/CheckboxButton/CheckboxButton.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CheckboxGroup/CheckboxGroup.mjs +1 -0
- package/dist/js/packages/components/src/components/CheckboxGroup/CheckboxGroup.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs +1 -0
- package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ColumnLayout/ColumnLayout.mjs +1 -0
- package/dist/js/packages/components/src/components/ColumnLayout/ColumnLayout.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ComboBox/ComboBox.mjs +1 -0
- package/dist/js/packages/components/src/components/ComboBox/ComboBox.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.mjs +1 -0
- package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs +1 -0
- package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ContextualHelp/ContextualHelp.mjs +1 -0
- package/dist/js/packages/components/src/components/ContextualHelp/ContextualHelp.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs +1 -0
- package/dist/js/packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs.map +1 -1
- package/dist/js/packages/components/src/components/DatePicker/DatePicker.mjs +1 -0
- package/dist/js/packages/components/src/components/DatePicker/DatePicker.mjs.map +1 -1
- package/dist/js/packages/components/src/components/DateRangePicker/DateRangePicker.mjs +1 -0
- package/dist/js/packages/components/src/components/DateRangePicker/DateRangePicker.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FileCard/FileCard.mjs +1 -0
- package/dist/js/packages/components/src/components/FileCard/FileCard.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FileCardList/FileCardList.mjs +1 -0
- package/dist/js/packages/components/src/components/FileCardList/FileCardList.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FileDropZone/FileDropZone.mjs +1 -0
- package/dist/js/packages/components/src/components/FileDropZone/FileDropZone.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FileField/FileField.mjs +1 -0
- package/dist/js/packages/components/src/components/FileField/FileField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FileField/components/FileInput.mjs +1 -0
- package/dist/js/packages/components/src/components/FileField/components/FileInput.mjs.map +1 -1
- package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs +1 -0
- package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Heading/Heading.mjs +1 -0
- package/dist/js/packages/components/src/components/Heading/Heading.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Icon/Icon.mjs +28 -1
- package/dist/js/packages/components/src/components/Icon/Icon.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Icon/Icon.module.scss.mjs +18 -2
- package/dist/js/packages/components/src/components/Icon/Icon.module.scss.mjs.map +1 -1
- package/dist/js/packages/components/src/components/IllustratedMessage/IllustratedMessage.mjs +1 -0
- package/dist/js/packages/components/src/components/IllustratedMessage/IllustratedMessage.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Label/Label.mjs +1 -0
- package/dist/js/packages/components/src/components/Label/Label.mjs.map +1 -1
- package/dist/js/packages/components/src/components/LabeledValue/LabeledValue.mjs +1 -0
- package/dist/js/packages/components/src/components/LabeledValue/LabeledValue.mjs.map +1 -1
- package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.mjs +1 -0
- package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.mjs.map +1 -1
- package/dist/js/packages/components/src/components/LightBox/LightBox.mjs +1 -0
- package/dist/js/packages/components/src/components/LightBox/LightBox.mjs.map +1 -1
- package/dist/js/packages/components/src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.mjs +1 -0
- package/dist/js/packages/components/src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Link/Link.mjs +1 -0
- package/dist/js/packages/components/src/components/Link/Link.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/List.mjs +1 -0
- package/dist/js/packages/components/src/components/List/List.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Header/components/SearchField/SearchField.mjs +1 -0
- package/dist/js/packages/components/src/components/List/components/Header/components/SearchField/SearchField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs +1 -0
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.mjs +1 -0
- package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs +1 -0
- package/dist/js/packages/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs.map +1 -1
- package/dist/js/packages/components/src/components/MenuItem/MenuItem.mjs +2 -7
- package/dist/js/packages/components/src/components/MenuItem/MenuItem.mjs.map +1 -1
- package/dist/js/packages/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs +1 -0
- package/dist/js/packages/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Message/Message.mjs +1 -0
- package/dist/js/packages/components/src/components/Message/Message.mjs.map +1 -1
- package/dist/js/packages/components/src/components/MessageThread/MessageThread.mjs +1 -0
- package/dist/js/packages/components/src/components/MessageThread/MessageThread.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Modal/Modal.mjs +1 -0
- package/dist/js/packages/components/src/components/Modal/Modal.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Navigation/Navigation.mjs +1 -0
- package/dist/js/packages/components/src/components/Navigation/Navigation.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs +1 -0
- package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Notification/Notification.mjs +1 -0
- package/dist/js/packages/components/src/components/Notification/Notification.mjs.map +1 -1
- package/dist/js/packages/components/src/components/NumberField/NumberField.mjs +1 -0
- package/dist/js/packages/components/src/components/NumberField/NumberField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/OverlayTrigger/OverlayTrigger.mjs +1 -0
- package/dist/js/packages/components/src/components/OverlayTrigger/OverlayTrigger.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs +1 -0
- package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ProgressBar/ProgressBar.mjs +1 -0
- package/dist/js/packages/components/src/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/js/packages/components/src/components/RadioGroup/RadioGroup.mjs +1 -0
- package/dist/js/packages/components/src/components/RadioGroup/RadioGroup.mjs.map +1 -1
- package/dist/js/packages/components/src/components/RadioGroup/components/RadioButton/RadioButton.mjs +1 -0
- package/dist/js/packages/components/src/components/RadioGroup/components/RadioButton/RadioButton.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Rating/Rating.mjs +1 -0
- package/dist/js/packages/components/src/components/Rating/Rating.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Rating/components/RatingSegment/EmptySegment.mjs +1 -0
- package/dist/js/packages/components/src/components/Rating/components/RatingSegment/EmptySegment.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Rating/components/RatingSegment/FilledSegment.mjs +1 -0
- package/dist/js/packages/components/src/components/Rating/components/RatingSegment/FilledSegment.mjs.map +1 -1
- package/dist/js/packages/components/src/components/SearchField/SearchField.mjs +1 -0
- package/dist/js/packages/components/src/components/SearchField/SearchField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Section/Section.mjs +1 -0
- package/dist/js/packages/components/src/components/Section/Section.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs +1 -0
- package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs.map +1 -1
- package/dist/js/packages/components/src/components/SegmentedControl/SegmentedControl.mjs +1 -0
- package/dist/js/packages/components/src/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Select/Select.mjs +1 -0
- package/dist/js/packages/components/src/components/Select/Select.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Slider/Slider.mjs +1 -0
- package/dist/js/packages/components/src/components/Slider/Slider.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Switch/Switch.mjs +1 -0
- package/dist/js/packages/components/src/components/Switch/Switch.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.mjs +1 -0
- package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs +1 -0
- package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tabs/components/Tab/Tab.mjs +1 -0
- package/dist/js/packages/components/src/components/Tabs/components/Tab/Tab.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Text/Text.mjs +1 -0
- package/dist/js/packages/components/src/components/Text/Text.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TextArea/TextArea.mjs +1 -0
- package/dist/js/packages/components/src/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TextField/TextField.mjs +1 -0
- package/dist/js/packages/components/src/components/TextField/TextField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TimeField/TimeField.mjs +1 -0
- package/dist/js/packages/components/src/components/TimeField/TimeField.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs +1 -0
- package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/FormAction/FormResetAction.mjs +1 -0
- package/dist/js/packages/components/src/integrations/react-hook-form/components/FormAction/FormResetAction.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/FormAction/FormSubmitAction.mjs +1 -0
- package/dist/js/packages/components/src/integrations/react-hook-form/components/FormAction/FormSubmitAction.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/controller/overlay/useModalController.mjs +1 -0
- package/dist/js/packages/components/src/lib/controller/overlay/useModalController.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/useFieldComponent.mjs +1 -0
- package/dist/js/packages/components/src/lib/hooks/useFieldComponent.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs +1 -0
- package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json/all-dark.json.mjs +1 -1
- package/dist/js/packages/design-tokens/dist/json/all-light.json.mjs +1 -1
- package/dist/types/components/AlertIcon/AlertIcon.d.ts +2 -1
- package/dist/types/components/AlertIcon/AlertIcon.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/dist/types/components/Icon/Icon.d.ts +16 -2
- package/dist/types/components/Icon/Icon.d.ts.map +1 -1
- package/dist/types/components/Icon/stories/Default.stories.d.ts +2 -0
- package/dist/types/components/Icon/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/List/typedList.d.ts +23 -23
- package/dist/types/components/MenuItem/MenuItem.d.ts.map +1 -1
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts +128 -0
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts.map +1 -1
- package/dist/types/lib/tokens/getCategoricalColorByIndex.d.ts +1 -1
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileCardList.mjs","sources":["../../../../../../../src/components/FileCardList/FileCardList.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type FileCardListProps = Omit<ColumnLayoutProps, \"elementType\"> &\n FlowComponentProps<HTMLUListElement>;\n\n/** @flr-generate all */\nexport const FileCardList = flowComponent(\"FileCardList\", (props) => {\n const { className, ref, children, ...rest } = props;\n\n const propsContext: PropsContext = {\n FileCard: { elementType: \"li\" },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <ColumnLayout ref={ref} elementType=\"ul\" className={className} {...rest}>\n {children}\n </ColumnLayout>\n </PropsContextProvider>\n );\n});\n\nexport default FileCardList;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileCardList.mjs","sources":["../../../../../../../src/components/FileCardList/FileCardList.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type FileCardListProps = Omit<ColumnLayoutProps, \"elementType\"> &\n FlowComponentProps<HTMLUListElement>;\n\n/** @flr-generate all */\nexport const FileCardList = flowComponent(\"FileCardList\", (props) => {\n const { className, ref, children, ...rest } = props;\n\n const propsContext: PropsContext = {\n FileCard: { elementType: \"li\" },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <ColumnLayout ref={ref} elementType=\"ul\" className={className} {...rest}>\n {children}\n </ColumnLayout>\n </PropsContextProvider>\n );\n});\n\nexport default FileCardList;\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,YAAA,GAAe,aAAA,CAAc,cAAA,EAAgB,CAAC,KAAA,KAAU;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,QAAA,EAAU,EAAE,WAAA,EAAa,IAAA;AAAK,GAChC;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,GAAA,EAAU,WAAA,EAAY,IAAA,EAAK,SAAA,EAAuB,GAAG,IAAA,EAChE,UACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -6,6 +6,7 @@ import * as Aria from 'react-aria-components';
|
|
|
6
6
|
import { IllustratedMessage } from '../IllustratedMessage/IllustratedMessage.mjs';
|
|
7
7
|
import styles from './FileDropZone.module.scss.mjs';
|
|
8
8
|
import clsx from 'clsx';
|
|
9
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
9
10
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
10
11
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
11
12
|
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n extends\n PropsWithClassName,\n FlowComponentProps<FocusableElement>,\n PropsWithChildren,\n Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n Pick<Aria.DropZoneProps, \"isDisabled\"> {\n onChange?: FileInputOnChangeHandler;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n \"FileDropZone\",\n (props) => {\n const {\n multiple,\n accept,\n className,\n onChange: onChangeDropZone,\n children,\n name,\n isDisabled,\n isReadOnly,\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"FileDropZone\");\n\n const fileFieldRef = useRef<HTMLInputElement>(null);\n const rootClassName = clsx(\n styles.fileDropZone,\n isDisabled && styles.disabled,\n className,\n );\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n IllustratedMessage: {\n FileField: {\n name,\n onChange: onChangeDropZone,\n ref: fileFieldRef,\n accept: accept,\n multiple: multiple,\n Button: { variant: \"outline\", color: \"dark\" },\n isDisabled,\n isReadOnly,\n },\n Heading: {\n className: styles.heading,\n },\n Icon: { className: styles.icon },\n Text: { className: styles.text },\n },\n };\n\n const onDropHandler = async (event: DropEvent) => {\n if (isReadOnly) {\n return;\n }\n\n const fileDropItems = event.items.filter(\n (file) => file.kind === \"file\",\n ) as Aria.FileDropItem[];\n\n const files = await Promise.all(\n fileDropItems\n .filter((f) => !accept || accept?.includes(f.type))\n .map(async (f) => await f.getFile()),\n );\n\n if (files.length > 0) {\n const fileTransfer = new DataTransfer();\n for (const file of multiple ? files : [files[0]]) {\n if (file) {\n fileTransfer.items.add(file);\n }\n }\n\n onChangeDropZone?.(fileTransfer.files);\n if (fileFieldRef.current) {\n fileFieldRef.current.files = fileTransfer.files;\n }\n }\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <Aria.DropZone\n className={rootClassName}\n onDrop={onDropHandler}\n isDisabled={isDisabled}\n data-readonly={isReadOnly}\n >\n <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n </Aria.DropZone>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n extends\n PropsWithClassName,\n FlowComponentProps<FocusableElement>,\n PropsWithChildren,\n Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n Pick<Aria.DropZoneProps, \"isDisabled\"> {\n onChange?: FileInputOnChangeHandler;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n \"FileDropZone\",\n (props) => {\n const {\n multiple,\n accept,\n className,\n onChange: onChangeDropZone,\n children,\n name,\n isDisabled,\n isReadOnly,\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"FileDropZone\");\n\n const fileFieldRef = useRef<HTMLInputElement>(null);\n const rootClassName = clsx(\n styles.fileDropZone,\n isDisabled && styles.disabled,\n className,\n );\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n IllustratedMessage: {\n FileField: {\n name,\n onChange: onChangeDropZone,\n ref: fileFieldRef,\n accept: accept,\n multiple: multiple,\n Button: { variant: \"outline\", color: \"dark\" },\n isDisabled,\n isReadOnly,\n },\n Heading: {\n className: styles.heading,\n },\n Icon: { className: styles.icon },\n Text: { className: styles.text },\n },\n };\n\n const onDropHandler = async (event: DropEvent) => {\n if (isReadOnly) {\n return;\n }\n\n const fileDropItems = event.items.filter(\n (file) => file.kind === \"file\",\n ) as Aria.FileDropItem[];\n\n const files = await Promise.all(\n fileDropItems\n .filter((f) => !accept || accept?.includes(f.type))\n .map(async (f) => await f.getFile()),\n );\n\n if (files.length > 0) {\n const fileTransfer = new DataTransfer();\n for (const file of multiple ? files : [files[0]]) {\n if (file) {\n fileTransfer.items.add(file);\n }\n }\n\n onChangeDropZone?.(fileTransfer.files);\n if (fileFieldRef.current) {\n fileFieldRef.current.files = fileTransfer.files;\n }\n }\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <Aria.DropZone\n className={rootClassName}\n onDrop={onDropHandler}\n isDisabled={isDisabled}\n data-readonly={isReadOnly}\n >\n <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n </Aria.DropZone>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,YAAA,GAAsC,aAAA;AAAA,EACjD,cAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,EAAU,gBAAA;AAAA,MACV,QAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM;AAAA,MACJ,cAAA;AAAA,MACA,wBAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,cAAc,CAAA;AAE3C,IAAA,MAAM,YAAA,GAAe,OAAyB,IAAI,CAAA;AAClD,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,YAAA;AAAA,MACP,cAAc,MAAA,CAAO,QAAA;AAAA,MACrB;AAAA,KACF;AAEA,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,GAAG,iBAAA;AAAA,MACH,kBAAA,EAAoB;AAAA,QAClB,SAAA,EAAW;AAAA,UACT,IAAA;AAAA,UACA,QAAA,EAAU,gBAAA;AAAA,UACV,GAAA,EAAK,YAAA;AAAA,UACL,MAAA;AAAA,UACA,QAAA;AAAA,UACA,MAAA,EAAQ,EAAE,OAAA,EAAS,SAAA,EAAW,OAAO,MAAA,EAAO;AAAA,UAC5C,UAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,OAAA,EAAS;AAAA,UACP,WAAW,MAAA,CAAO;AAAA,SACpB;AAAA,QACA,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,QAC/B,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA;AAAK;AACjC,KACF;AAEA,IAAA,MAAM,aAAA,GAAgB,OAAO,KAAA,KAAqB;AAChD,MAAA,IAAI,UAAA,EAAY;AACd,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,aAAA,GAAgB,MAAM,KAAA,CAAM,MAAA;AAAA,QAChC,CAAC,IAAA,KAAS,IAAA,CAAK,IAAA,KAAS;AAAA,OAC1B;AAEA,MAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,GAAA;AAAA,QAC1B,cACG,MAAA,CAAO,CAAC,MAAM,CAAC,MAAA,IAAU,QAAQ,QAAA,CAAS,CAAA,CAAE,IAAI,CAAC,EACjD,GAAA,CAAI,OAAO,MAAM,MAAM,CAAA,CAAE,SAAS;AAAA,OACvC;AAEA,MAAA,IAAI,KAAA,CAAM,SAAS,CAAA,EAAG;AACpB,QAAA,MAAM,YAAA,GAAe,IAAI,YAAA,EAAa;AACtC,QAAA,KAAA,MAAW,QAAQ,QAAA,GAAW,KAAA,GAAQ,CAAC,KAAA,CAAM,CAAC,CAAC,CAAA,EAAG;AAChD,UAAA,IAAI,IAAA,EAAM;AACR,YAAA,YAAA,CAAa,KAAA,CAAM,IAAI,IAAI,CAAA;AAAA,UAC7B;AAAA,QACF;AAEA,QAAA,gBAAA,GAAmB,aAAa,KAAK,CAAA;AACrC,QAAA,IAAI,aAAa,OAAA,EAAS;AACxB,UAAA,YAAA,CAAa,OAAA,CAAQ,QAAQ,YAAA,CAAa,KAAA;AAAA,QAC5C;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA,CAAK,QAAA;AAAA,QAAL;AAAA,UACC,SAAA,EAAW,aAAA;AAAA,UACX,MAAA,EAAQ,aAAA;AAAA,UACR,UAAA;AAAA,UACA,eAAA,EAAe,UAAA;AAAA,UAEf,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,KAAA,EAAM,MAAA,EAAQ,QAAA,EAAS;AAAA;AAAA,SAE/C,CAAA,EACF,CAAA;AAAA,0BACC,cAAA,EAAA,EAAe;AAAA,KAAA,EAClB,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -6,6 +6,7 @@ import { useFormValidationState } from '@react-stately/form';
|
|
|
6
6
|
import { FieldErrorContext } from 'react-aria-components';
|
|
7
7
|
import { FileInput } from './components/FileInput.mjs';
|
|
8
8
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
9
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
9
10
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
10
11
|
import { useObjectRef } from '@react-aria/utils';
|
|
11
12
|
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileField.mjs","sources":["../../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n extends\n PropsWithChildren,\n FlowComponentProps<HTMLInputElement>,\n Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n Pick<\n Aria.TextFieldProps,\n \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n > {\n /** Handler that is called when the file input changes. */\n onChange?: FileInputOnChangeHandler;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n const {\n children,\n ref,\n isRequired,\n isInvalid,\n isDisabled,\n validationBehavior,\n onChange,\n isReadOnly,\n ...restInputProps\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"FileField\");\n\n const inputRef = useObjectRef(ref);\n\n const formValidationState = useFormValidationState({\n value: undefined,\n validationBehavior,\n isInvalid,\n });\n\n useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n const inputProps = {\n ...restInputProps,\n \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n value: undefined,\n };\n\n const handleChange: FileInputOnChangeHandler = (fileList) => {\n if (fileList && onChange) {\n onChange(fileList);\n }\n };\n\n return (\n <div\n {...fieldProps}\n className={clsx(fieldProps.className, styles.fileField)}\n >\n <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n <FieldErrorCaptureContext>\n <PropsContextProvider props={fieldPropsContext}>\n <div\n data-readonly={isReadOnly}\n data-required={!!isRequired || undefined}\n data-invalid={\n formValidationState.displayValidation.isInvalid || undefined\n }\n >\n <FileInput\n ref={inputRef}\n isReadOnly={isReadOnly}\n onChange={isReadOnly ? undefined : handleChange}\n isDisabled={isDisabled}\n {...inputProps}\n >\n {children}\n </FileInput>\n </div>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </FieldErrorContext.Provider>\n </div>\n );\n});\nexport default FileField;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileField.mjs","sources":["../../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n extends\n PropsWithChildren,\n FlowComponentProps<HTMLInputElement>,\n Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n Pick<\n Aria.TextFieldProps,\n \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n > {\n /** Handler that is called when the file input changes. */\n onChange?: FileInputOnChangeHandler;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n const {\n children,\n ref,\n isRequired,\n isInvalid,\n isDisabled,\n validationBehavior,\n onChange,\n isReadOnly,\n ...restInputProps\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"FileField\");\n\n const inputRef = useObjectRef(ref);\n\n const formValidationState = useFormValidationState({\n value: undefined,\n validationBehavior,\n isInvalid,\n });\n\n useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n const inputProps = {\n ...restInputProps,\n \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n value: undefined,\n };\n\n const handleChange: FileInputOnChangeHandler = (fileList) => {\n if (fileList && onChange) {\n onChange(fileList);\n }\n };\n\n return (\n <div\n {...fieldProps}\n className={clsx(fieldProps.className, styles.fileField)}\n >\n <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n <FieldErrorCaptureContext>\n <PropsContextProvider props={fieldPropsContext}>\n <div\n data-readonly={isReadOnly}\n data-required={!!isRequired || undefined}\n data-invalid={\n formValidationState.displayValidation.isInvalid || undefined\n }\n >\n <FileInput\n ref={inputRef}\n isReadOnly={isReadOnly}\n onChange={isReadOnly ? undefined : handleChange}\n isDisabled={isDisabled}\n {...inputProps}\n >\n {children}\n </FileInput>\n </div>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </FieldErrorContext.Provider>\n </div>\n );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,WAAW,CAAA;AAExC,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,YAAA,GAAyC,CAAC,QAAA,KAAa;AAC3D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,IACnB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,OAAO,SAAS,CAAA;AAAA,MAEtD,+BAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,oBAAoB,iBAAA,EACrD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,YAGrD,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,QAAA;AAAA,gBACL,UAAA;AAAA,gBACA,QAAA,EAAU,aAAa,MAAA,GAAY,YAAA;AAAA,gBACnC,UAAA;AAAA,gBACC,GAAG,UAAA;AAAA,gBAEH;AAAA;AAAA;AACH;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -4,6 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import 'react';
|
|
5
5
|
import * as Aria from 'react-aria-components';
|
|
6
6
|
import { useObjectRef } from '@react-aria/utils';
|
|
7
|
+
import '../../../lib/propsContext/propsContext.mjs';
|
|
7
8
|
import { PropsContextProvider } from '../../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
8
9
|
import styles from './FileInput.module.scss.mjs';
|
|
9
10
|
import { useVisuallyHidden } from 'react-aria';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.mjs","sources":["../../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\nimport { useVisuallyHidden } from \"react-aria\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n onChange?: FileInputOnChangeHandler;\n isDisabled?: boolean;\n ref?: Ref<HTMLInputElement>;\n isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n props;\n const inputRef = useObjectRef(ref);\n const { visuallyHiddenProps } = useVisuallyHidden();\n\n const handlePress = () => {\n if (inputRef.current?.value) {\n inputRef.current.value = \"\";\n onChange?.(null);\n }\n inputRef.current?.click();\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event.target.files);\n };\n\n const propsContext: PropsContext = {\n Button: {\n onPress: handlePress,\n className: styles.trigger,\n isDisabled,\n isReadOnly,\n },\n FieldDescription: { className: styles.fieldDescription },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children}\n <Aria.Input\n {...restInputProps}\n {...visuallyHiddenProps}\n type=\"file\"\n ref={inputRef}\n onChange={handleChange}\n />\n </PropsContextProvider>\n );\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileInput.mjs","sources":["../../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\nimport { useVisuallyHidden } from \"react-aria\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n onChange?: FileInputOnChangeHandler;\n isDisabled?: boolean;\n ref?: Ref<HTMLInputElement>;\n isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n props;\n const inputRef = useObjectRef(ref);\n const { visuallyHiddenProps } = useVisuallyHidden();\n\n const handlePress = () => {\n if (inputRef.current?.value) {\n inputRef.current.value = \"\";\n onChange?.(null);\n }\n inputRef.current?.click();\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event.target.files);\n };\n\n const propsContext: PropsContext = {\n Button: {\n onPress: handlePress,\n className: styles.trigger,\n isDisabled,\n isReadOnly,\n },\n FieldDescription: { className: styles.fieldDescription },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children}\n <Aria.Input\n {...restInputProps}\n {...visuallyHiddenProps}\n type=\"file\"\n ref={inputRef}\n onChange={handleChange}\n />\n </PropsContextProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,UAAU,UAAA,EAAY,QAAA,EAAU,YAAY,GAAA,EAAK,GAAG,gBAAe,GACzE,KAAA;AACF,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,EAAE,mBAAA,EAAoB,GAAI,iBAAA,EAAkB;AAElD,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,QAAA,CAAS,SAAS,KAAA,EAAO;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA,IACjB;AACA,IAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,QAAA,GAAW,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,OAAA,EAAS,WAAA;AAAA,MACT,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,UAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,gBAAA,EAAkB,EAAE,SAAA,EAAW,MAAA,CAAO,gBAAA;AAAiB,GACzD;AAEA,EAAA,uBACE,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAA,CAAK,KAAA;AAAA,MAAL;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,mBAAA;AAAA,QACJ,IAAA,EAAK,MAAA;AAAA,QACL,GAAA,EAAK,QAAA;AAAA,QACL,QAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
|
|
5
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
5
6
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
6
7
|
import clsx from 'clsx';
|
|
7
8
|
import styles from './HeaderNavigation.module.scss.mjs';
|
package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderNavigation.mjs","sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" */\n color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li />,\n className: styles.link,\n unstyled: true,\n children: dynamic((props) => (\n <Text emulateBoldWidth>{props.children}</Text>\n )),\n },\n Button: {\n className: styles.button,\n color: isAlphaColor(color) ? color : \"secondary\",\n variant: \"plain\",\n wrapWith: <li />,\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest}>\n <ul>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n </nav>\n );\n};\n\nexport default HeaderNavigation;\n"],"names":["props"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderNavigation.mjs","sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" */\n color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li />,\n className: styles.link,\n unstyled: true,\n children: dynamic((props) => (\n <Text emulateBoldWidth>{props.children}</Text>\n )),\n },\n Button: {\n className: styles.button,\n color: isAlphaColor(color) ? color : \"secondary\",\n variant: \"plain\",\n wrapWith: <li />,\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest}>\n <ul>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n </nav>\n );\n};\n\nexport default HeaderNavigation;\n"],"names":["props"],"mappings":";;;;;;;;;AAsBO,MAAM,gBAAA,GAA8C,CAAC,KAAA,KAAU;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,gBAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,MACd,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAU,OAAA,CAAQ,CAACA,MAAAA,qBACjB,GAAA,CAAC,IAAA,EAAA,EAAK,gBAAA,EAAgB,IAAA,EAAE,QAAA,EAAAA,MAAAA,CAAM,QAAA,EAAS,CACxC;AAAA,KACH;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,KAAA,EAAO,YAAA,CAAa,KAAK,CAAA,GAAI,KAAA,GAAQ,WAAA;AAAA,MACrC,OAAA,EAAS,OAAA;AAAA,MACT,QAAA,sBAAW,IAAA,EAAA,EAAG;AAAA;AAChB,GACF;AAEA,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAe,IAAA,EAAK,cAAc,GAAG,IAAA,EACnD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import styles from './Heading.module.scss.mjs';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
6
7
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
7
8
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
8
9
|
import * as Aria from 'react-aria-components';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.mjs","sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n extends\n Aria.HeadingProps,\n FlowComponentProps,\n PropsWithElementType<\"span\" | \"p\"> {\n /** The font size of the heading. */\n size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n /** The color of the heading. @default \"default\" */\n color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n /** The text-wrap property of the text. @default undefined */\n wrap?: \"wrap\" | \"balance\";\n}\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n const {\n children,\n className,\n level = 2,\n color = \"default\",\n wrap,\n size,\n ref,\n elementType,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.heading,\n size && styles[`size-${size}`],\n color !== \"default\" && styles[color],\n wrap && styles[`wrap-${wrap}`],\n elementType && styles[`h${level}`],\n className,\n );\n\n const Element = elementType ?? Aria.Heading;\n\n const propsContext: PropsContext = {\n Icon: {\n \"aria-hidden\": true,\n className: styles.icon,\n },\n AlertBadge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Badge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n Button: {\n tunnel: null,\n },\n },\n AlertText: {\n Icon: {\n className: styles.icon,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} {...rest} ref={ref} level={level}>\n <span className={styles.headingText}>{children}</span>\n <span className={styles.headingContent}>\n <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n </span>\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Heading;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Heading.mjs","sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n extends\n Aria.HeadingProps,\n FlowComponentProps,\n PropsWithElementType<\"span\" | \"p\"> {\n /** The font size of the heading. */\n size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n /** The color of the heading. @default \"default\" */\n color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n /** The text-wrap property of the text. @default undefined */\n wrap?: \"wrap\" | \"balance\";\n}\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n const {\n children,\n className,\n level = 2,\n color = \"default\",\n wrap,\n size,\n ref,\n elementType,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.heading,\n size && styles[`size-${size}`],\n color !== \"default\" && styles[color],\n wrap && styles[`wrap-${wrap}`],\n elementType && styles[`h${level}`],\n className,\n );\n\n const Element = elementType ?? Aria.Heading;\n\n const propsContext: PropsContext = {\n Icon: {\n \"aria-hidden\": true,\n className: styles.icon,\n },\n AlertBadge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Badge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n Button: {\n tunnel: null,\n },\n },\n AlertText: {\n Icon: {\n className: styles.icon,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} {...rest} ref={ref} level={level}>\n <span className={styles.headingText}>{children}</span>\n <span className={styles.headingContent}>\n <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n </span>\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Heading;\n"],"names":[],"mappings":";;;;;;;;;AAwBO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,GAAQ,CAAA;AAAA,IACR,KAAA,GAAQ,SAAA;AAAA,IACR,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,OAAA;AAAA,IACP,IAAA,IAAQ,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IAC7B,KAAA,KAAU,SAAA,IAAa,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC,IAAA,IAAQ,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IAC7B,WAAA,IAAe,MAAA,CAAO,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAA;AAAA,IACjC;AAAA,GACF;AAEA,EAAA,MAAM,OAAA,GAAU,eAAe,IAAA,CAAK,OAAA;AAEpC,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,aAAA,EAAe,IAAA;AAAA,MACf,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,UAAA,EAAY;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,gBAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,gBAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,qBAAA,EAAuB;AAAA,MACrB,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,gBAAA;AAAA,QACJ,SAAA,EAAW;AAAA,OACb;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO;AAAA;AACpB;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,GAAA,EAAU,KAAA,EACrD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,WAAA,EAAc,QAAA,EAAS,CAAA;AAAA,oBAC/C,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,cAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,gBAAA,EAAiB,SAAA,EAAU,SAAA,EAAU,CAAA,EACjE;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -5,18 +5,45 @@ import styles from './Icon.module.scss.mjs';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
7
7
|
import { cloneElement } from '../../lib/react/cloneElement.mjs';
|
|
8
|
+
import { statusTypes, alphaColors } from '../../lib/types/props.mjs';
|
|
9
|
+
import { useWarnDeprecation } from '../DeprecationWarningProvider/DeprecationWarningProvider.mjs';
|
|
8
10
|
|
|
11
|
+
const iconColors = [
|
|
12
|
+
"neutral",
|
|
13
|
+
"blue",
|
|
14
|
+
"violet",
|
|
15
|
+
"teal",
|
|
16
|
+
"lilac",
|
|
17
|
+
...statusTypes,
|
|
18
|
+
...alphaColors
|
|
19
|
+
];
|
|
20
|
+
function isIconColor(something) {
|
|
21
|
+
const anyIconColors = iconColors;
|
|
22
|
+
return typeof something === "string" && anyIconColors.includes(something);
|
|
23
|
+
}
|
|
9
24
|
const Icon = flowComponent("Icon", (props) => {
|
|
25
|
+
const warnDeprecation = useWarnDeprecation();
|
|
10
26
|
const {
|
|
11
27
|
className,
|
|
12
28
|
"aria-label": ariaLabel,
|
|
13
29
|
children,
|
|
14
30
|
size = "m",
|
|
15
31
|
status,
|
|
32
|
+
color,
|
|
16
33
|
...svgAttributes
|
|
17
34
|
} = props;
|
|
35
|
+
if (status !== void 0) {
|
|
36
|
+
warnDeprecation(
|
|
37
|
+
"The 'status' prop is deprecated and will be removed in a future release. Use 'color' instead."
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
const resolvedColor = color ?? status;
|
|
41
|
+
const paletteColor = isIconColor(resolvedColor) ? resolvedColor : void 0;
|
|
42
|
+
const customColor = paletteColor === void 0 ? resolvedColor : void 0;
|
|
43
|
+
const customColorStyle = customColor ? { color: customColor, ...svgAttributes.style } : void 0;
|
|
18
44
|
const iconProps = {
|
|
19
45
|
...svgAttributes,
|
|
46
|
+
...customColorStyle && { style: customColorStyle },
|
|
20
47
|
focusable: "false",
|
|
21
48
|
role: "img",
|
|
22
49
|
"aria-hidden": !ariaLabel,
|
|
@@ -24,7 +51,7 @@ const Icon = flowComponent("Icon", (props) => {
|
|
|
24
51
|
className: clsx(
|
|
25
52
|
styles.icon,
|
|
26
53
|
styles[`size-${size}`],
|
|
27
|
-
|
|
54
|
+
paletteColor && styles[paletteColor],
|
|
28
55
|
className
|
|
29
56
|
)
|
|
30
57
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.mjs","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type
|
|
1
|
+
{"version":3,"file":"Icon.mjs","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport { alphaColors, type Status, statusTypes } from \"@/lib/types/props\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nconst iconColors = [\n \"neutral\",\n \"blue\",\n \"violet\",\n \"teal\",\n \"lilac\",\n ...statusTypes,\n ...alphaColors,\n] as const;\n\ntype IconColor = (typeof iconColors)[number];\ntype IconWithCustomColor = IconColor | (string & {});\n\nfunction isIconColor(something: unknown): something is IconColor {\n const anyIconColors = iconColors as readonly string[];\n return typeof something === \"string\" && anyIconColors.includes(something);\n}\n\nexport interface IconProps\n extends\n PropsWithChildren<Omit<SvgAttributeProps, \"name\" | \"color\">>,\n FlowComponentProps {\n /** The size of the icon. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n /**\n * The color of the icon. Besides the Flow colors, any custom CSS color is\n * supported. Inherits the surrounding text color when unset.\n */\n color?: IconWithCustomColor;\n /**\n * The elements status.\n *\n * @deprecated Use `color` instead.\n */\n status?: Status;\n}\n\n/** @flr-generate all */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n className,\n \"aria-label\": ariaLabel,\n children,\n size = \"m\",\n status,\n color,\n ...svgAttributes\n } = props;\n\n if (status !== undefined) {\n warnDeprecation(\n \"The 'status' prop is deprecated and will be removed in a future release. Use 'color' instead.\",\n );\n }\n\n const resolvedColor = color ?? status;\n const paletteColor = isIconColor(resolvedColor) ? resolvedColor : undefined;\n const customColor = paletteColor === undefined ? resolvedColor : undefined;\n const customColorStyle = customColor\n ? { color: customColor, ...svgAttributes.style }\n : undefined;\n\n const iconProps: SvgAttributeProps = {\n ...svgAttributes,\n ...(customColorStyle && { style: customColorStyle }),\n focusable: \"false\",\n role: \"img\",\n \"aria-hidden\": !ariaLabel,\n \"aria-label\": ariaLabel,\n className: clsx(\n styles.icon,\n styles[`size-${size}`],\n paletteColor && styles[paletteColor],\n className,\n ),\n };\n\n const iconElement = React.Children.toArray(children)[0];\n\n if (!React.isValidElement(iconElement)) {\n throw new Error(\n `Expected children of Icon component to be a valid React element (got ${String(\n children,\n )})`,\n );\n }\n\n return cloneElement(iconElement, iconProps);\n});\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;;;;AAYA,MAAM,UAAA,GAAa;AAAA,EACjB,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG,WAAA;AAAA,EACH,GAAG;AACL,CAAA;AAKA,SAAS,YAAY,SAAA,EAA4C;AAC/D,EAAA,MAAM,aAAA,GAAgB,UAAA;AACtB,EAAA,OAAO,OAAO,SAAA,KAAc,QAAA,IAAY,aAAA,CAAc,SAAS,SAAS,CAAA;AAC1E;AAsBO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAC3C,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,QAAA;AAAA,IACA,IAAA,GAAO,GAAA;AAAA,IACP,MAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,IAAI,WAAW,MAAA,EAAW;AACxB,IAAA,eAAA;AAAA,MACE;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,gBAAgB,KAAA,IAAS,MAAA;AAC/B,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,aAAa,CAAA,GAAI,aAAA,GAAgB,MAAA;AAClE,EAAA,MAAM,WAAA,GAAc,YAAA,KAAiB,MAAA,GAAY,aAAA,GAAgB,MAAA;AACjE,EAAA,MAAM,gBAAA,GAAmB,cACrB,EAAE,KAAA,EAAO,aAAa,GAAG,aAAA,CAAc,OAAM,GAC7C,MAAA;AAEJ,EAAA,MAAM,SAAA,GAA+B;AAAA,IACnC,GAAG,aAAA;AAAA,IACH,GAAI,gBAAA,IAAoB,EAAE,KAAA,EAAO,gBAAA,EAAiB;AAAA,IAClD,SAAA,EAAW,OAAA;AAAA,IACX,IAAA,EAAM,KAAA;AAAA,IACN,eAAe,CAAC,SAAA;AAAA,IAChB,YAAA,EAAc,SAAA;AAAA,IACd,SAAA,EAAW,IAAA;AAAA,MACT,MAAA,CAAO,IAAA;AAAA,MACP,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,MACrB,YAAA,IAAgB,OAAO,YAAY,CAAA;AAAA,MACnC;AAAA;AACF,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,CAAM,QAAA,CAAS,OAAA,CAAQ,QAAQ,EAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,CAAC,KAAA,CAAM,cAAA,CAAe,WAAW,CAAA,EAAG;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,qEAAA,EAAwE,MAAA;AAAA,QACtE;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,EACF;AAEA,EAAA,OAAO,YAAA,CAAa,aAAa,SAAS,CAAA;AAC5C,CAAC;;;;"}
|
|
@@ -1,22 +1,38 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
const icon = "flow--icon";
|
|
4
|
+
const neutral = "flow--icon--neutral";
|
|
4
5
|
const danger = "flow--icon--danger";
|
|
5
6
|
const success = "flow--icon--success";
|
|
6
7
|
const warning = "flow--icon--warning";
|
|
7
8
|
const info = "flow--icon--info";
|
|
8
9
|
const unavailable = "flow--icon--unavailable";
|
|
10
|
+
const blue = "flow--icon--blue";
|
|
11
|
+
const violet = "flow--icon--violet";
|
|
12
|
+
const teal = "flow--icon--teal";
|
|
13
|
+
const lilac = "flow--icon--lilac";
|
|
14
|
+
const dark = "flow--icon--dark";
|
|
15
|
+
const light = "flow--icon--light";
|
|
9
16
|
const styles = {
|
|
10
17
|
icon: icon,
|
|
11
18
|
"size-m": "flow--icon--size-m",
|
|
12
19
|
"size-s": "flow--icon--size-s",
|
|
13
20
|
"size-l": "flow--icon--size-l",
|
|
21
|
+
neutral: neutral,
|
|
14
22
|
danger: danger,
|
|
15
23
|
success: success,
|
|
16
24
|
warning: warning,
|
|
17
25
|
info: info,
|
|
18
|
-
unavailable: unavailable
|
|
26
|
+
unavailable: unavailable,
|
|
27
|
+
blue: blue,
|
|
28
|
+
violet: violet,
|
|
29
|
+
teal: teal,
|
|
30
|
+
lilac: lilac,
|
|
31
|
+
dark: dark,
|
|
32
|
+
light: light,
|
|
33
|
+
"dark-static": "flow--icon--dark-static",
|
|
34
|
+
"light-static": "flow--icon--light-static"
|
|
19
35
|
};
|
|
20
36
|
|
|
21
|
-
export { danger, styles as default, icon, info, success, unavailable, warning };
|
|
37
|
+
export { blue, danger, dark, styles as default, icon, info, light, lilac, neutral, success, teal, unavailable, violet, warning };
|
|
22
38
|
//# sourceMappingURL=Icon.module.scss.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Icon.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/js/packages/components/src/components/IllustratedMessage/IllustratedMessage.mjs
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import styles from './IllustratedMessage.module.scss.mjs';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
6
7
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
7
8
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
8
9
|
import { isAlphaColor } from '../../lib/types/props.mjs';
|
package/dist/js/packages/components/src/components/IllustratedMessage/IllustratedMessage.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IllustratedMessage.mjs","sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./IllustratedMessage.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface IllustratedMessageProps\n extends PropsWithChildren<ComponentProps<\"div\">>, FlowComponentProps {\n /** The color of the illustrated message. @default \"default\" */\n color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n \"IllustratedMessage\",\n (props) => {\n const { className, children, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.illustratedMessage,\n color !== \"default\" && styles[color],\n className,\n );\n\n const alphaColor = isAlphaColor(color) ? color : undefined;\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n size: \"l\",\n },\n Heading: {\n className: styles.heading,\n color,\n },\n Text: {\n className: styles.text,\n color: alphaColor,\n },\n Button: {\n color: alphaColor,\n },\n ActionGroup: {\n preserveOrder: true,\n className: styles.actionGroup,\n },\n ProgressBar: { className: styles.progressBar },\n };\n\n return (\n <div {...rest} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </div>\n );\n },\n);\n\nexport default IllustratedMessage;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"IllustratedMessage.mjs","sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./IllustratedMessage.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface IllustratedMessageProps\n extends PropsWithChildren<ComponentProps<\"div\">>, FlowComponentProps {\n /** The color of the illustrated message. @default \"default\" */\n color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n \"IllustratedMessage\",\n (props) => {\n const { className, children, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.illustratedMessage,\n color !== \"default\" && styles[color],\n className,\n );\n\n const alphaColor = isAlphaColor(color) ? color : undefined;\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n size: \"l\",\n },\n Heading: {\n className: styles.heading,\n color,\n },\n Text: {\n className: styles.text,\n color: alphaColor,\n },\n Button: {\n color: alphaColor,\n },\n ActionGroup: {\n preserveOrder: true,\n className: styles.actionGroup,\n },\n ProgressBar: { className: styles.progressBar },\n };\n\n return (\n <div {...rest} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </div>\n );\n },\n);\n\nexport default IllustratedMessage;\n"],"names":[],"mappings":";;;;;;;;AAkBO,MAAM,kBAAA,GAAqB,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,kBAAA;AAAA,MACP,KAAA,KAAU,SAAA,IAAa,MAAA,CAAO,KAAK,CAAA;AAAA,MACnC;AAAA,KACF;AAEA,IAAA,MAAM,UAAA,GAAa,YAAA,CAAa,KAAK,CAAA,GAAI,KAAA,GAAQ,MAAA;AAEjD,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,IAAA,EAAM;AAAA,OACR;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAW,MAAA,CAAO,OAAA;AAAA,QAClB;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,KAAA,EAAO;AAAA,OACT;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,WAAA,EAAa;AAAA,QACX,aAAA,EAAe,IAAA;AAAA,QACf,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,WAAA,EAAa,EAAE,SAAA,EAAW,MAAA,CAAO,WAAA;AAAY,KAC/C;AAEA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -5,6 +5,7 @@ import React from 'react';
|
|
|
5
5
|
import styles from './Label.module.scss.mjs';
|
|
6
6
|
import * as Aria from 'react-aria-components';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
8
9
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
9
10
|
import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
|
|
10
11
|
import locales from '../../../../../_virtual/_.locale.json@3b9d9e153ad753f427f375d1275fbcad.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.mjs","sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LabelProps\n extends\n PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {\n /** Whether the label should show an \"optional\" indicator. */\n optional?: boolean;\n /** Whether the label should be displayed as disabled. */\n isDisabled?: boolean;\n /* @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n const {\n children,\n className,\n optional,\n isDisabled,\n ref,\n unstyled = false,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n\n const rootClassName = unstyled\n ? className\n : clsx(styles.label, isDisabled && styles.disabled, className);\n\n const optionalMarker = (\n <span className={styles.optional}>\n {stringFormatter.format(\"optional\")}\n </span>\n );\n\n const propsContext: PropsContext = {\n ContextualHelpTrigger: {\n tunnel: {\n id: \"contextualHelp\",\n component: \"Label\",\n },\n Button: {\n tunnel: null,\n },\n },\n Button: {\n tunnel: {\n id: \"right\",\n component: \"Label\",\n },\n size: \"s\",\n },\n Action: {\n tunnel: {\n id: \"right\",\n component: \"Label\",\n },\n Button: {\n tunnel: null,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Aria.Label {...rest} className={rootClassName} ref={ref}>\n {children}\n {optional && optionalMarker}\n <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return children;\n }\n\n return undefined;\n }}\n </UiComponentTunnelExit>\n <UiComponentTunnelExit id=\"right\" component=\"Label\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return <div className={styles.right}>{children}</div>;\n }\n\n return undefined;\n }}\n </UiComponentTunnelExit>\n </Aria.Label>\n </PropsContextProvider>\n );\n});\n\nexport default Label;\n"],"names":["children"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Label.mjs","sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LabelProps\n extends\n PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {\n /** Whether the label should show an \"optional\" indicator. */\n optional?: boolean;\n /** Whether the label should be displayed as disabled. */\n isDisabled?: boolean;\n /* @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n const {\n children,\n className,\n optional,\n isDisabled,\n ref,\n unstyled = false,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n\n const rootClassName = unstyled\n ? className\n : clsx(styles.label, isDisabled && styles.disabled, className);\n\n const optionalMarker = (\n <span className={styles.optional}>\n {stringFormatter.format(\"optional\")}\n </span>\n );\n\n const propsContext: PropsContext = {\n ContextualHelpTrigger: {\n tunnel: {\n id: \"contextualHelp\",\n component: \"Label\",\n },\n Button: {\n tunnel: null,\n },\n },\n Button: {\n tunnel: {\n id: \"right\",\n component: \"Label\",\n },\n size: \"s\",\n },\n Action: {\n tunnel: {\n id: \"right\",\n component: \"Label\",\n },\n Button: {\n tunnel: null,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Aria.Label {...rest} className={rootClassName} ref={ref}>\n {children}\n {optional && optionalMarker}\n <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return children;\n }\n\n return undefined;\n }}\n </UiComponentTunnelExit>\n <UiComponentTunnelExit id=\"right\" component=\"Label\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return <div className={styles.right}>{children}</div>;\n }\n\n return undefined;\n }}\n </UiComponentTunnelExit>\n </Aria.Label>\n </PropsContextProvider>\n );\n});\n\nexport default Label;\n"],"names":["children"],"mappings":";;;;;;;;;;;;AAyBO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,OAAO,CAAA;AAEpE,EAAA,MAAM,aAAA,GAAgB,WAClB,SAAA,GACA,IAAA,CAAK,OAAO,KAAA,EAAO,UAAA,IAAc,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAE/D,EAAA,MAAM,cAAA,uBACH,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,QAAA,EACrB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,UAAU,CAAA,EACpC,CAAA;AAGF,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,qBAAA,EAAuB;AAAA,MACrB,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,gBAAA;AAAA,QACJ,SAAA,EAAW;AAAA,OACb;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,OAAA;AAAA,QACJ,SAAA,EAAW;AAAA,OACb;AAAA,MACA,IAAA,EAAM;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,OAAA;AAAA,QACJ,SAAA,EAAW;AAAA,OACb;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ;AAAA;AACV;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,IAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAC7C,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,IAAY,cAAA;AAAA,wBACZ,qBAAA,EAAA,EAAsB,EAAA,EAAG,kBAAiB,SAAA,EAAU,OAAA,EAClD,WAACA,SAAAA,KAAa;AACb,MAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAMA,SAAQ,KAAK,CAAA,EAAG;AACvC,QAAA,OAAOA,SAAAA;AAAA,MACT;AAEA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EACF,CAAA;AAAA,wBACC,qBAAA,EAAA,EAAsB,EAAA,EAAG,SAAQ,SAAA,EAAU,OAAA,EACzC,WAACA,SAAAA,KAAa;AACb,MAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAMA,SAAQ,KAAK,CAAA,EAAG;AACvC,QAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EAAQ,UAAAA,SAAAA,EAAS,CAAA;AAAA,MACjD;AAEA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -4,6 +4,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useId } from 'react';
|
|
5
5
|
import styles from './LabeledValue.module.scss.mjs';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
7
8
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
8
9
|
|
|
9
10
|
const LabeledValue = (props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabeledValue.mjs","sources":["../../../../../../../src/components/LabeledValue/LabeledValue.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId } from \"react\";\nimport styles from \"./LabeledValue.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface LabeledValueProps\n extends PropsWithChildren, PropsWithClassName {}\n\n/** @flr-generate all */\nexport const LabeledValue: FC<LabeledValueProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.labeledValue, className);\n\n const labelId = useId();\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n elementType: \"span\",\n id: labelId,\n },\n CopyButton: {\n className: styles.button,\n variant: \"plain\",\n size: \"s\",\n },\n Button: {\n className: styles.button,\n size: \"s\",\n },\n Link: {\n inline: true,\n },\n };\n\n return (\n <div className={rootClassName} role=\"group\" aria-labelledby={labelId}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </div>\n );\n};\n\nexport default LabeledValue;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LabeledValue.mjs","sources":["../../../../../../../src/components/LabeledValue/LabeledValue.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId } from \"react\";\nimport styles from \"./LabeledValue.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface LabeledValueProps\n extends PropsWithChildren, PropsWithClassName {}\n\n/** @flr-generate all */\nexport const LabeledValue: FC<LabeledValueProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.labeledValue, className);\n\n const labelId = useId();\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n elementType: \"span\",\n id: labelId,\n },\n CopyButton: {\n className: styles.button,\n variant: \"plain\",\n size: \"s\",\n },\n Button: {\n className: styles.button,\n size: \"s\",\n },\n Link: {\n inline: true,\n },\n };\n\n return (\n <div className={rootClassName} role=\"group\" aria-labelledby={labelId}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </div>\n );\n};\n\nexport default LabeledValue;\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAEhC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,UAAU,KAAA,EAAM;AAEtB,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,WAAA,EAAa,MAAA;AAAA,MACb,EAAA,EAAI;AAAA,KACN;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,OAAA,EAAS,OAAA;AAAA,MACT,IAAA,EAAM;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,IAAA,EAAM;AAAA,KACR;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA;AACV,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAe,IAAA,EAAK,OAAA,EAAQ,iBAAA,EAAiB,OAAA,EAC3D,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,UACH,CAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -4,6 +4,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import styles from './LayoutCard.module.scss.mjs';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
7
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
7
8
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
8
9
|
|
|
9
10
|
const LayoutCard = flowComponent(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutCard.mjs","sources":["../../../../../../../src/components/LayoutCard/LayoutCard.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./LayoutCard.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface LayoutCardProps\n extends\n PropsWithChildren,\n PropsWithElementType<\"div\" | \"main\" | \"footer\" | \"header\">,\n FlowComponentProps {}\n\n/** @flr-generate all */\nexport const LayoutCard = flowComponent(\n \"LayoutCard\",\n (props) => {\n const { children, className, elementType = \"div\", ref, ...rest } = props;\n\n const rootClassName = clsx(styles.layoutCard, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n TabNavigation: {\n className: styles.tabNavigation,\n },\n AccentBox: { className: styles.accentBox },\n };\n\n return (\n <Element className={rootClassName} {...rest} ref={ref}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Element>\n );\n },\n { type: \"layout\" },\n);\n\nexport default LayoutCard;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LayoutCard.mjs","sources":["../../../../../../../src/components/LayoutCard/LayoutCard.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./LayoutCard.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface LayoutCardProps\n extends\n PropsWithChildren,\n PropsWithElementType<\"div\" | \"main\" | \"footer\" | \"header\">,\n FlowComponentProps {}\n\n/** @flr-generate all */\nexport const LayoutCard = flowComponent(\n \"LayoutCard\",\n (props) => {\n const { children, className, elementType = \"div\", ref, ...rest } = props;\n\n const rootClassName = clsx(styles.layoutCard, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n TabNavigation: {\n className: styles.tabNavigation,\n },\n AccentBox: { className: styles.accentBox },\n };\n\n return (\n <Element className={rootClassName} {...rest} ref={ref}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Element>\n );\n },\n { type: \"layout\" },\n);\n\nexport default LayoutCard;\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,UAAA,GAAa,aAAA;AAAA,EACxB,YAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,WAAA,GAAc,OAAO,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEnE,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAEvD,IAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,aAAA,EAAe;AAAA,QACb,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,SAAA,EAAW,EAAE,SAAA,EAAW,MAAA,CAAO,SAAA;AAAU,KAC3C;AAEA,IAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA,EAAE,MAAM,QAAA;AACV;;;;"}
|
|
@@ -4,6 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
4
4
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
5
5
|
import { Overlay } from '../Overlay/Overlay.mjs';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
7
8
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
8
9
|
import { IconClose } from '../Icon/components/icons/IconClose.mjs';
|
|
9
10
|
import styles from './LightBox.module.scss.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightBox.mjs","sources":["../../../../../../../src/components/LightBox/LightBox.tsx"],"sourcesContent":["import {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { Overlay } from \"@/components/Overlay/Overlay\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBox.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface LightBoxProps\n extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n /** An overlay controller to control the light box state. */\n controller?: OverlayController;\n /**\n * Whether content can be displayed larger than the available space in the\n * screen. @default true\n */\n fitScreen?: boolean;\n}\n\nexport const LightBox = flowComponent(\"LightBox\", (props) => {\n const {\n controller: controllerFromProps,\n children,\n ref: ignoredRef,\n className,\n fitScreen = true,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.lightBox,\n fitScreen && styles.fitScreen,\n className,\n );\n\n const propsContext: PropsContext = {\n ActionGroup: {\n preserveOrder: true,\n spacing: \"m\",\n className: styles.actionGroup,\n Button: { variant: \"solid\", color: \"light-static\" },\n tunnel: {\n id: \"actionGroup\",\n component: \"LightBox\",\n },\n },\n LightBoxGallery: {\n className: styles.gallery,\n },\n };\n\n const controllerFromContext = useOverlayController(\"LightBox\", {\n reuseControllerFromContext: true,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n return (\n <Overlay\n overlayType=\"LightBox\"\n className={rootClassName}\n controller={controller}\n {...rest}\n >\n <PropsContextProvider props={propsContext}>\n <DivView className={styles.content}>{children}</DivView>\n <DivView className={styles.actions}>\n <ButtonView\n color=\"light-static\"\n variant=\"solid\"\n onPress={() => controller.close()}\n aria-label={stringFormatter.format(\"close\")}\n >\n <IconClose />\n </ButtonView>\n <UiComponentTunnelExit id=\"actionGroup\" component=\"LightBox\" />\n </DivView>\n </PropsContextProvider>\n </Overlay>\n );\n});\n\nexport default LightBox;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LightBox.mjs","sources":["../../../../../../../src/components/LightBox/LightBox.tsx"],"sourcesContent":["import {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { Overlay } from \"@/components/Overlay/Overlay\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBox.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface LightBoxProps\n extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n /** An overlay controller to control the light box state. */\n controller?: OverlayController;\n /**\n * Whether content can be displayed larger than the available space in the\n * screen. @default true\n */\n fitScreen?: boolean;\n}\n\nexport const LightBox = flowComponent(\"LightBox\", (props) => {\n const {\n controller: controllerFromProps,\n children,\n ref: ignoredRef,\n className,\n fitScreen = true,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.lightBox,\n fitScreen && styles.fitScreen,\n className,\n );\n\n const propsContext: PropsContext = {\n ActionGroup: {\n preserveOrder: true,\n spacing: \"m\",\n className: styles.actionGroup,\n Button: { variant: \"solid\", color: \"light-static\" },\n tunnel: {\n id: \"actionGroup\",\n component: \"LightBox\",\n },\n },\n LightBoxGallery: {\n className: styles.gallery,\n },\n };\n\n const controllerFromContext = useOverlayController(\"LightBox\", {\n reuseControllerFromContext: true,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n return (\n <Overlay\n overlayType=\"LightBox\"\n className={rootClassName}\n controller={controller}\n {...rest}\n >\n <PropsContextProvider props={propsContext}>\n <DivView className={styles.content}>{children}</DivView>\n <DivView className={styles.actions}>\n <ButtonView\n color=\"light-static\"\n variant=\"solid\"\n onPress={() => controller.close()}\n aria-label={stringFormatter.format(\"close\")}\n >\n <IconClose />\n </ButtonView>\n <UiComponentTunnelExit id=\"actionGroup\" component=\"LightBox\" />\n </DivView>\n </PropsContextProvider>\n </Overlay>\n );\n});\n\nexport default LightBox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,mBAAA;AAAA,IACZ,QAAA;AAAA,IACA,GAAA,EAAK,UAAA;AAAA,IACL,SAAA;AAAA,IACA,SAAA,GAAY,IAAA;AAAA,IACZ,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IACP,aAAa,MAAA,CAAO,SAAA;AAAA,IACpB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,aAAA,EAAe,IAAA;AAAA,MACf,OAAA,EAAS,GAAA;AAAA,MACT,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,MAAA,EAAQ,EAAE,OAAA,EAAS,OAAA,EAAS,OAAO,cAAA,EAAe;AAAA,MAClD,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,aAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,UAAA,EAAY;AAAA,IAC7D,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAA,IAAuB,qBAAA;AAE1C,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,UAAU,CAAA;AAEvE,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,UAAA;AAAA,MACZ,SAAA,EAAW,aAAA;AAAA,MACX,UAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AAAA,wBAC9C,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,OAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,cAAA;AAAA,cACN,OAAA,EAAQ,OAAA;AAAA,cACR,OAAA,EAAS,MAAM,UAAA,CAAW,KAAA,EAAM;AAAA,cAChC,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,OAAO,CAAA;AAAA,cAE1C,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,WACb;AAAA,0BACA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,aAAA,EAAc,WAAU,UAAA,EAAW;AAAA,SAAA,EAC/D;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
|
|
5
5
|
import styles from '../LightBoxGallery/LightBoxGallery.module.scss.mjs';
|
|
6
|
+
import '../../../../lib/propsContext/propsContext.mjs';
|
|
6
7
|
import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
7
8
|
import { IconClose } from '../../../Icon/components/icons/IconClose.mjs';
|
|
8
9
|
import 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightBoxGalleryItem.mjs","sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useOverlayController } from \"@/lib/hooks\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport type { PropsWithChildren } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type LightBoxGalleryItemProps = PropsWithChildren;\n\n/** @flr-generate all */\nexport const LightBoxGalleryItem = flowComponent(\n \"LightBoxGalleryItem\",\n (props) => {\n const { children } = props;\n\n const controller = useOverlayController(\"Modal\");\n\n const propsContext: PropsContext = {\n ActionGroup: {\n spacing: \"m\",\n className: styles.actionGroup,\n Button: { color: \"light-static\" },\n tunnel: { id: \"actionGroup\", component: \"LightBoxGalleryItem\" },\n },\n Image: { className: styles.image },\n };\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n return (\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <Button\n aria-label={stringFormatter.format(\"close\")}\n color=\"light-static\"\n onPress={() => controller.close()}\n >\n <IconClose />\n </Button>\n <UiComponentTunnelExit\n id=\"actionGroup\"\n component=\"LightBoxGalleryItem\"\n />\n </div>\n </PropsContextProvider>\n );\n },\n);\n\nexport default LightBoxGalleryItem;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LightBoxGalleryItem.mjs","sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useOverlayController } from \"@/lib/hooks\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport type { PropsWithChildren } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type LightBoxGalleryItemProps = PropsWithChildren;\n\n/** @flr-generate all */\nexport const LightBoxGalleryItem = flowComponent(\n \"LightBoxGalleryItem\",\n (props) => {\n const { children } = props;\n\n const controller = useOverlayController(\"Modal\");\n\n const propsContext: PropsContext = {\n ActionGroup: {\n spacing: \"m\",\n className: styles.actionGroup,\n Button: { color: \"light-static\" },\n tunnel: { id: \"actionGroup\", component: \"LightBoxGalleryItem\" },\n },\n Image: { className: styles.image },\n };\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n return (\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <Button\n aria-label={stringFormatter.format(\"close\")}\n color=\"light-static\"\n onPress={() => controller.close()}\n >\n <IconClose />\n </Button>\n <UiComponentTunnelExit\n id=\"actionGroup\"\n component=\"LightBoxGalleryItem\"\n />\n </div>\n </PropsContextProvider>\n );\n },\n);\n\nexport default LightBoxGalleryItem;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcO,MAAM,mBAAA,GAAsB,aAAA;AAAA,EACjC,qBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,IAAA,MAAM,UAAA,GAAa,qBAAqB,OAAO,CAAA;AAE/C,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,WAAA,EAAa;AAAA,QACX,OAAA,EAAS,GAAA;AAAA,QACT,WAAW,MAAA,CAAO,WAAA;AAAA,QAClB,MAAA,EAAQ,EAAE,KAAA,EAAO,cAAA,EAAe;AAAA,QAChC,MAAA,EAAQ,EAAE,EAAA,EAAI,aAAA,EAAe,WAAW,qBAAA;AAAsB,OAChE;AAAA,MACA,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA;AAAM,KACnC;AAEA,IAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,IAAA,uBACE,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,OAAO,CAAA;AAAA,YAC1C,KAAA,EAAM,cAAA;AAAA,YACN,OAAA,EAAS,MAAM,UAAA,CAAW,KAAA,EAAM;AAAA,YAEhC,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,SACb;AAAA,wBACA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,aAAA;AAAA,YACH,SAAA,EAAU;AAAA;AAAA;AACZ,OAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import { useContext } from 'react';
|
|
5
5
|
import * as Aria from 'react-aria-components';
|
|
6
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
6
7
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
7
8
|
import styles from './Link.module.scss.mjs';
|
|
8
9
|
import clsx from 'clsx';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.mjs","sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n ComponentProps,\n ComponentType,\n CSSProperties,\n MouseEvent,\n PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\n\nexport interface LinkProps\n extends\n PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n FlowComponentProps<HTMLAnchorElement>,\n PropsWithClassName {\n /** Whether the link should be styled for being displayed inside a text. */\n inline?: boolean;\n /** An alternative link component. */\n linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n /** The color of the link. @default \"default\" */\n color?: \"default\" | AlphaColor;\n \"aria-current\"?: string;\n slot?: string;\n /** The whiteSpace css value of the element. */\n whiteSpace?: CSSProperties[\"whiteSpace\"];\n /** The size of the element. @default \"m\" */\n size?: \"s\" | \"m\";\n /** @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n const {\n children,\n className,\n inline,\n linkComponent: linkComponentFromProps,\n color = \"default\",\n unstyled = false,\n \"aria-current\": ariaCurrent,\n ref,\n slot: ignoredSlotProp,\n style,\n whiteSpace,\n size = \"m\",\n onClickCapture: onClickCaptureFromProps,\n ...rest\n } = props;\n\n const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n const Link = linkComponentFromProps\n ? (linkComponentFromProps as typeof Aria.Link)\n : props.href && linkComponentFromContext\n ? (linkComponentFromContext as typeof Aria.Link)\n : Aria.Link;\n\n const router = useRouter();\n\n /**\n * An interactive child (e.g. a Button) stops click propagation via React\n * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n * falls back to a full page load. Handling it in the capture phase (top-down,\n * before the child) keeps navigation client-side. Only needed for React\n * Aria's `<a>`; custom link components handle navigation themselves.\n */\n const handleClickCapture =\n Link === Aria.Link && props.href\n ? (event: MouseEvent<HTMLAnchorElement>) => {\n onClickCaptureFromProps?.(event);\n if (event.target !== event.currentTarget) {\n handleLinkClick(event, router, props.href, props.routerOptions);\n }\n }\n : onClickCaptureFromProps;\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.link,\n inline && styles.inline,\n isAlphaColor(color) && styles[color],\n size === \"s\" && styles[\"size-s\"],\n className,\n );\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n size: \"s\",\n },\n AlertText: {\n className: styles.alertText,\n },\n AccentBox: { className: styles.accentBox },\n LayoutCard: { className: styles.layoutCard },\n };\n\n const unsupportedTypingsLinkProps = ariaCurrent\n ? ({\n \"aria-current\": true,\n } as Record<string, unknown>)\n : {};\n\n return (\n <Link\n {...unsupportedTypingsLinkProps}\n {...rest}\n onClickCapture={handleClickCapture}\n className={rootClassName}\n ref={ref}\n style={{ ...style, whiteSpace }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n <LinkIcon {...props} />\n </PropsContextProvider>\n </Link>\n );\n});\n\nexport default Link;\n"],"names":["Link"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.mjs","sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n ComponentProps,\n ComponentType,\n CSSProperties,\n MouseEvent,\n PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\n\nexport interface LinkProps\n extends\n PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n FlowComponentProps<HTMLAnchorElement>,\n PropsWithClassName {\n /** Whether the link should be styled for being displayed inside a text. */\n inline?: boolean;\n /** An alternative link component. */\n linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n /** The color of the link. @default \"default\" */\n color?: \"default\" | AlphaColor;\n \"aria-current\"?: string;\n slot?: string;\n /** The whiteSpace css value of the element. */\n whiteSpace?: CSSProperties[\"whiteSpace\"];\n /** The size of the element. @default \"m\" */\n size?: \"s\" | \"m\";\n /** @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n const {\n children,\n className,\n inline,\n linkComponent: linkComponentFromProps,\n color = \"default\",\n unstyled = false,\n \"aria-current\": ariaCurrent,\n ref,\n slot: ignoredSlotProp,\n style,\n whiteSpace,\n size = \"m\",\n onClickCapture: onClickCaptureFromProps,\n ...rest\n } = props;\n\n const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n const Link = linkComponentFromProps\n ? (linkComponentFromProps as typeof Aria.Link)\n : props.href && linkComponentFromContext\n ? (linkComponentFromContext as typeof Aria.Link)\n : Aria.Link;\n\n const router = useRouter();\n\n /**\n * An interactive child (e.g. a Button) stops click propagation via React\n * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n * falls back to a full page load. Handling it in the capture phase (top-down,\n * before the child) keeps navigation client-side. Only needed for React\n * Aria's `<a>`; custom link components handle navigation themselves.\n */\n const handleClickCapture =\n Link === Aria.Link && props.href\n ? (event: MouseEvent<HTMLAnchorElement>) => {\n onClickCaptureFromProps?.(event);\n if (event.target !== event.currentTarget) {\n handleLinkClick(event, router, props.href, props.routerOptions);\n }\n }\n : onClickCaptureFromProps;\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.link,\n inline && styles.inline,\n isAlphaColor(color) && styles[color],\n size === \"s\" && styles[\"size-s\"],\n className,\n );\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n size: \"s\",\n },\n AlertText: {\n className: styles.alertText,\n },\n AccentBox: { className: styles.accentBox },\n LayoutCard: { className: styles.layoutCard },\n };\n\n const unsupportedTypingsLinkProps = ariaCurrent\n ? ({\n \"aria-current\": true,\n } as Record<string, unknown>)\n : {};\n\n return (\n <Link\n {...unsupportedTypingsLinkProps}\n {...rest}\n onClickCapture={handleClickCapture}\n className={rootClassName}\n ref={ref}\n style={{ ...style, whiteSpace }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n <LinkIcon {...props} />\n </PropsContextProvider>\n </Link>\n );\n});\n\nexport default Link;\n"],"names":["Link"],"mappings":";;;;;;;;;;;;;AA8CO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA,EAAe,sBAAA;AAAA,IACf,KAAA,GAAQ,SAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,cAAA,EAAgB,WAAA;AAAA,IAChB,GAAA;AAAA,IACA,IAAA,EAAM,eAAA;AAAA,IACN,KAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA,GAAO,GAAA;AAAA,IACP,cAAA,EAAgB,uBAAA;AAAA,IAChB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,aAAA,EAAe,wBAAA,EAAyB,GAAI,WAAW,WAAW,CAAA;AAC1E,EAAA,MAAMA,QAAO,sBAAA,GACR,sBAAA,GACD,MAAM,IAAA,IAAQ,wBAAA,GACX,2BACD,IAAA,CAAK,IAAA;AAEX,EAAA,MAAM,SAAS,SAAA,EAAU;AASzB,EAAA,MAAM,qBACJA,KAAAA,KAAS,IAAA,CAAK,QAAQ,KAAA,CAAM,IAAA,GACxB,CAAC,KAAA,KAAyC;AACxC,IAAA,uBAAA,GAA0B,KAAK,CAAA;AAC/B,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,KAAA,CAAM,aAAA,EAAe;AACxC,MAAA,eAAA,CAAgB,KAAA,EAAO,MAAA,EAAQ,KAAA,CAAM,IAAA,EAAM,MAAM,aAAa,CAAA;AAAA,IAChE;AAAA,EACF,CAAA,GACA,uBAAA;AAEN,EAAA,MAAM,aAAA,GAAgB,WAClB,SAAA,GACA,IAAA;AAAA,IACE,MAAA,CAAO,IAAA;AAAA,IACP,UAAU,MAAA,CAAO,MAAA;AAAA,IACjB,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC,IAAA,KAAS,GAAA,IAAO,MAAA,CAAO,QAAQ,CAAA;AAAA,IAC/B;AAAA,GACF;AAEJ,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,IAAA,EAAM;AAAA,KACR;AAAA,IACA,SAAA,EAAW;AAAA,MACT,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,SAAA,EAAW,EAAE,SAAA,EAAW,MAAA,CAAO,SAAA,EAAU;AAAA,IACzC,UAAA,EAAY,EAAE,SAAA,EAAW,MAAA,CAAO,UAAA;AAAW,GAC7C;AAEA,EAAA,MAAM,8BAA8B,WAAA,GAC/B;AAAA,IACC,cAAA,EAAgB;AAAA,MAElB,EAAC;AAEL,EAAA,uBACE,GAAA;AAAA,IAACA,KAAAA;AAAA,IAAA;AAAA,MACE,GAAG,2BAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACJ,cAAA,EAAgB,kBAAA;AAAA,MAChB,SAAA,EAAW,aAAA;AAAA,MACX,GAAA;AAAA,MACA,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,UAAA,EAAW;AAAA,MAE9B,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,KAAA,EAAO;AAAA,OAAA,EACvB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -21,6 +21,7 @@ import { TableColumn } from './setupComponents/TableColumn.mjs';
|
|
|
21
21
|
import { TableHeader } from './setupComponents/TableHeader.mjs';
|
|
22
22
|
import { TableRow } from './setupComponents/TableRow.mjs';
|
|
23
23
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
24
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
24
25
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
25
26
|
import { deepFindOfType, deepFilterByType } from '../../lib/react/deepFindOfType.mjs';
|
|
26
27
|
import DivView from '../../views/DivView.mjs';
|