@mittwald/flow-react-components 0.2.0-alpha.996 → 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 +6 -0
- package/dist/assets/doc-properties.json +2767 -2767
- 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/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 +1 -0
- 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 +1 -0
- 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/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/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/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilledSegment.mjs","sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/FilledSegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingProps } from \"@/components/Rating\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStarFilled } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingProps[\"size\"];\n}\n\nexport const FilledSegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.filled,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStarFilled aria-hidden size={size} className={styles.filled} />\n )}\n </PropsContextProvider>\n );\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FilledSegment.mjs","sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/FilledSegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingProps } from \"@/components/Rating\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStarFilled } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingProps[\"size\"];\n}\n\nexport const FilledSegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.filled,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStarFilled aria-hidden size={size} className={styles.filled} />\n )}\n </PropsContextProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAUO,MAAM,aAAA,GAA2B,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAS,GAAI,KAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,IAAA;AAAA,MACA,aAAA,EAAe,IAAA;AAAA,MACf,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA,QAAA,oBACC,GAAA,CAAC,cAAA,EAAA,EAAe,aAAA,EAAW,IAAA,EAAC,IAAA,EAAY,SAAA,EAAW,MAAA,CAAO,QAAQ,CAAA,EAEtE,CAAA;AAEJ;;;;"}
|
|
@@ -5,6 +5,7 @@ import * as Aria from 'react-aria-components';
|
|
|
5
5
|
import formFieldStyles from '../FormField/FormField.module.scss.mjs';
|
|
6
6
|
import styles from './SearchField.module.scss.mjs';
|
|
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 { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
10
11
|
import { Button } from '../Button/Button.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.mjs","sources":["../../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SearchFieldProps\n extends\n PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n const { children, className, ref, ...rest } =\n useControlledHostValueProps(props);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"SearchField\");\n\n const rootClassName = clsx(\n formFieldStyles.formField,\n styles.searchField,\n className,\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"SearchField\");\n const searchText = stringFormatter.format(`search`);\n\n const propsContext: PropsContext = {\n Kbd: {\n isDisabled: props.isDisabled,\n tunnel: {\n id: \"kbd\",\n component: \"SearchField\",\n },\n className: styles.kbd,\n },\n ...fieldPropsContext,\n };\n\n return (\n <Aria.SearchField\n {...rest}\n {...fieldProps}\n aria-label={searchText}\n className={clsx(rootClassName, fieldProps.className)}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n <div className={styles.inputContainer}>\n <IconSearch className={styles.searchIcon} />\n <Aria.Input\n placeholder={searchText}\n className={styles.input}\n ref={ref}\n />\n <UiComponentTunnelExit id=\"kbd\" component=\"SearchField\" />\n <Button\n className={styles.clearButton}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconClose />\n </Button>\n </div>\n </PropsContextProvider>\n <FieldErrorView />\n </Aria.SearchField>\n );\n});\n\nexport default SearchField;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchField.mjs","sources":["../../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SearchFieldProps\n extends\n PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n const { children, className, ref, ...rest } =\n useControlledHostValueProps(props);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"SearchField\");\n\n const rootClassName = clsx(\n formFieldStyles.formField,\n styles.searchField,\n className,\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"SearchField\");\n const searchText = stringFormatter.format(`search`);\n\n const propsContext: PropsContext = {\n Kbd: {\n isDisabled: props.isDisabled,\n tunnel: {\n id: \"kbd\",\n component: \"SearchField\",\n },\n className: styles.kbd,\n },\n ...fieldPropsContext,\n };\n\n return (\n <Aria.SearchField\n {...rest}\n {...fieldProps}\n aria-label={searchText}\n className={clsx(rootClassName, fieldProps.className)}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n <div className={styles.inputContainer}>\n <IconSearch className={styles.searchIcon} />\n <Aria.Input\n placeholder={searchText}\n className={styles.input}\n ref={ref}\n />\n <UiComponentTunnelExit id=\"kbd\" component=\"SearchField\" />\n <Button\n className={styles.clearButton}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconClose />\n </Button>\n </div>\n </PropsContextProvider>\n <FieldErrorView />\n </Aria.SearchField>\n );\n});\n\nexport default SearchField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,GAAA,EAAK,GAAG,IAAA,EAAK,GACxC,4BAA4B,KAAK,CAAA;AAEnC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,aAAa,CAAA;AAE1C,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,WAAA;AAAA,IACP;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,aAAa,CAAA;AAC1E,EAAA,MAAM,UAAA,GAAa,eAAA,CAAgB,MAAA,CAAO,CAAA,MAAA,CAAQ,CAAA;AAElD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,GAAA,EAAK;AAAA,MACH,YAAY,KAAA,CAAM,UAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,KAAA;AAAA,QACJ,SAAA,EAAW;AAAA,OACb;AAAA,MACA,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,YAAA,EAAY,UAAA;AAAA,MACZ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MAEnD,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,4BAA0B,QAAA,EAAS,CAAA;AAAA,0BAEpC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAA,EACrB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,MAAA,CAAO,UAAA,EAAY,CAAA;AAAA,4BAC1C,GAAA;AAAA,cAAC,IAAA,CAAK,KAAA;AAAA,cAAL;AAAA,gBACC,WAAA,EAAa,UAAA;AAAA,gBACb,WAAW,MAAA,CAAO,KAAA;AAAA,gBAClB;AAAA;AAAA,aACF;AAAA,4BACA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,KAAA,EAAM,WAAU,aAAA,EAAc,CAAA;AAAA,4BACxD,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,WAAW,MAAA,CAAO,WAAA;AAAA,gBAClB,OAAA,EAAQ,OAAA;AAAA,gBACR,KAAA,EAAM,WAAA;AAAA,gBAEN,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,WAAA,EACF;AAAA,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
|
|
@@ -4,6 +4,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useId } from 'react';
|
|
5
5
|
import styles from './Section.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
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
9
10
|
import ContextMenuSectionView from '../../views/ContextMenuSectionView.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.mjs","sources":["../../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.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 ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n extends\n PropsWithChildren<ComponentProps<\"section\">>,\n FlowComponentProps<HTMLElement> {\n /** @internal */\n renderContextMenuSection?: boolean;\n /** @internal */\n hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n \"Section\",\n (props) => {\n const {\n children,\n className,\n ref,\n renderContextMenuSection,\n hideSeparator,\n ...rest\n } = props;\n\n if (!children) {\n return null;\n }\n\n if (renderContextMenuSection) {\n return (\n <ContextMenuSectionView ref={ref as never}>\n {children}\n </ContextMenuSectionView>\n );\n }\n\n const rootClassName = clsx(\n styles.section,\n hideSeparator && styles.hideSeparator,\n className,\n );\n\n const headingId = useId();\n\n const propsContext: PropsContext = {\n Heading: {\n level: 2,\n id: headingId,\n className: styles.heading,\n },\n Header: {\n renderSectionHeader: true,\n },\n List: {\n \"aria-labelledby\": headingId,\n },\n };\n\n return (\n <section {...rest} className={rootClassName} ref={ref}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </section>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Section;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Section.mjs","sources":["../../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.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 ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n extends\n PropsWithChildren<ComponentProps<\"section\">>,\n FlowComponentProps<HTMLElement> {\n /** @internal */\n renderContextMenuSection?: boolean;\n /** @internal */\n hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n \"Section\",\n (props) => {\n const {\n children,\n className,\n ref,\n renderContextMenuSection,\n hideSeparator,\n ...rest\n } = props;\n\n if (!children) {\n return null;\n }\n\n if (renderContextMenuSection) {\n return (\n <ContextMenuSectionView ref={ref as never}>\n {children}\n </ContextMenuSectionView>\n );\n }\n\n const rootClassName = clsx(\n styles.section,\n hideSeparator && styles.hideSeparator,\n className,\n );\n\n const headingId = useId();\n\n const propsContext: PropsContext = {\n Heading: {\n level: 2,\n id: headingId,\n className: styles.heading,\n },\n Header: {\n renderSectionHeader: true,\n },\n List: {\n \"aria-labelledby\": headingId,\n },\n };\n\n return (\n <section {...rest} className={rootClassName} ref={ref}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </section>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Section;\n"],"names":[],"mappings":";;;;;;;;;AAqBO,MAAM,OAAA,GAAU,aAAA;AAAA,EACrB,SAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MACA,wBAAA;AAAA,MACA,aAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,wBAAA,EAA0B;AAC5B,MAAA,uBACE,GAAA,CAAC,sBAAA,EAAA,EAAuB,GAAA,EACrB,QAAA,EACH,CAAA;AAAA,IAEJ;AAEA,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,OAAA;AAAA,MACP,iBAAiB,MAAA,CAAO,aAAA;AAAA,MACxB;AAAA,KACF;AAEA,IAAA,MAAM,YAAY,KAAA,EAAM;AAExB,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,CAAA;AAAA,QACP,EAAA,EAAI,SAAA;AAAA,QACJ,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,mBAAA,EAAqB;AAAA,OACvB;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,iBAAA,EAAmB;AAAA;AACrB,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EAAS,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import styles from './SectionHeader.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 { UiComponentTunnelExit } from '../../../UiComponentTunnel/UiComponentTunnelExit.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.mjs","sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n PropsWithClassName &\n RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n \"SectionHeader\",\n (props) => {\n const { children, className, ref } = props;\n\n const rootClassName = clsx(styles.sectionHeader, className);\n\n const propsContext: PropsContext = {\n Switch: {\n labelPosition: \"leading\",\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n },\n Button: {\n size: \"s\",\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n Switch: {\n tunnel: null,\n },\n },\n FileField: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: { size: \"s\" },\n },\n ContextMenuTrigger: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n },\n PopoverTrigger: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n },\n Action: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n },\n Heading: {\n level: 2,\n },\n Link: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n },\n };\n\n return (\n <header ref={ref} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n </div>\n </PropsContextProvider>\n </header>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default SectionHeader;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SectionHeader.mjs","sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n PropsWithClassName &\n RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n \"SectionHeader\",\n (props) => {\n const { children, className, ref } = props;\n\n const rootClassName = clsx(styles.sectionHeader, className);\n\n const propsContext: PropsContext = {\n Switch: {\n labelPosition: \"leading\",\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n },\n Button: {\n size: \"s\",\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n Switch: {\n tunnel: null,\n },\n },\n FileField: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: { size: \"s\" },\n },\n ContextMenuTrigger: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n },\n PopoverTrigger: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n },\n Action: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n Button: {\n tunnel: null,\n },\n },\n Heading: {\n level: 2,\n },\n Link: {\n tunnel: {\n id: \"actions\",\n component: \"SectionHeader\",\n },\n },\n };\n\n return (\n <header ref={ref} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n </div>\n </PropsContextProvider>\n </header>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default SectionHeader;\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,aAAA,GAAwC,aAAA;AAAA,EACnD,eAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAI,GAAI,KAAA;AAErC,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,aAAA,EAAe,SAAS,CAAA;AAE1D,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,MAAA,EAAQ;AAAA,QACN,aAAA,EAAe,SAAA;AAAA,QACf,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,GAAA;AAAA,QACN,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,WAAA,EAAa;AAAA,QACX,aAAA,EAAe,IAAA;AAAA,QACf,IAAA,EAAM,GAAA;AAAA,QACN,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA,SACV;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,SAAA,EAAW;AAAA,QACT,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ,EAAE,IAAA,EAAM,GAAA;AAAI,OACtB;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,cAAA,EAAgB;AAAA,QACd,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,qBAAA,EAAuB;AAAA,QACrB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO;AAAA,OACT;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb;AACF,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,YAAO,GAAA,EAAU,SAAA,EAAW,eAC3B,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,SAAA,EAAU,SAAA,EAAU,eAAA,EAAgB,CAAA,EAChE;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}
|
|
@@ -7,6 +7,7 @@ import * as Aria from 'react-aria-components';
|
|
|
7
7
|
import formFieldStyles from '../FormField/FormField.module.scss.mjs';
|
|
8
8
|
import styles from './SegmentedControl.module.scss.mjs';
|
|
9
9
|
import { getContainerBreakpointSizeClassName } from '../../lib/getContainerBreakpointSizeClassName.mjs';
|
|
10
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
10
11
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
11
12
|
import clsx from 'clsx';
|
|
12
13
|
import { useObjectRef } from '@react-aria/utils';
|
package/dist/js/packages/components/src/components/SegmentedControl/SegmentedControl.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.mjs","sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SegmentedControlProps\n extends\n PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n FlowComponentProps<HTMLDivElement>,\n PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n const {\n children,\n className,\n containerBreakpointSize = \"m\",\n ref,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n fieldPropsContext,\n fieldProps,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"SegmentedControl\");\n\n const rootClassName = clsx(\n formFieldStyles.formField,\n styles.segmentedControlContainer,\n styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n className,\n );\n\n const propsContext: PropsContext = {\n Segment: {\n tunnel: {\n id: \"segments\",\n component: \"SegmentedControl\",\n },\n className: styles.segment,\n },\n ...fieldPropsContext,\n };\n\n const objectRef = useObjectRef(ref);\n useMakeFocusable(objectRef);\n\n return (\n <Aria.RadioGroup\n {...rest}\n className={clsx(rootClassName, fieldProps.className)}\n ref={objectRef}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n <div className={styles.segmentedControl}>\n <div className={styles.segments}>\n <UiComponentTunnelExit\n id=\"segments\"\n component=\"SegmentedControl\"\n />\n </div>\n </div>\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.RadioGroup>\n );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SegmentedControl.mjs","sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SegmentedControlProps\n extends\n PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n FlowComponentProps<HTMLDivElement>,\n PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n const {\n children,\n className,\n containerBreakpointSize = \"m\",\n ref,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n fieldPropsContext,\n fieldProps,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"SegmentedControl\");\n\n const rootClassName = clsx(\n formFieldStyles.formField,\n styles.segmentedControlContainer,\n styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n className,\n );\n\n const propsContext: PropsContext = {\n Segment: {\n tunnel: {\n id: \"segments\",\n component: \"SegmentedControl\",\n },\n className: styles.segment,\n },\n ...fieldPropsContext,\n };\n\n const objectRef = useObjectRef(ref);\n useMakeFocusable(objectRef);\n\n return (\n <Aria.RadioGroup\n {...rest}\n className={clsx(rootClassName, fieldProps.className)}\n ref={objectRef}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n <div className={styles.segmentedControl}>\n <div className={styles.segments}>\n <UiComponentTunnelExit\n id=\"segments\"\n component=\"SegmentedControl\"\n />\n </div>\n </div>\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.RadioGroup>\n );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBO,MAAM,gBAAA,GAAmB,aAAA,CAAc,kBAAA,EAAoB,CAAC,KAAA,KAAU;AAC3E,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA,GAA0B,GAAA;AAAA,IAC1B,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,kBAAkB,CAAA;AAE/C,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,yBAAA;AAAA,IACP,MAAA,CAAO,mCAAA,CAAoC,uBAAuB,CAAC,CAAA;AAAA,IACnE;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,UAAA;AAAA,QACJ,SAAA,EAAW;AAAA,OACb;AAAA,MACA,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAClC,EAAA,gBAAA,CAAiB,SAAS,CAAA;AAE1B,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,SAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,+BAAC,oBAAA,EAAA,EAAqB,YAAA,EAAc,CAAC,SAAS,CAAA,EAAG,OAAO,YAAA,EACtD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,gBAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,QAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,YAAC,qBAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAG,UAAA;AAAA,cACH,SAAA,EAAU;AAAA;AAAA,aAEd,CAAA,EACF,CAAA;AAAA,UACC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import '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 formFieldStyles from '../FormField/FormField.module.scss.mjs';
|
|
8
9
|
import styles from './Select.module.scss.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n extends\n PropsWithChildren<\n Omit<\n Aria.SelectProps<string, \"single\" | \"multiple\">,\n \"children\" | \"className\" | \"ref\"\n >\n >,\n FlowComponentProps<HTMLButtonElement>,\n PropsWithClassName {\n /** Handler that is called when the selected value changes. */\n onChange?: (value: Key | Key[] | null) => void;\n /** @deprecated Use `onChange` instead. */\n onSelectionChange?: (value: Key | Key[] | null) => void;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n const {\n children,\n className,\n onChange,\n onSelectionChange,\n isReadOnly,\n ref,\n ...rest\n } = props;\n\n const warnDeprecation = useWarnDeprecation();\n if (onSelectionChange !== undefined) {\n warnDeprecation(\n \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n fieldPropsContext,\n fieldProps,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"Select\");\n\n const rootClassName = clsx(\n styles.select,\n formFieldStyles.formField,\n className,\n );\n\n const propsContext: PropsContext = {\n Option: {\n tunnel: {\n id: \"options\",\n component: \"Select\",\n },\n },\n ...fieldPropsContext,\n };\n\n const controller = useOverlayController(\"Select\", {\n reuseControllerFromContext: false,\n });\n const isOpen = controller.useIsOpen();\n\n return (\n <Aria.Select\n {...rest}\n {...fieldProps}\n className={clsx(rootClassName, fieldProps.className)}\n onChange={(value) => {\n if (!isReadOnly) {\n onChange?.(value);\n onSelectionChange?.(value);\n }\n }}\n onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n isOpen={isOpen}\n data-readonly={isReadOnly}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <Aria.Button\n data-readonly={isReadOnly}\n className={styles.toggle}\n ref={ref}\n >\n <Aria.SelectValue>\n {({ selectedText, isPlaceholder }) =>\n isPlaceholder || !selectedText ? undefined : selectedText\n }\n </Aria.SelectValue>\n <IconChevronDown />\n </Aria.Button>\n {children}\n <Options controller={controller}>\n <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n </Options>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.Select>\n );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.mjs","sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n extends\n PropsWithChildren<\n Omit<\n Aria.SelectProps<string, \"single\" | \"multiple\">,\n \"children\" | \"className\" | \"ref\"\n >\n >,\n FlowComponentProps<HTMLButtonElement>,\n PropsWithClassName {\n /** Handler that is called when the selected value changes. */\n onChange?: (value: Key | Key[] | null) => void;\n /** @deprecated Use `onChange` instead. */\n onSelectionChange?: (value: Key | Key[] | null) => void;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n const {\n children,\n className,\n onChange,\n onSelectionChange,\n isReadOnly,\n ref,\n ...rest\n } = props;\n\n const warnDeprecation = useWarnDeprecation();\n if (onSelectionChange !== undefined) {\n warnDeprecation(\n \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n fieldPropsContext,\n fieldProps,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"Select\");\n\n const rootClassName = clsx(\n styles.select,\n formFieldStyles.formField,\n className,\n );\n\n const propsContext: PropsContext = {\n Option: {\n tunnel: {\n id: \"options\",\n component: \"Select\",\n },\n },\n ...fieldPropsContext,\n };\n\n const controller = useOverlayController(\"Select\", {\n reuseControllerFromContext: false,\n });\n const isOpen = controller.useIsOpen();\n\n return (\n <Aria.Select\n {...rest}\n {...fieldProps}\n className={clsx(rootClassName, fieldProps.className)}\n onChange={(value) => {\n if (!isReadOnly) {\n onChange?.(value);\n onSelectionChange?.(value);\n }\n }}\n onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n isOpen={isOpen}\n data-readonly={isReadOnly}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <Aria.Button\n data-readonly={isReadOnly}\n className={styles.toggle}\n ref={ref}\n >\n <Aria.SelectValue>\n {({ selectedText, isPlaceholder }) =>\n isPlaceholder || !selectedText ? undefined : selectedText\n }\n </Aria.SelectValue>\n <IconChevronDown />\n </Aria.Button>\n {children}\n <Options controller={controller}>\n <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n </Options>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.Select>\n );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;AAqCO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAC3C,EAAA,IAAI,sBAAsB,MAAA,EAAW;AACnC,IAAA,eAAA;AAAA,MACE;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,QAAQ,CAAA;AAErC,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,eAAA,CAAgB,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,SAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,UAAA,GAAa,qBAAqB,QAAA,EAAU;AAAA,IAChD,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AACD,EAAA,MAAM,MAAA,GAAS,WAAW,SAAA,EAAU;AAEpC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,CAAC,UAAA,EAAY;AACf,UAAA,QAAA,GAAW,KAAK,CAAA;AAChB,UAAA,iBAAA,GAAoB,KAAK,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,cAAc,CAACA,OAAAA,KAAW,CAAC,UAAA,IAAc,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MAClE,MAAA;AAAA,MACA,eAAA,EAAe,UAAA;AAAA,MAEf,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,IAAA,CAAK,MAAA;AAAA,YAAL;AAAA,cACC,eAAA,EAAe,UAAA;AAAA,cACf,WAAW,MAAA,CAAO,MAAA;AAAA,cAClB,GAAA;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,IAAA,CAAK,WAAA,EAAL,EACE,QAAA,EAAA,CAAC,EAAE,YAAA,EAAc,aAAA,EAAc,KAC9B,aAAA,IAAiB,CAAC,YAAA,GAAe,MAAA,GAAY,YAAA,EAEjD,CAAA;AAAA,oCACC,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,WACnB;AAAA,UACC,QAAA;AAAA,0BACD,GAAA,CAAC,WAAQ,UAAA,EACP,QAAA,kBAAA,GAAA,CAAC,yBAAsB,EAAA,EAAG,SAAA,EAAU,SAAA,EAAU,QAAA,EAAS,CAAA,EACzD;AAAA,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
|
|
@@ -6,6 +6,7 @@ import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
|
6
6
|
import * as Aria from 'react-aria-components';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import styles from './Slider.module.scss.mjs';
|
|
9
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
9
10
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
10
11
|
import { Button } from '../Button/Button.mjs';
|
|
11
12
|
import { IconMinus } from '../Icon/components/icons/IconMinus.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.mjs","sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n /** Whether the marker for the initial value should be visible */\n showInitialMarker?: boolean;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n /** Whether the component is invalid. */\n isInvalid?: boolean;\n /** Hide Buttons, Label and Value */\n sliderOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n step,\n sliderOnly,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"Slider\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n tunnel: {\n id: \"label\",\n component: \"Slider\",\n },\n ...fieldPropsContext.Label,\n className: styles.label,\n },\n };\n\n return (\n <div {...fieldProps}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n step={step}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n {!sliderOnly && (\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value} />{\" \"}\n <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n </div>\n )}\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n size: \"s\",\n },\n }}\n >\n {!sliderOnly && (\n <>\n <Button\n onPress={() => state.decrementThumb(0, step)}\n aria-label={stringFormatter.format(\"decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n <Button\n onPress={() => state.incrementThumb(0, step)}\n aria-label={stringFormatter.format(\"increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n </>\n )}\n\n <div\n className={styles.fill}\n style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n }}\n />\n )}\n <Aria.SliderThumb\n inputRef={objectRef}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.Slider>\n </div>\n );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.mjs","sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n /** Whether the marker for the initial value should be visible */\n showInitialMarker?: boolean;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n /** Whether the component is invalid. */\n isInvalid?: boolean;\n /** Hide Buttons, Label and Value */\n sliderOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n step,\n sliderOnly,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"Slider\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n tunnel: {\n id: \"label\",\n component: \"Slider\",\n },\n ...fieldPropsContext.Label,\n className: styles.label,\n },\n };\n\n return (\n <div {...fieldProps}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n step={step}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n {!sliderOnly && (\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value} />{\" \"}\n <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n </div>\n )}\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n size: \"s\",\n },\n }}\n >\n {!sliderOnly && (\n <>\n <Button\n onPress={() => state.decrementThumb(0, step)}\n aria-label={stringFormatter.format(\"decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n <Button\n onPress={() => state.incrementThumb(0, step)}\n aria-label={stringFormatter.format(\"increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n </>\n )}\n\n <div\n className={styles.fill}\n style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n }}\n />\n )}\n <Aria.SliderThumb\n inputRef={objectRef}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.Slider>\n </div>\n );\n});\n\nexport default Slider;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgCO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,cAAc,MAAA,CAAO,QAAA;AAAA,IACrB;AAAA,GACF;AAEA,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,QAAQ,CAAA;AAErC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,QAAQ,CAAA;AAErE,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAElC,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,GAAG,iBAAA;AAAA,IACH,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,OAAA;AAAA,QACJ,SAAA,EAAW;AAAA,OACb;AAAA,MACA,GAAG,iBAAA,CAAkB,KAAA;AAAA,MACrB,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA,CAAK,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,UAAA;AAAA,MACA,YAAA;AAAA,MACA,IAAA;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,4BAA0B,QAAA,EAAS,CAAA;AAAA,QAEnC,CAAC,UAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,IAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,CAAK,YAAA,EAAL,EAAkB,SAAA,EAAW,OAAO,KAAA,EAAO,CAAA;AAAA,UAAG,GAAA;AAAA,0BAC/C,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,OAAA,EAAQ,WAAU,QAAA,EAAS;AAAA,SAAA,EACvD,CAAA;AAAA,wBAGF,GAAA,CAAC,IAAA,CAAK,WAAA,EAAL,EAAiB,SAAA,EAAW,OAAO,KAAA,EACjC,QAAA,EAAA,CAAC,EAAE,KAAA,EAAM,qBACR,IAAA;AAAA,UAAC,oBAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ;AAAA,gBACN,SAAA,EAAW,KAAA;AAAA,gBACX,QAAA,EAAU,KAAA;AAAA,gBACV,WAAA,EAAa,KAAA;AAAA,gBACb,UAAA;AAAA,gBACA,mBAAA,EAAqB,IAAA;AAAA,gBACrB,UAAA;AAAA,gBACA,OAAA,EAAS,OAAA;AAAA,gBACT,KAAA,EAAO,WAAA;AAAA,gBACP,IAAA,EAAM;AAAA;AACR,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,CAAC,8BACA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,OAAA,EAAS,MAAM,KAAA,CAAM,cAAA,CAAe,GAAG,IAAI,CAAA;AAAA,oBAC3C,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,WAAW,CAAA;AAAA,oBAC9C,WAAW,MAAA,CAAO,SAAA;AAAA,oBAElB,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,iBACb;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,OAAA,EAAS,MAAM,KAAA,CAAM,cAAA,CAAe,GAAG,IAAI,CAAA;AAAA,oBAC3C,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,WAAW,CAAA;AAAA,oBAC9C,WAAW,MAAA,CAAO,SAAA;AAAA,oBAElB,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA;AACZ,eAAA,EACF,CAAA;AAAA,8BAGF,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,WAAW,MAAA,CAAO,IAAA;AAAA,kBAClB,KAAA,EAAO,EAAE,KAAA,EAAO,KAAA,CAAM,gBAAgB,CAAC,CAAA,GAAI,MAAM,GAAA;AAAI;AAAA,eACvD;AAAA,cAEC,iBAAA,IACC,YAAA,IACA,OAAO,YAAA,KAAiB,QAAA,oBACtB,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,WAAW,MAAA,CAAO,aAAA;AAAA,kBAClB,KAAA,EAAO;AAAA,oBACL,MAAM,CAAA,KAAA,EAAQ,KAAA,CAAM,eAAA,CAAgB,YAAY,IAAI,GAAG,CAAA,QAAA;AAAA;AACzD;AAAA,eACF;AAAA,8BAEJ,GAAA;AAAA,gBAAC,IAAA,CAAK,WAAA;AAAA,gBAAL;AAAA,kBACC,QAAA,EAAU,SAAA;AAAA,kBACV,IAAA;AAAA,kBACA,WAAW,MAAA,CAAO,MAAA;AAAA,kBAClB,UAAA,EAAY;AAAA;AAAA;AACd;AAAA;AAAA,SACF,EAEJ,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -9,6 +9,7 @@ import { IconCheck } from '../Icon/components/icons/IconCheck.mjs';
|
|
|
9
9
|
import { IconClose } from '../Icon/components/icons/IconClose.mjs';
|
|
10
10
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
11
11
|
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
12
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
12
13
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
13
14
|
import styles$1 from '../Label/Label.module.scss.mjs';
|
|
14
15
|
import { useObjectRef } from 'react-aria';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"@/components/Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n extends\n PropsWithChildren<Omit<Aria.SwitchProps, \"children\" | \"inputRef\">>,\n FlowComponentProps<HTMLInputElement> {\n /**\n * Whether the label should appear before or after the switch. @default\n * \"trailing\"\n */\n labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n styles[`label-${labelPosition}`],\n className,\n );\n\n const objectRef = useObjectRef(ref);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"Switch\");\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n optional: false,\n className: styles.label,\n },\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n {({ isSelected }) => (\n <PropsContextProvider props={propsContext}>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <div className={labelStyles.label}>{children}</div>\n </PropsContextProvider>\n )}\n </Aria.Switch>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Switch;\n"],"names":["labelStyles"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Switch.mjs","sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"@/components/Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n extends\n PropsWithChildren<Omit<Aria.SwitchProps, \"children\" | \"inputRef\">>,\n FlowComponentProps<HTMLInputElement> {\n /**\n * Whether the label should appear before or after the switch. @default\n * \"trailing\"\n */\n labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n styles[`label-${labelPosition}`],\n className,\n );\n\n const objectRef = useObjectRef(ref);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"Switch\");\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n optional: false,\n className: styles.label,\n },\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n {({ isSelected }) => (\n <PropsContextProvider props={propsContext}>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <div className={labelStyles.label}>{children}</div>\n </PropsContextProvider>\n )}\n </Aria.Switch>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Switch;\n"],"names":["labelStyles"],"mappings":";;;;;;;;;;;;;;AAwBO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA,GAAgB,UAAA;AAAA,IAChB,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,MAAA,CAAO,CAAA,MAAA,EAAS,aAAa,CAAA,CAAE,CAAA;AAAA,IAC/B;AAAA,GACF;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAElC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,QAAQ,CAAA;AAErC,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,GAAG,iBAAA;AAAA,IACH,KAAA,EAAO;AAAA,MACL,GAAG,iBAAA,CAAkB,KAAA;AAAA,MACrB,QAAA,EAAU,KAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,GAAA,CAAC,IAAA,CAAK,QAAL,EAAa,GAAG,MAAM,SAAA,EAAW,aAAA,EAAe,QAAA,EAAU,SAAA,EACxD,WAAC,EAAE,UAAA,uBACF,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,KAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,MAAA,EACpB,QAAA,EAAA,UAAA,uBAAc,SAAA,EAAA,EAAU,IAAA,EAAK,KAAI,CAAA,mBAAK,GAAA,CAAC,aAAU,IAAA,EAAK,GAAA,EAAI,GAC7D,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWA,QAAA,CAAY,OAAQ,QAAA,EAAS;AAAA,KAAA,EAC/C,GAEJ,CAAA,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -10,6 +10,7 @@ import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalized
|
|
|
10
10
|
import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
|
|
11
11
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
12
12
|
import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
|
|
13
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
13
14
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
14
15
|
import ContextMenuTriggerView from '../../views/ContextMenuTriggerView.mjs';
|
|
15
16
|
import ContextMenuView from '../../views/ContextMenuView.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabNavigation.mjs","sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n useCollapsingItems();\n\n const rootClassName = clsx(\n styles.tabNavigation,\n hasOverflow && styles.collapsed,\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li />,\n className: styles.link,\n unstyled: true,\n children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <ul ref={listRef}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n <div className={styles.more} ref={moreRef}>\n <ContextMenuTriggerView>\n <Button\n unstyled\n className={clsx(\n styles.moreButton,\n menuHasCurrentItem && styles.current,\n )}\n >\n <Text emulateBoldWidth>\n {stringFormatter.format(\"moreButton.title\")}\n </Text>\n <IconChevronDown />\n </Button>\n <ContextMenuView placement=\"bottom end\">\n <UiComponentTunnelExit\n id=\"menuItems\"\n component=\"TabNavigation\"\n children={(menuItems) =>\n Array.isArray(menuItems)\n ? menuItems.slice(visibleCount ?? menuItems.length)\n : menuItems\n }\n />\n </ContextMenuView>\n </ContextMenuTriggerView>\n </div>\n </nav>\n );\n});\n\nexport default TabNavigation;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabNavigation.mjs","sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n useCollapsingItems();\n\n const rootClassName = clsx(\n styles.tabNavigation,\n hasOverflow && styles.collapsed,\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li />,\n className: styles.link,\n unstyled: true,\n children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <ul ref={listRef}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n <div className={styles.more} ref={moreRef}>\n <ContextMenuTriggerView>\n <Button\n unstyled\n className={clsx(\n styles.moreButton,\n menuHasCurrentItem && styles.current,\n )}\n >\n <Text emulateBoldWidth>\n {stringFormatter.format(\"moreButton.title\")}\n </Text>\n <IconChevronDown />\n </Button>\n <ContextMenuView placement=\"bottom end\">\n <UiComponentTunnelExit\n id=\"menuItems\"\n component=\"TabNavigation\"\n children={(menuItems) =>\n Array.isArray(menuItems)\n ? menuItems.slice(visibleCount ?? menuItems.length)\n : menuItems\n }\n />\n </ContextMenuView>\n </ContextMenuTriggerView>\n </div>\n </nav>\n );\n});\n\nexport default TabNavigation;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkCO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,eAAe,CAAA;AAE5E,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,cAAc,WAAA,EAAa,kBAAA,KACnD,kBAAA,EAAmB;AAErB,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,aAAA;AAAA,IACP,eAAe,MAAA,CAAO,SAAA;AAAA,IACtB;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,UAAU,OAAA,CAAQ,CAAC,8BAAc,GAAA,CAAC,WAAA,EAAA,EAAY,WAAsB,CAAE;AAAA;AACxE,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EAAe,MAAK,YAAA,EAAc,GAAG,MAAM,GAAA,EACzD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,KAAK,OAAA,EACP,QAAA,kBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,YAAA,EAC1B,UACH,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,MAAM,GAAA,EAAK,OAAA,EAChC,+BAAC,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,QAAA,EAAQ,IAAA;AAAA,UACR,SAAA,EAAW,IAAA;AAAA,YACT,MAAA,CAAO,UAAA;AAAA,YACP,sBAAsB,MAAA,CAAO;AAAA,WAC/B;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAK,gBAAA,EAAgB,IAAA,EACnB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,kBAAkB,CAAA,EAC5C,CAAA;AAAA,gCACC,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,OACnB;AAAA,sBACA,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAU,YAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAG,WAAA;AAAA,UACH,SAAA,EAAU,eAAA;AAAA,UACV,QAAA,EAAU,CAAC,SAAA,KACT,KAAA,CAAM,OAAA,CAAQ,SAAS,CAAA,GACnB,SAAA,CAAU,KAAA,CAAM,YAAA,IAAgB,SAAA,CAAU,MAAM,CAAA,GAChD;AAAA;AAAA,OAER,EACF;AAAA,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs
CHANGED
|
@@ -4,6 +4,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import * as Aria from 'react-aria-components';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import styles from '../../Table.module.scss.mjs';
|
|
7
|
+
import '../../../../lib/propsContext/propsContext.mjs';
|
|
7
8
|
import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
8
9
|
|
|
9
10
|
const TableColumn = (props) => {
|
package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableColumn.mjs","sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface TableColumnProps\n extends\n Omit<\n Aria.ColumnProps,\n \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n >,\n PropsWithChildren {\n /** Horizontal alignment of the cell content @default \"start\" */\n horizontalAlign?: \"start\" | \"center\" | \"end\";\n /** The width of the column. */\n width?: number | string;\n /** The minimum width of the column. */\n minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n const {\n children,\n className,\n horizontalAlign = \"start\",\n width,\n minWidth,\n ...rest\n } = props;\n const rootClassName = clsx(\n styles.column,\n styles[`horizontal-align-${horizontalAlign}`],\n className,\n );\n\n const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n return (\n <Aria.Column\n isRowHeader\n className={rootClassName}\n {...rest}\n style={{ width, minWidth }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Aria.Column>\n );\n};\n\nexport default TableColumn;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableColumn.mjs","sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface TableColumnProps\n extends\n Omit<\n Aria.ColumnProps,\n \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n >,\n PropsWithChildren {\n /** Horizontal alignment of the cell content @default \"start\" */\n horizontalAlign?: \"start\" | \"center\" | \"end\";\n /** The width of the column. */\n width?: number | string;\n /** The minimum width of the column. */\n minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n const {\n children,\n className,\n horizontalAlign = \"start\",\n width,\n minWidth,\n ...rest\n } = props;\n const rootClassName = clsx(\n styles.column,\n styles[`horizontal-align-${horizontalAlign}`],\n className,\n );\n\n const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n return (\n <Aria.Column\n isRowHeader\n className={rootClassName}\n {...rest}\n style={{ width, minWidth }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Aria.Column>\n );\n};\n\nexport default TableColumn;\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA,GAAkB,OAAA;AAAA,IAClB,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,MAAA,CAAO,CAAA,iBAAA,EAAoB,eAAe,CAAA,CAAE,CAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAA,MAAM,eAA6B,EAAE,QAAA,EAAU,EAAE,IAAA,EAAM,MAAK,EAAE;AAE9D,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,MAAA;AAAA,IAAL;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA,EAAS;AAAA,MAEzB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -6,6 +6,7 @@ import * as Aria from 'react-aria-components';
|
|
|
6
6
|
import styles from '../../Tabs.module.scss.mjs';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import { TabContextProvider } from './context.mjs';
|
|
9
|
+
import '../../../../lib/propsContext/propsContext.mjs';
|
|
9
10
|
import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
10
11
|
import { Activity } from '../../../Activity/Activity.mjs';
|
|
11
12
|
import { UiComponentTunnelEntry } from '../../../UiComponentTunnel/UiComponentTunnelEntry.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.mjs","sources":["../../../../../../../../../src/components/Tabs/components/Tab/Tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport type { TabPanelRenderProps } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Tabs.module.scss\";\nimport clsx from \"clsx\";\nimport { TabContextProvider } from \"@/components/Tabs/components/Tab/context\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Activity } from \"@/components/Activity\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabProps\n extends Omit<Aria.TabPanelProps, \"children\">, PropsWithChildren {}\n\n/** @flr-generate all */\nexport const Tab: FC<TabProps> = (props) => {\n const { children, className, id: idFromProps, ...rest } = props;\n\n const rootClassName = clsx(styles.tabPanel, className);\n\n const generatedId = useId();\n const id = idFromProps ?? generatedId;\n\n const TabPanelRenderer = (props: TabPanelRenderProps): Awaited<ReactNode> => {\n const isSelected = props.state.selectedKey === id;\n\n const propsContext: PropsContext = {\n Content: {\n wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n },\n Section: {\n wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n },\n };\n\n return (\n <PropsContextProvider\n props={propsContext}\n dependencies={[isSelected, children]}\n >\n {children}\n </PropsContextProvider>\n );\n };\n\n return (\n <UiComponentTunnelEntry id=\"Panels\" component=\"Tabs\">\n <TabContextProvider value={{ id }}>\n <Aria.TabPanel\n className={rootClassName}\n shouldForceMount\n id={id}\n {...rest}\n >\n {TabPanelRenderer}\n </Aria.TabPanel>\n </TabContextProvider>\n </UiComponentTunnelEntry>\n );\n};\n\nexport default Tab;\n"],"names":["props"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tab.mjs","sources":["../../../../../../../../../src/components/Tabs/components/Tab/Tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport type { TabPanelRenderProps } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Tabs.module.scss\";\nimport clsx from \"clsx\";\nimport { TabContextProvider } from \"@/components/Tabs/components/Tab/context\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Activity } from \"@/components/Activity\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabProps\n extends Omit<Aria.TabPanelProps, \"children\">, PropsWithChildren {}\n\n/** @flr-generate all */\nexport const Tab: FC<TabProps> = (props) => {\n const { children, className, id: idFromProps, ...rest } = props;\n\n const rootClassName = clsx(styles.tabPanel, className);\n\n const generatedId = useId();\n const id = idFromProps ?? generatedId;\n\n const TabPanelRenderer = (props: TabPanelRenderProps): Awaited<ReactNode> => {\n const isSelected = props.state.selectedKey === id;\n\n const propsContext: PropsContext = {\n Content: {\n wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n },\n Section: {\n wrapWith: <Activity isActive={isSelected} forceCustomActivity />,\n },\n };\n\n return (\n <PropsContextProvider\n props={propsContext}\n dependencies={[isSelected, children]}\n >\n {children}\n </PropsContextProvider>\n );\n };\n\n return (\n <UiComponentTunnelEntry id=\"Panels\" component=\"Tabs\">\n <TabContextProvider value={{ id }}>\n <Aria.TabPanel\n className={rootClassName}\n shouldForceMount\n id={id}\n {...rest}\n >\n {TabPanelRenderer}\n </Aria.TabPanel>\n </TabContextProvider>\n </UiComponentTunnelEntry>\n );\n};\n\nexport default Tab;\n"],"names":["props"],"mappings":";;;;;;;;;;;AAgBO,MAAM,GAAA,GAAoB,CAAC,KAAA,KAAU;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,IAAI,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAE1D,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,EAAA,MAAM,KAAK,WAAA,IAAe,WAAA;AAE1B,EAAA,MAAM,gBAAA,GAAmB,CAACA,MAAAA,KAAmD;AAC3E,IAAA,MAAM,UAAA,GAAaA,MAAAA,CAAM,KAAA,CAAM,WAAA,KAAgB,EAAA;AAE/C,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,OAAA,EAAS;AAAA,QACP,0BAAU,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,UAAA,EAAY,qBAAmB,IAAA,EAAC;AAAA,OAChE;AAAA,MACA,OAAA,EAAS;AAAA,QACP,0BAAU,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,UAAA,EAAY,qBAAmB,IAAA,EAAC;AAAA;AAChE,KACF;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,UAAA,EAAY,QAAQ,CAAA;AAAA,QAElC;AAAA;AAAA,KACH;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,sBAAA,EAAA,EAAuB,EAAA,EAAG,QAAA,EAAS,SAAA,EAAU,MAAA,EAC5C,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,KAAA,EAAO,EAAE,EAAA,EAAG,EAC9B,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA,CAAK,QAAA;AAAA,IAAL;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACX,gBAAA,EAAgB,IAAA;AAAA,MAChB,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import * as Aria from 'react-aria-components';
|
|
5
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
5
6
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
6
7
|
import { isAlphaColor } from '../../lib/types/props.mjs';
|
|
7
8
|
import invariant from 'invariant';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.mjs","sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n extends\n PropsWithChildren,\n Omit<Aria.TextProps, \"children\" | \"elementType\">,\n PropsWithElementType<\"span\" | \"div\" | \"p\">,\n FlowComponentProps {\n /* Whether the elements width should match the width it would have with mold text. */\n emulateBoldWidth?: boolean;\n /* The color of the text. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /* The alignment of the text. @default \"start\" */\n align?: \"start\" | \"end\" | \"center\";\n /* The text-wrap property of the text. @default undefined */\n wrap?: \"wrap\" | \"balance\" | \"pretty\";\n /* The white-space property of the text. @default undefined */\n whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n /* The word-break property of the text. @default undefined */\n wordBreak?: React.CSSProperties[\"wordBreak\"];\n /* Disables standard and contextual ligatures for predictable, literal text rendering */\n noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n const {\n children,\n className,\n elementType = \"span\",\n emulateBoldWidth,\n ref,\n color = \"default\",\n align = \"start\",\n wrap,\n style: styleFromProps,\n whiteSpace,\n wordBreak,\n noLigatures,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.text,\n isAlphaColor(color) && styles[color],\n align && styles[`align-${align}`],\n wrap && styles[`wrap-${wrap}`],\n noLigatures && styles[`no-ligatures`],\n className,\n );\n\n const textProps = { ...rest, className: rootClassName };\n\n const propsContext: PropsContext = {\n Link: {\n inline: true,\n color: isAlphaColor(color) ? color : undefined,\n },\n Icon: { className: styles.icon },\n Kbd: { variant: \"soft\" },\n };\n\n const style = {\n whiteSpace,\n wordBreak,\n ...styleFromProps,\n };\n\n const childrenElement = (\n <PropsContextProvider props={propsContext}>\n <Wrap if={emulateBoldWidth}>\n <EmulatedBoldText>{children}</EmulatedBoldText>\n </Wrap>\n </PropsContextProvider>\n );\n\n if (!props.slot) {\n const Element = elementType;\n return (\n <Element style={style} {...textProps} ref={ref}>\n {childrenElement}\n </Element>\n );\n }\n\n invariant(\n typeof elementType === \"string\",\n \"'elementType' in Text component must be of type string\",\n );\n\n return (\n <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n {childrenElement}\n </Aria.Text>\n );\n});\n\nexport default Text;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Text.mjs","sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n extends\n PropsWithChildren,\n Omit<Aria.TextProps, \"children\" | \"elementType\">,\n PropsWithElementType<\"span\" | \"div\" | \"p\">,\n FlowComponentProps {\n /* Whether the elements width should match the width it would have with mold text. */\n emulateBoldWidth?: boolean;\n /* The color of the text. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /* The alignment of the text. @default \"start\" */\n align?: \"start\" | \"end\" | \"center\";\n /* The text-wrap property of the text. @default undefined */\n wrap?: \"wrap\" | \"balance\" | \"pretty\";\n /* The white-space property of the text. @default undefined */\n whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n /* The word-break property of the text. @default undefined */\n wordBreak?: React.CSSProperties[\"wordBreak\"];\n /* Disables standard and contextual ligatures for predictable, literal text rendering */\n noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n const {\n children,\n className,\n elementType = \"span\",\n emulateBoldWidth,\n ref,\n color = \"default\",\n align = \"start\",\n wrap,\n style: styleFromProps,\n whiteSpace,\n wordBreak,\n noLigatures,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.text,\n isAlphaColor(color) && styles[color],\n align && styles[`align-${align}`],\n wrap && styles[`wrap-${wrap}`],\n noLigatures && styles[`no-ligatures`],\n className,\n );\n\n const textProps = { ...rest, className: rootClassName };\n\n const propsContext: PropsContext = {\n Link: {\n inline: true,\n color: isAlphaColor(color) ? color : undefined,\n },\n Icon: { className: styles.icon },\n Kbd: { variant: \"soft\" },\n };\n\n const style = {\n whiteSpace,\n wordBreak,\n ...styleFromProps,\n };\n\n const childrenElement = (\n <PropsContextProvider props={propsContext}>\n <Wrap if={emulateBoldWidth}>\n <EmulatedBoldText>{children}</EmulatedBoldText>\n </Wrap>\n </PropsContextProvider>\n );\n\n if (!props.slot) {\n const Element = elementType;\n return (\n <Element style={style} {...textProps} ref={ref}>\n {childrenElement}\n </Element>\n );\n }\n\n invariant(\n typeof elementType === \"string\",\n \"'elementType' in Text component must be of type string\",\n );\n\n return (\n <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n {childrenElement}\n </Aria.Text>\n );\n});\n\nexport default Text;\n"],"names":[],"mappings":";;;;;;;;;;;;AAyCO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA,GAAc,MAAA;AAAA,IACd,gBAAA;AAAA,IACA,GAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,KAAA,GAAQ,OAAA;AAAA,IACR,IAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP,UAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,IAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC,KAAA,IAAS,MAAA,CAAO,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAA;AAAA,IAChC,IAAA,IAAQ,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IAC7B,WAAA,IAAe,OAAO,CAAA,YAAA,CAAc,CAAA;AAAA,IACpC;AAAA,GACF;AAEA,EAAA,MAAM,SAAA,GAAY,EAAE,GAAG,IAAA,EAAM,WAAW,aAAA,EAAc;AAEtD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ,IAAA;AAAA,MACR,KAAA,EAAO,YAAA,CAAa,KAAK,CAAA,GAAI,KAAA,GAAQ;AAAA,KACvC;AAAA,IACA,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,IAC/B,GAAA,EAAK,EAAE,OAAA,EAAS,MAAA;AAAO,GACzB;AAEA,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,eAAA,mBACJ,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,gBAAA,EACR,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAS,GAC9B,CAAA,EACF,CAAA;AAGF,EAAA,IAAI,CAAC,MAAM,IAAA,EAAM;AACf,IAAA,MAAM,OAAA,GAAU,WAAA;AAChB,IAAA,2BACG,OAAA,EAAA,EAAQ,KAAA,EAAe,GAAG,SAAA,EAAW,KACnC,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,SAAA;AAAA,IACE,OAAO,WAAA,KAAgB,QAAA;AAAA,IACvB;AAAA,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAK,IAAA,EAAL,EAAU,OAAe,GAAG,SAAA,EAAW,WAAA,EAA0B,GAAA,EAC/D,QAAA,EAAA,eAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -6,6 +6,7 @@ import styles from './TextArea.module.scss.mjs';
|
|
|
6
6
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
7
7
|
import { useObjectRef } from '@react-aria/utils';
|
|
8
8
|
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
9
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
9
10
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
10
11
|
import clsx from 'clsx';
|
|
11
12
|
import { useState, useEffect } from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.mjs","sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { type PropsWithChildren, useEffect, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n FlowComponentProps<HTMLTextAreaElement> {\n /** Whether a character count should be displayed inside the field description. */\n showCharacterCount?: boolean;\n /**\n * Whether the text area should grow if its content gets longer than its\n * initial height.\n */\n autoResizeMaxRows?: number;\n /** Allows the user to manually resize the textArea horizontally. */\n allowResize?: boolean | \"horizontal\" | \"vertical\";\n /** @deprecated Use `allowResize` instead. */\n allowHorizontalResize?: boolean;\n /** @deprecated Use `allowResize` instead. */\n allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n children,\n placeholder,\n rows = 5,\n autoResizeMaxRows = rows,\n ref,\n allowVerticalResize,\n allowHorizontalResize,\n showCharacterCount,\n className,\n onChange,\n isReadOnly,\n ...rest\n } = useControlledHostValueProps(props);\n\n const [charactersCount, setCharactersCount] = useState(\n props.defaultValue?.length ?? props.value?.length ?? 0,\n );\n\n if (allowHorizontalResize !== undefined) {\n warnDeprecation(\n \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n if (allowVerticalResize !== undefined) {\n warnDeprecation(\n \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TextArea\");\n\n let { allowResize } = props;\n if (allowVerticalResize) {\n allowResize = \"vertical\";\n } else if (allowHorizontalResize) {\n allowResize = \"horizontal\";\n }\n\n const rootClassName = clsx(fieldProps.className, className);\n\n const inputClassName = clsx(\n styles.input,\n typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n allowResize === \"horizontal\"\n ? styles.horizontalResize\n : allowResize === \"vertical\"\n ? styles.verticalResize\n : null,\n );\n\n const handleChange = (v: string) => {\n if (isReadOnly) {\n return;\n }\n\n if (showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n const charactersCountDescription = translation.format(\"characters\", {\n count: charactersCount,\n maxCount: props.maxLength ?? 0,\n });\n\n const localRef = useObjectRef(ref);\n\n const getHeight = (rows: number) => {\n return `calc(var(--line-height-m) * ${rows} + (var(--form-control--padding-y) * 2))`;\n };\n\n const [resized, setResized] = useState(false);\n\n const autoResizable = rows !== autoResizeMaxRows;\n\n const verticallyResizable =\n allowResize && (!autoResizable || (autoResizable && resized));\n\n useEffect(() => {\n const textarea = localRef.current;\n if (!textarea) return;\n\n const startHeight = textarea.offsetHeight;\n let tracking = false;\n\n const handleMouseDown = () => {\n tracking = true;\n };\n\n const handleMouseMove = () => {\n if (!tracking || resized) return;\n\n const currentHeight = textarea.offsetHeight;\n\n if (currentHeight !== startHeight) {\n setResized(true);\n tracking = false;\n }\n };\n\n const handleMouseUp = () => {\n tracking = false;\n };\n\n window.addEventListener(\"mousedown\", handleMouseDown);\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [resized]);\n\n const updateHeight = () => {\n if (localRef.current && autoResizable && !verticallyResizable) {\n // https://stackoverflow.com/a/60795884\n localRef.current.style.height = \"0px\";\n const scrollHeight = localRef.current.scrollHeight;\n // + 2 to add border height\n localRef.current.style.height = scrollHeight + 2 + \"px\";\n }\n };\n\n return (\n <Aria.TextField\n {...rest}\n {...fieldProps}\n className={rootClassName}\n onChange={handleChange}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <Aria.TextArea\n rows={rows}\n {...(isReadOnly ? { \"data-readonly\": true } : {})}\n aria-readonly={isReadOnly}\n aria-hidden={props[\"aria-hidden\"]}\n placeholder={placeholder}\n className={inputClassName}\n ref={localRef}\n onChange={updateHeight}\n style={{\n caretColor: isReadOnly ? \"transparent\" : undefined,\n minHeight: getHeight(rows),\n maxHeight: verticallyResizable\n ? undefined\n : getHeight(autoResizeMaxRows),\n }}\n />\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextArea;\n"],"names":["rows"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextArea.mjs","sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { type PropsWithChildren, useEffect, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n FlowComponentProps<HTMLTextAreaElement> {\n /** Whether a character count should be displayed inside the field description. */\n showCharacterCount?: boolean;\n /**\n * Whether the text area should grow if its content gets longer than its\n * initial height.\n */\n autoResizeMaxRows?: number;\n /** Allows the user to manually resize the textArea horizontally. */\n allowResize?: boolean | \"horizontal\" | \"vertical\";\n /** @deprecated Use `allowResize` instead. */\n allowHorizontalResize?: boolean;\n /** @deprecated Use `allowResize` instead. */\n allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n children,\n placeholder,\n rows = 5,\n autoResizeMaxRows = rows,\n ref,\n allowVerticalResize,\n allowHorizontalResize,\n showCharacterCount,\n className,\n onChange,\n isReadOnly,\n ...rest\n } = useControlledHostValueProps(props);\n\n const [charactersCount, setCharactersCount] = useState(\n props.defaultValue?.length ?? props.value?.length ?? 0,\n );\n\n if (allowHorizontalResize !== undefined) {\n warnDeprecation(\n \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n if (allowVerticalResize !== undefined) {\n warnDeprecation(\n \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TextArea\");\n\n let { allowResize } = props;\n if (allowVerticalResize) {\n allowResize = \"vertical\";\n } else if (allowHorizontalResize) {\n allowResize = \"horizontal\";\n }\n\n const rootClassName = clsx(fieldProps.className, className);\n\n const inputClassName = clsx(\n styles.input,\n typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n allowResize === \"horizontal\"\n ? styles.horizontalResize\n : allowResize === \"vertical\"\n ? styles.verticalResize\n : null,\n );\n\n const handleChange = (v: string) => {\n if (isReadOnly) {\n return;\n }\n\n if (showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n const charactersCountDescription = translation.format(\"characters\", {\n count: charactersCount,\n maxCount: props.maxLength ?? 0,\n });\n\n const localRef = useObjectRef(ref);\n\n const getHeight = (rows: number) => {\n return `calc(var(--line-height-m) * ${rows} + (var(--form-control--padding-y) * 2))`;\n };\n\n const [resized, setResized] = useState(false);\n\n const autoResizable = rows !== autoResizeMaxRows;\n\n const verticallyResizable =\n allowResize && (!autoResizable || (autoResizable && resized));\n\n useEffect(() => {\n const textarea = localRef.current;\n if (!textarea) return;\n\n const startHeight = textarea.offsetHeight;\n let tracking = false;\n\n const handleMouseDown = () => {\n tracking = true;\n };\n\n const handleMouseMove = () => {\n if (!tracking || resized) return;\n\n const currentHeight = textarea.offsetHeight;\n\n if (currentHeight !== startHeight) {\n setResized(true);\n tracking = false;\n }\n };\n\n const handleMouseUp = () => {\n tracking = false;\n };\n\n window.addEventListener(\"mousedown\", handleMouseDown);\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [resized]);\n\n const updateHeight = () => {\n if (localRef.current && autoResizable && !verticallyResizable) {\n // https://stackoverflow.com/a/60795884\n localRef.current.style.height = \"0px\";\n const scrollHeight = localRef.current.scrollHeight;\n // + 2 to add border height\n localRef.current.style.height = scrollHeight + 2 + \"px\";\n }\n };\n\n return (\n <Aria.TextField\n {...rest}\n {...fieldProps}\n className={rootClassName}\n onChange={handleChange}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <Aria.TextArea\n rows={rows}\n {...(isReadOnly ? { \"data-readonly\": true } : {})}\n aria-readonly={isReadOnly}\n aria-hidden={props[\"aria-hidden\"]}\n placeholder={placeholder}\n className={inputClassName}\n ref={localRef}\n onChange={updateHeight}\n style={{\n caretColor: isReadOnly ? \"transparent\" : undefined,\n minHeight: getHeight(rows),\n maxHeight: verticallyResizable\n ? undefined\n : getHeight(autoResizeMaxRows),\n }}\n />\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextArea;\n"],"names":["rows"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
|
5
5
|
import * as Aria from 'react-aria-components';
|
|
6
6
|
import { useState } from 'react';
|
|
7
7
|
import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
|
|
8
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
8
9
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
9
10
|
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
10
11
|
import styles from './TextField.module.scss.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.mjs","sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.InputProps, \"placeholder\">,\n FlowComponentProps<HTMLInputElement> {\n /** Whether a character count should be displayed inside the field description. */\n showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n const {\n className,\n showCharacterCount,\n form,\n placeholder,\n ref,\n type: typeFromProps,\n children,\n onChange,\n ...rest\n } = useControlledHostValueProps(props);\n\n const [charactersCount, setCharactersCount] = useState(\n props.defaultValue?.length ?? props.value?.length ?? 0,\n );\n\n const [type, setType] = useState(typeFromProps);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TextField\");\n\n const rootClassName = clsx(fieldProps.className, className);\n\n const propsContext: PropsContext = {\n Button: {\n className: styles.button,\n variant: \"plain\",\n color: \"secondary\",\n tunnel: {\n id: \"button\",\n component: \"TextField\",\n },\n },\n CopyButton: {\n className: styles.button,\n tunnel: {\n id: \"button\",\n component: \"TextField\",\n },\n },\n ...fieldPropsContext,\n };\n\n const handleChange = (v: string) => {\n if (showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n const charactersCountDescription = translation.format(\"characters\", {\n count: charactersCount,\n maxCount: props.maxLength ?? 0,\n });\n\n return (\n <Aria.TextField\n {...rest}\n {...fieldProps}\n className={rootClassName}\n onChange={handleChange}\n type={type}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>\n {children}\n <div className={styles.inputContainer}>\n <Aria.Input\n form={form}\n placeholder={placeholder}\n className={styles.input}\n ref={ref}\n />\n <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n {typeFromProps === \"password\" && (\n <Button\n color=\"secondary\"\n variant=\"plain\"\n className={styles.button}\n onPress={() =>\n setType(type === \"password\" ? \"text\" : \"password\")\n }\n aria-label={translation.format(\n `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n )}\n >\n {type === \"password\" ? <IconShow /> : <IconHide />}\n </Button>\n )}\n </div>\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextField;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextField.mjs","sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.InputProps, \"placeholder\">,\n FlowComponentProps<HTMLInputElement> {\n /** Whether a character count should be displayed inside the field description. */\n showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n const {\n className,\n showCharacterCount,\n form,\n placeholder,\n ref,\n type: typeFromProps,\n children,\n onChange,\n ...rest\n } = useControlledHostValueProps(props);\n\n const [charactersCount, setCharactersCount] = useState(\n props.defaultValue?.length ?? props.value?.length ?? 0,\n );\n\n const [type, setType] = useState(typeFromProps);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TextField\");\n\n const rootClassName = clsx(fieldProps.className, className);\n\n const propsContext: PropsContext = {\n Button: {\n className: styles.button,\n variant: \"plain\",\n color: \"secondary\",\n tunnel: {\n id: \"button\",\n component: \"TextField\",\n },\n },\n CopyButton: {\n className: styles.button,\n tunnel: {\n id: \"button\",\n component: \"TextField\",\n },\n },\n ...fieldPropsContext,\n };\n\n const handleChange = (v: string) => {\n if (showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n const charactersCountDescription = translation.format(\"characters\", {\n count: charactersCount,\n maxCount: props.maxLength ?? 0,\n });\n\n return (\n <Aria.TextField\n {...rest}\n {...fieldProps}\n className={rootClassName}\n onChange={handleChange}\n type={type}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>\n {children}\n <div className={styles.inputContainer}>\n <Aria.Input\n form={form}\n placeholder={placeholder}\n className={styles.input}\n ref={ref}\n />\n <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n {typeFromProps === \"password\" && (\n <Button\n color=\"secondary\"\n variant=\"plain\"\n className={styles.button}\n onPress={() =>\n setType(type === \"password\" ? \"text\" : \"password\")\n }\n aria-label={translation.format(\n `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n )}\n >\n {type === \"password\" ? <IconShow /> : <IconHide />}\n </Button>\n )}\n </div>\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextField;\n"],"names":[],"mappings":"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"}
|
|
@@ -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 { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
7
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
7
8
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
8
9
|
import styles from './TimeField.module.scss.mjs';
|
|
9
10
|
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.mjs","sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./TimeField.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n extends\n PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n const { children, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TimeField\");\n\n return (\n <Aria.TimeField hourCycle={24} {...rest} {...fieldProps}>\n <FieldErrorCaptureContext>\n <DateInput className={styles.dateInput} ref={ref} />\n <PropsContextProvider props={fieldPropsContext}>\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TimeField>\n );\n});\n\nexport default TimeField;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TimeField.mjs","sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./TimeField.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n extends\n PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n const { children, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TimeField\");\n\n return (\n <Aria.TimeField hourCycle={24} {...rest} {...fieldProps}>\n <FieldErrorCaptureContext>\n <DateInput className={styles.dateInput} ref={ref} />\n <PropsContextProvider props={fieldPropsContext}>\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TimeField>\n );\n});\n\nexport default TimeField;\n"],"names":[],"mappings":";;;;;;;;;;AAiBO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM,EAAE,QAAA,EAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEnC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,WAAW,CAAA;AAExC,EAAA,uBACE,IAAA,CAAC,KAAK,SAAA,EAAL,EAAe,WAAW,EAAA,EAAK,GAAG,IAAA,EAAO,GAAG,UAAA,EAC3C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,GAAA,EAAU,CAAA;AAAA,sBAClD,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}
|
package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { useFormContext } from '../FormContextProvider/FormContextProvider.mjs';
|
|
5
5
|
import { dynamic } from '../../../../lib/propsContext/dynamicProps/dynamic.mjs';
|
|
6
|
+
import '../../../../lib/propsContext/propsContext.mjs';
|
|
6
7
|
import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
7
8
|
import 'react';
|
|
8
9
|
import { useController, useWatch } from 'react-hook-form';
|