@simplybusiness/mobius 10.4.2 → 10.4.4
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 +17 -0
- package/dist/cjs/components/AddressLookup/AddressLookup.js +39 -36
- package/dist/cjs/components/AddressLookup/AddressLookup.js.map +3 -3
- package/dist/cjs/components/AddressLookup/index.js +39 -36
- package/dist/cjs/components/AddressLookup/index.js.map +3 -3
- package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js +3 -7
- package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js.map +2 -2
- package/dist/cjs/components/Breadcrumbs/index.js +3 -7
- package/dist/cjs/components/Breadcrumbs/index.js.map +2 -2
- package/dist/cjs/components/Combobox/Combobox.js +35 -32
- package/dist/cjs/components/Combobox/Combobox.js.map +3 -3
- package/dist/cjs/components/Combobox/index.js +35 -32
- package/dist/cjs/components/Combobox/index.js.map +3 -3
- package/dist/cjs/components/DateField/DateField.js +11 -8
- package/dist/cjs/components/DateField/DateField.js.map +3 -3
- package/dist/cjs/components/DateField/index.js +11 -8
- package/dist/cjs/components/DateField/index.js.map +3 -3
- package/dist/cjs/components/DropdownMenu/Item.js +3 -6
- package/dist/cjs/components/DropdownMenu/Item.js.map +2 -2
- package/dist/cjs/components/DropdownMenu/index.js +3 -6
- package/dist/cjs/components/DropdownMenu/index.js.map +2 -2
- package/dist/cjs/components/MaskedField/MaskedField.js +11 -8
- package/dist/cjs/components/MaskedField/MaskedField.js.map +3 -3
- package/dist/cjs/components/MaskedField/index.js +13 -10
- package/dist/cjs/components/MaskedField/index.js.map +3 -3
- package/dist/cjs/components/NumberField/NumberField.js +10 -7
- package/dist/cjs/components/NumberField/NumberField.js.map +3 -3
- package/dist/cjs/components/NumberField/index.js +10 -7
- package/dist/cjs/components/NumberField/index.js.map +3 -3
- package/dist/cjs/components/PasswordField/PasswordField.js +9 -6
- package/dist/cjs/components/PasswordField/PasswordField.js.map +3 -3
- package/dist/cjs/components/PasswordField/index.js +9 -6
- package/dist/cjs/components/PasswordField/index.js.map +3 -3
- package/dist/cjs/components/Popover/Arrow.js +43 -0
- package/dist/cjs/components/Popover/Arrow.js.map +7 -0
- package/dist/cjs/components/Popover/Popover.js +258 -83
- package/dist/cjs/components/Popover/Popover.js.map +4 -4
- package/dist/cjs/components/Popover/index.js +258 -83
- package/dist/cjs/components/Popover/index.js.map +4 -4
- package/dist/cjs/components/Popover/useAutoUpdate.js +53 -0
- package/dist/cjs/components/Popover/useAutoUpdate.js.map +7 -0
- package/dist/cjs/components/Popover/useFloatingPosition.js +128 -0
- package/dist/cjs/components/Popover/useFloatingPosition.js.map +7 -0
- package/dist/cjs/components/Popover/useOutsidePress.js +46 -0
- package/dist/cjs/components/Popover/useOutsidePress.js.map +7 -0
- package/dist/cjs/components/TextField/TextField.js +6 -3
- package/dist/cjs/components/TextField/TextField.js.map +3 -3
- package/dist/cjs/components/TextField/adornmentWithClassName.js +3 -2
- package/dist/cjs/components/TextField/adornmentWithClassName.js.map +2 -2
- package/dist/cjs/components/TextField/index.js +6 -3
- package/dist/cjs/components/TextField/index.js.map +3 -3
- package/dist/cjs/components/index.js +550 -377
- package/dist/cjs/components/index.js.map +4 -4
- package/dist/cjs/index.js +550 -377
- package/dist/cjs/index.js.map +4 -4
- package/dist/cjs/meta.json +490 -121
- package/dist/esm/chunk-26KZYRE6.js +108 -0
- package/dist/esm/chunk-26KZYRE6.js.map +7 -0
- package/dist/esm/{chunk-XNEQHHNV.js → chunk-5QMKPWB4.js} +2 -2
- package/dist/esm/{chunk-IQKS662C.js → chunk-6RDK3FM2.js} +5 -3
- package/dist/esm/chunk-6RDK3FM2.js.map +7 -0
- package/dist/esm/{chunk-4HI2AOBC.js → chunk-6TSYA7CJ.js} +4 -7
- package/dist/esm/{chunk-4HI2AOBC.js.map → chunk-6TSYA7CJ.js.map} +2 -2
- package/dist/esm/chunk-CAL44W47.js +23 -0
- package/dist/esm/chunk-CAL44W47.js.map +7 -0
- package/dist/esm/{chunk-PEEQNAIN.js → chunk-DMYDWKKA.js} +4 -4
- package/dist/esm/{chunk-IM3I5CZL.js → chunk-I6CFRGID.js} +4 -3
- package/dist/esm/{chunk-IM3I5CZL.js.map → chunk-I6CFRGID.js.map} +2 -2
- package/dist/esm/chunk-K3ECDAUR.js +33 -0
- package/dist/esm/chunk-K3ECDAUR.js.map +7 -0
- package/dist/esm/{chunk-GJBH37DH.js → chunk-KFHPI67N.js} +4 -4
- package/dist/esm/{chunk-OEDU5ZEA.js → chunk-KUH5AB5T.js} +2 -2
- package/dist/esm/{chunk-JFDDW3IV.js → chunk-P7TPNRU4.js} +4 -8
- package/dist/esm/{chunk-JFDDW3IV.js.map → chunk-P7TPNRU4.js.map} +2 -2
- package/dist/esm/{chunk-F5ELD54X.js → chunk-QNOBB5HT.js} +2 -2
- package/dist/esm/{chunk-GV36OVX7.js → chunk-R67C5QTH.js} +2 -2
- package/dist/esm/{chunk-S4CU4XRB.js → chunk-VGFVSRWH.js} +2 -2
- package/dist/esm/chunk-VZ3IWSK6.js +158 -0
- package/dist/esm/chunk-VZ3IWSK6.js.map +7 -0
- package/dist/esm/{chunk-X4CMSAET.js → chunk-WSQWMVA2.js} +2 -2
- package/dist/esm/chunk-WYJP7HVL.js +26 -0
- package/dist/esm/chunk-WYJP7HVL.js.map +7 -0
- package/dist/esm/{chunk-OAG5T7NC.js → chunk-XEP6X7JU.js} +5 -5
- package/dist/esm/chunk-XEP6X7JU.js.map +7 -0
- package/dist/esm/components/AddressLookup/AddressLookup.js +6 -6
- package/dist/esm/components/AddressLookup/index.js +8 -8
- package/dist/esm/components/Breadcrumbs/Breadcrumbs.js +1 -1
- package/dist/esm/components/Breadcrumbs/index.js +3 -3
- package/dist/esm/components/Checkbox/index.js +1 -1
- package/dist/esm/components/Combobox/Combobox.js +5 -5
- package/dist/esm/components/Combobox/index.js +5 -5
- package/dist/esm/components/DateField/DateField.js +3 -3
- package/dist/esm/components/DateField/index.js +3 -3
- package/dist/esm/components/Drawer/index.js +3 -3
- package/dist/esm/components/DropdownMenu/Item.js +1 -1
- package/dist/esm/components/DropdownMenu/index.js +2 -2
- package/dist/esm/components/MaskedField/MaskedField.js +2 -2
- package/dist/esm/components/MaskedField/index.js +3 -3
- package/dist/esm/components/Modal/index.js +3 -3
- package/dist/esm/components/NumberField/NumberField.js +3 -3
- package/dist/esm/components/NumberField/index.js +3 -3
- package/dist/esm/components/PasswordField/PasswordField.js +3 -3
- package/dist/esm/components/PasswordField/index.js +3 -3
- package/dist/esm/components/Popover/Arrow.js +8 -0
- package/dist/esm/components/Popover/Arrow.js.map +7 -0
- package/dist/esm/components/Popover/Popover.js +5 -1
- package/dist/esm/components/Popover/index.js +5 -1
- package/dist/esm/components/Popover/useAutoUpdate.js +8 -0
- package/dist/esm/components/Popover/useAutoUpdate.js.map +7 -0
- package/dist/esm/components/Popover/useFloatingPosition.js +8 -0
- package/dist/esm/components/Popover/useFloatingPosition.js.map +7 -0
- package/dist/esm/components/Popover/useOutsidePress.js +8 -0
- package/dist/esm/components/Popover/useOutsidePress.js.map +7 -0
- package/dist/esm/components/TextField/TextField.js +2 -2
- package/dist/esm/components/TextField/adornmentWithClassName.js +1 -1
- package/dist/esm/components/TextField/index.js +2 -2
- package/dist/esm/components/index.js +81 -77
- package/dist/esm/index.js +81 -77
- package/dist/esm/meta.json +3495 -3149
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Accordion/Accordion.d.ts +4 -4
- package/dist/types/components/Accordion/AccordionList.d.ts +4 -4
- package/dist/types/components/AddressLookup/AddressLookup.d.ts +4 -4
- package/dist/types/components/AddressLookup/LoqateAddressLookupService.d.ts +1 -1
- package/dist/types/components/Alert/Alert.d.ts +4 -4
- package/dist/types/components/Box/Box.d.ts +4 -4
- package/dist/types/components/Breadcrumbs/BreadcrumbItem.d.ts +4 -4
- package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts +4 -4
- package/dist/types/components/Button/Button.d.ts +4 -4
- package/dist/types/components/Checkbox/Checkbox.d.ts +4 -4
- package/dist/types/components/Checkbox/CheckboxGroup.d.ts +4 -4
- package/dist/types/components/Combobox/Combobox.d.ts +2 -5
- package/dist/types/components/Combobox/useComboboxOptions.d.ts +1 -1
- package/dist/types/components/Container/Container.d.ts +4 -4
- package/dist/types/components/DateField/DateField.d.ts +4 -4
- package/dist/types/components/Divider/Divider.d.ts +4 -4
- package/dist/types/components/Drawer/Content.d.ts +4 -4
- package/dist/types/components/Drawer/Drawer.d.ts +4 -4
- package/dist/types/components/Drawer/Header.d.ts +4 -4
- package/dist/types/components/DropdownMenu/DropdownMenu.d.ts +4 -4
- package/dist/types/components/DropdownMenu/Item.d.ts +4 -4
- package/dist/types/components/ErrorMessage/ErrorMessage.d.ts +4 -4
- package/dist/types/components/ExpandableText/ExpandableText.d.ts +4 -4
- package/dist/types/components/Fieldset/Fieldset.d.ts +4 -4
- package/dist/types/components/Flex/Flex.d.ts +4 -4
- package/dist/types/components/Grid/Grid.d.ts +4 -4
- package/dist/types/components/Grid/Item.d.ts +4 -4
- package/dist/types/components/Image/Image.d.ts +4 -4
- package/dist/types/components/Label/Label.d.ts +4 -4
- package/dist/types/components/Link/Link.d.ts +4 -4
- package/dist/types/components/List/List.d.ts +4 -4
- package/dist/types/components/List/ListItem.d.ts +4 -4
- package/dist/types/components/LoadingIndicator/LoadingIndicator.d.ts +4 -4
- package/dist/types/components/Logo/Logo.d.ts +4 -4
- package/dist/types/components/MaskedField/MaskedField.d.ts +4 -4
- package/dist/types/components/Modal/Content.d.ts +4 -4
- package/dist/types/components/Modal/Header.d.ts +4 -4
- package/dist/types/components/Modal/Modal.d.ts +4 -4
- package/dist/types/components/NumberField/NumberField.d.ts +4 -4
- package/dist/types/components/Option/Option.d.ts +4 -4
- package/dist/types/components/PasswordField/PasswordField.d.ts +4 -4
- package/dist/types/components/Popover/Arrow.d.ts +9 -0
- package/dist/types/components/Popover/useAutoUpdate.d.ts +9 -0
- package/dist/types/components/Popover/useFloatingPosition.d.ts +17 -0
- package/dist/types/components/Popover/useOutsidePress.d.ts +9 -0
- package/dist/types/components/Progress/Progress.d.ts +4 -4
- package/dist/types/components/Radio/Radio.d.ts +4 -4
- package/dist/types/components/Radio/RadioGroup.d.ts +4 -4
- package/dist/types/components/SVG/SVG.d.ts +4 -4
- package/dist/types/components/Segment/Segment.d.ts +4 -4
- package/dist/types/components/Segment/SegmentGroup.d.ts +4 -4
- package/dist/types/components/Select/Select.d.ts +4 -4
- package/dist/types/components/Stack/Stack.d.ts +4 -4
- package/dist/types/components/Switch/Switch.d.ts +4 -4
- package/dist/types/components/Table/Body.d.ts +4 -4
- package/dist/types/components/Table/Cell.d.ts +4 -4
- package/dist/types/components/Table/Foot.d.ts +4 -4
- package/dist/types/components/Table/Head.d.ts +4 -4
- package/dist/types/components/Table/HeaderCell.d.ts +4 -4
- package/dist/types/components/Table/Row.d.ts +4 -4
- package/dist/types/components/Table/Table.d.ts +4 -4
- package/dist/types/components/Text/Text.d.ts +4 -4
- package/dist/types/components/TextArea/TextArea.d.ts +4 -4
- package/dist/types/components/TextAreaInput/TextAreaInput.d.ts +4 -4
- package/dist/types/components/TextField/TextField.d.ts +1 -4
- package/dist/types/components/TextField/adornmentWithClassName.d.ts +3 -1
- package/dist/types/components/TextOrHTML/TextOrHTML.d.ts +4 -4
- package/dist/types/components/Title/Title.d.ts +4 -4
- package/dist/types/components/Toast/ToastOptionsDoc.d.ts +4 -8
- package/dist/types/components/Toast/Toaster.d.ts +4 -4
- package/dist/types/hooks/useButton/useButton.d.ts +5 -5
- package/dist/types/hooks/useLabel/useLabel.d.ts +1 -1
- package/package.json +11 -11
- package/src/components/Box/Box.test.tsx +1 -2
- package/src/components/Breadcrumbs/Breadcrumbs.tsx +3 -7
- package/src/components/Button/Button.stories.tsx +1 -1
- package/src/components/Combobox/Combobox.tsx +2 -4
- package/src/components/DropdownMenu/DropdownMenu.stories.tsx +1 -1
- package/src/components/DropdownMenu/Item.tsx +3 -6
- package/src/components/Grid/Grid.stories.tsx +1 -1
- package/src/components/Popover/Arrow.tsx +25 -0
- package/src/components/Popover/Popover.characterization.test.tsx +269 -0
- package/src/components/Popover/Popover.stories.tsx +40 -3
- package/src/components/Popover/Popover.test.tsx +6 -2
- package/src/components/Popover/Popover.tsx +87 -81
- package/src/components/Popover/useAutoUpdate.ts +43 -0
- package/src/components/Popover/useFloatingPosition.ts +177 -0
- package/src/components/Popover/useOutsidePress.ts +31 -0
- package/src/components/TextField/TextField.tsx +3 -1
- package/src/components/TextField/adornmentWithClassName.ts +4 -3
- package/src/hooks/useBreakpoint/useBreakpoint.test.tsx +4 -4
- package/src/styles.d.ts +2 -0
- package/dist/esm/chunk-IQKS662C.js.map +0 -7
- package/dist/esm/chunk-O5YEU5TG.js +0 -155
- package/dist/esm/chunk-O5YEU5TG.js.map +0 -7
- package/dist/esm/chunk-OAG5T7NC.js.map +0 -7
- /package/dist/esm/{chunk-XNEQHHNV.js.map → chunk-5QMKPWB4.js.map} +0 -0
- /package/dist/esm/{chunk-PEEQNAIN.js.map → chunk-DMYDWKKA.js.map} +0 -0
- /package/dist/esm/{chunk-GJBH37DH.js.map → chunk-KFHPI67N.js.map} +0 -0
- /package/dist/esm/{chunk-OEDU5ZEA.js.map → chunk-KUH5AB5T.js.map} +0 -0
- /package/dist/esm/{chunk-F5ELD54X.js.map → chunk-QNOBB5HT.js.map} +0 -0
- /package/dist/esm/{chunk-GV36OVX7.js.map → chunk-R67C5QTH.js.map} +0 -0
- /package/dist/esm/{chunk-S4CU4XRB.js.map → chunk-VGFVSRWH.js.map} +0 -0
- /package/dist/esm/{chunk-X4CMSAET.js.map → chunk-WSQWMVA2.js.map} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/DropdownMenu/index.tsx", "../../../../src/components/DropdownMenu/DropdownMenu.tsx", "../../../../src/components/Button/Button.tsx", "../../../../src/components/Button/Loading.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/VisuallyHidden/VisuallyHidden.tsx", "../../../../src/hooks/useButton/useButton.tsx", "../../../../src/components/Button/Success.tsx", "../../../../src/components/DropdownMenu/Item.tsx"],
|
|
4
|
-
"sourcesContent": ["import { DropdownMenu as DropdownMenuComponent } from \"./DropdownMenu\";\nimport { Item } from \"./Item\";\n\nimport type {\n DropdownMenuElementType,\n DropdownMenuProps,\n DropdownMenuRef,\n} from \"./DropdownMenu\";\nimport type {\n ItemProps as DropdownMenuItemProps,\n ItemRef as DropdownMenuItemRef,\n ItemElementType as DropdownMenuItemElementType,\n} from \"./Item\";\n\nexport interface DropdownMenuCompound extends React.FC<DropdownMenuProps> {\n Item: React.FC<DropdownMenuItemProps>;\n}\n\nconst DropdownMenu: DropdownMenuCompound = Object.assign(\n DropdownMenuComponent,\n {\n Item,\n },\n);\n\nexport type {\n DropdownMenuElementType,\n DropdownMenuProps,\n DropdownMenuRef,\n DropdownMenuItemProps,\n DropdownMenuItemRef,\n DropdownMenuItemElementType,\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { Children, isValidElement, cloneElement, useState } from \"react\";\nimport useDropdownMenu from \"react-accessible-dropdown-menu-hook\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nimport { Button } from \"../Button\";\nimport \"./DropdownMenu.css\";\n\nexport type DropdownMenuElementType = HTMLElement;\n\nexport interface DropdownMenuProps\n extends DOMProps, RefAttributes<DropdownMenuElementType> {\n children?: ReactNode;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n label?: string;\n trigger?: ReactElement;\n}\n\nexport type DropdownMenuRef = Ref<DropdownMenuElementType>;\n\ntype ChildClickProps = {\n onClick?: () => void;\n};\n\nconst DropdownMenu = ({ ref, ...props }: DropdownMenuProps) => {\n const {\n elementType: Element = \"nav\",\n trigger,\n label = \"Menu\",\n children,\n ...otherProps\n } = props;\n const [activeId, setActiveId] = useState<number | null>(null);\n const numberOfItems = Children.count(children);\n const {\n buttonProps,\n itemProps,\n isOpen: open,\n setIsOpen,\n } = useDropdownMenu(numberOfItems);\n\n const classes = classNames(\n \"mobius\",\n \"mobius-dropdown-menu\",\n otherProps.className,\n );\n const triggerClasses = classNames(\"mobius\", \"mobius-dropdown-menu__trigger\");\n const listClasses = classNames(\"mobius\", \"mobius-dropdown-menu__list\", {\n \"--is-open\": open,\n });\n\n const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {\n setActiveId(index);\n setIsOpen(false);\n\n if (onClick) {\n onClick();\n }\n };\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {trigger ? (\n cloneElement(trigger, {\n className: triggerClasses,\n open,\n label,\n ...buttonProps,\n } as Record<string, unknown>)\n ) : (\n <Button className={triggerClasses} {...buttonProps}>\n {label}\n </Button>\n )}\n <ul className={listClasses} role=\"menu\">\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n // DropdownMenu items accept onClick and active props\n return cloneElement(child, {\n onClick: () =>\n handleChildClick(child.props as Record<string, unknown>, index),\n active: index === activeId,\n ...itemProps[index],\n } as {\n onClick?: () => void;\n active?: boolean;\n [key: string]: unknown;\n });\n }\n\n return child;\n })}\n </ul>\n </Element>\n );\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { MouseEvent, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Loading } from \"./Loading\";\nimport type { UseButtonProps } from \"../../hooks/useButton\";\nimport { useButton } from \"../../hooks/useButton\";\nimport { Success } from \"./Success\";\nimport \"./Button.css\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant = \"primary\" | \"secondary\" | \"ghost\" | \"basic\" | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {\n /** The name of the button when submitted in a form */\n name?: string | undefined;\n /** The value of the button when submitted in a form */\n value?: string | undefined;\n /** Custom class name for setting specific CSS */\n className?: string;\n /** Shortlist of styles */\n variant?: Variant;\n size?: Size;\n /** Display loading spinner */\n isLoading?: boolean;\n /** Display success style */\n isSuccess?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n children?: ReactNode;\n}\n\nconst Button = ({ ref, ...props }: ButtonProps) => {\n const {\n children,\n elementType: Component = \"button\" as React.ElementType,\n isDisabled,\n isLoading,\n isSuccess,\n variant = \"primary\",\n size = \"md\",\n\n onPress,\n\n onClick,\n ...otherProps\n } = props;\n const { buttonProps } = useButton(props);\n\n // Reshape class name and apply to outer element\n otherProps.className = classNames(\n \"mobius\",\n \"mobius-button\",\n `--variant-${variant}`,\n `--size-${size}`,\n {\n \"--is-disabled\": isDisabled,\n \"--is-loading\": isLoading,\n \"--is-success\": isSuccess && !isLoading,\n },\n otherProps.className,\n );\n\n return (\n <Component ref={ref} {...buttonProps} {...otherProps}>\n {isLoading ? <Loading>{children}</Loading> : children}\n {isSuccess && !isLoading && <Success />}\n </Component>\n );\n};\n\nButton.displayName = \"Button\";\nexport { Button };\n", "import type { ReactNode } from \"react\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\ntype LoadingProps = {\n children: ReactNode;\n};\n\nconst Loading = (props: LoadingProps) => {\n const { children } = props;\n\n return (\n <>\n <div className=\"mobius-button__icon-wrapper\">\n <Icon icon={loading} spin size=\"md\" />\n </div>\n <VisuallyHidden className=\"mobius-button__loading-text\">\n Loading\n </VisuallyHidden>\n {children}\n </>\n );\n};\n\nexport { Loading };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\n", "import type { AriaRole, JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n /** The content to visually hide. */\n children?: ReactNode;\n id?: string;\n role?: AriaRole;\n\n className?: string;\n\n /**\n * The element type for the container. Defaults to 'div'\n */\n elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n const {\n className,\n children,\n elementType: Component = \"div\",\n ...otherProps\n } = props;\n\n return (\n <Component\n className={className}\n style={{\n border: 0,\n clip: \"rect(0 0 0 0)\",\n clipPath: \"inset(50%)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: 0,\n position: \"absolute\",\n width: \"1px\",\n whiteSpace: \"nowrap\",\n }}\n {...otherProps}\n >\n {children}\n </Component>\n );\n}\n", "import type { JSXElementConstructor } from \"react\";\nimport { useCallback } from \"react\";\n\nexport interface UseButtonProps {\n elementType?:\n | \"button\"\n | \"a\"\n | \"span\"\n | \"input\"\n | JSXElementConstructor<unknown>\n | undefined;\n type?: \"button\" | \"submit\" | \"reset\";\n isDisabled?: boolean;\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n href?: string;\n target?: string;\n rel?: string;\n role?: string;\n name?: string | undefined;\n value?: string | undefined;\n}\n\nexport function useButton({\n elementType = \"button\",\n type = \"button\",\n isDisabled = false,\n href,\n target,\n rel,\n role,\n name,\n value,\n onClick,\n onPress,\n}: UseButtonProps) {\n const realOnClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n\n onClick?.(event);\n onPress?.(event);\n },\n [isDisabled, onClick, onPress],\n );\n\n function getRole() {\n if (role) {\n return role;\n }\n\n if (elementType === \"a\") {\n return undefined;\n }\n\n return \"button\";\n }\n\n const extraProps =\n elementType === \"button\"\n ? { type }\n : {\n role: getRole(),\n };\n\n return {\n buttonProps: {\n href: elementType === \"a\" ? href : undefined,\n target: elementType === \"a\" ? target : undefined,\n rel: elementType === \"a\" ? rel : undefined,\n tabIndex: isDisabled ? -1 : 0,\n disabled: isDisabled || undefined,\n \"aria-disabled\": isDisabled || undefined,\n name:\n elementType === \"input\" || elementType === \"button\" ? name : undefined,\n value:\n elementType === \"input\" || elementType === \"button\" ? value : undefined,\n ...extraProps,\n onClick: realOnClick,\n },\n };\n}\n", "import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n <>\n <div className=\"mobius-button__icon-wrapper\">\n <Icon icon={tick} size=\"md\" />\n </div>\n <VisuallyHidden className=\"mobius-button__success-text\">\n Success\n </VisuallyHidden>\n </>\n);\n\nexport { Success };\n", "import type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { cloneElement, isValidElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n elementType?: React.ElementType;\n /** Custom class name for setting specific CSS */\n className?: string;\n active?: boolean;\n children?: ReactNode;\n onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item = ({ ref, ...props }: ItemProps) => {\n const {\n elementType: Element = \"li\",\n active,\n onClick,\n children,\n ...otherProps\n } = props;\n const classes = classNames(\n \"mobius\",\n \"mobius-dropdown-menu__item\",\n { \"--is-active\": active },\n otherProps.className,\n );\n\n return (\n <Element ref={ref} onClick={onClick} {...otherProps}>\n {Children.map(children, child => {\n if (isValidElement(child)) {\n const childClasses = classNames(\n (child.props as { className?: string }).className,\n classes,\n );\n return cloneElement(\n child as ReactElement,\n {\n className: childClasses,\n } as { className: string },\n );\n }\n\n return <span className={classes}>{child}</span>;\n })}\n </Element>\n );\n};\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { DropdownMenu as DropdownMenuComponent } from \"./DropdownMenu\";\nimport { Item } from \"./Item\";\n\nimport type {\n DropdownMenuElementType,\n DropdownMenuProps,\n DropdownMenuRef,\n} from \"./DropdownMenu\";\nimport type {\n ItemProps as DropdownMenuItemProps,\n ItemRef as DropdownMenuItemRef,\n ItemElementType as DropdownMenuItemElementType,\n} from \"./Item\";\n\nexport interface DropdownMenuCompound extends React.FC<DropdownMenuProps> {\n Item: React.FC<DropdownMenuItemProps>;\n}\n\nconst DropdownMenu: DropdownMenuCompound = Object.assign(\n DropdownMenuComponent,\n {\n Item,\n },\n);\n\nexport type {\n DropdownMenuElementType,\n DropdownMenuProps,\n DropdownMenuRef,\n DropdownMenuItemProps,\n DropdownMenuItemRef,\n DropdownMenuItemElementType,\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { Children, isValidElement, cloneElement, useState } from \"react\";\nimport useDropdownMenu from \"react-accessible-dropdown-menu-hook\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nimport { Button } from \"../Button\";\nimport \"./DropdownMenu.css\";\n\nexport type DropdownMenuElementType = HTMLElement;\n\nexport interface DropdownMenuProps\n extends DOMProps, RefAttributes<DropdownMenuElementType> {\n children?: ReactNode;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n label?: string;\n trigger?: ReactElement;\n}\n\nexport type DropdownMenuRef = Ref<DropdownMenuElementType>;\n\ntype ChildClickProps = {\n onClick?: () => void;\n};\n\nconst DropdownMenu = ({ ref, ...props }: DropdownMenuProps) => {\n const {\n elementType: Element = \"nav\",\n trigger,\n label = \"Menu\",\n children,\n ...otherProps\n } = props;\n const [activeId, setActiveId] = useState<number | null>(null);\n const numberOfItems = Children.count(children);\n const {\n buttonProps,\n itemProps,\n isOpen: open,\n setIsOpen,\n } = useDropdownMenu(numberOfItems);\n\n const classes = classNames(\n \"mobius\",\n \"mobius-dropdown-menu\",\n otherProps.className,\n );\n const triggerClasses = classNames(\"mobius\", \"mobius-dropdown-menu__trigger\");\n const listClasses = classNames(\"mobius\", \"mobius-dropdown-menu__list\", {\n \"--is-open\": open,\n });\n\n const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {\n setActiveId(index);\n setIsOpen(false);\n\n if (onClick) {\n onClick();\n }\n };\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {trigger ? (\n cloneElement(trigger, {\n className: triggerClasses,\n open,\n label,\n ...buttonProps,\n } as Record<string, unknown>)\n ) : (\n <Button className={triggerClasses} {...buttonProps}>\n {label}\n </Button>\n )}\n <ul className={listClasses} role=\"menu\">\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n // DropdownMenu items accept onClick and active props\n return cloneElement(child, {\n onClick: () =>\n handleChildClick(child.props as Record<string, unknown>, index),\n active: index === activeId,\n ...itemProps[index],\n } as {\n onClick?: () => void;\n active?: boolean;\n [key: string]: unknown;\n });\n }\n\n return child;\n })}\n </ul>\n </Element>\n );\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { MouseEvent, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Loading } from \"./Loading\";\nimport type { UseButtonProps } from \"../../hooks/useButton\";\nimport { useButton } from \"../../hooks/useButton\";\nimport { Success } from \"./Success\";\nimport \"./Button.css\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant = \"primary\" | \"secondary\" | \"ghost\" | \"basic\" | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {\n /** The name of the button when submitted in a form */\n name?: string | undefined;\n /** The value of the button when submitted in a form */\n value?: string | undefined;\n /** Custom class name for setting specific CSS */\n className?: string;\n /** Shortlist of styles */\n variant?: Variant;\n size?: Size;\n /** Display loading spinner */\n isLoading?: boolean;\n /** Display success style */\n isSuccess?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n children?: ReactNode;\n}\n\nconst Button = ({ ref, ...props }: ButtonProps) => {\n const {\n children,\n elementType: Component = \"button\" as React.ElementType,\n isDisabled,\n isLoading,\n isSuccess,\n variant = \"primary\",\n size = \"md\",\n\n onPress,\n\n onClick,\n ...otherProps\n } = props;\n const { buttonProps } = useButton(props);\n\n // Reshape class name and apply to outer element\n otherProps.className = classNames(\n \"mobius\",\n \"mobius-button\",\n `--variant-${variant}`,\n `--size-${size}`,\n {\n \"--is-disabled\": isDisabled,\n \"--is-loading\": isLoading,\n \"--is-success\": isSuccess && !isLoading,\n },\n otherProps.className,\n );\n\n return (\n <Component ref={ref} {...buttonProps} {...otherProps}>\n {isLoading ? <Loading>{children}</Loading> : children}\n {isSuccess && !isLoading && <Success />}\n </Component>\n );\n};\n\nButton.displayName = \"Button\";\nexport { Button };\n", "import type { ReactNode } from \"react\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\ntype LoadingProps = {\n children: ReactNode;\n};\n\nconst Loading = (props: LoadingProps) => {\n const { children } = props;\n\n return (\n <>\n <div className=\"mobius-button__icon-wrapper\">\n <Icon icon={loading} spin size=\"md\" />\n </div>\n <VisuallyHidden className=\"mobius-button__loading-text\">\n Loading\n </VisuallyHidden>\n {children}\n </>\n );\n};\n\nexport { Loading };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\n", "import type { AriaRole, JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n /** The content to visually hide. */\n children?: ReactNode;\n id?: string;\n role?: AriaRole;\n\n className?: string;\n\n /**\n * The element type for the container. Defaults to 'div'\n */\n elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n const {\n className,\n children,\n elementType: Component = \"div\",\n ...otherProps\n } = props;\n\n return (\n <Component\n className={className}\n style={{\n border: 0,\n clip: \"rect(0 0 0 0)\",\n clipPath: \"inset(50%)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: 0,\n position: \"absolute\",\n width: \"1px\",\n whiteSpace: \"nowrap\",\n }}\n {...otherProps}\n >\n {children}\n </Component>\n );\n}\n", "import type { JSXElementConstructor } from \"react\";\nimport { useCallback } from \"react\";\n\nexport interface UseButtonProps {\n elementType?:\n | \"button\"\n | \"a\"\n | \"span\"\n | \"input\"\n | JSXElementConstructor<unknown>\n | undefined;\n type?: \"button\" | \"submit\" | \"reset\";\n isDisabled?: boolean;\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n href?: string;\n target?: string;\n rel?: string;\n role?: string;\n name?: string | undefined;\n value?: string | undefined;\n}\n\nexport function useButton({\n elementType = \"button\",\n type = \"button\",\n isDisabled = false,\n href,\n target,\n rel,\n role,\n name,\n value,\n onClick,\n onPress,\n}: UseButtonProps) {\n const realOnClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n\n onClick?.(event);\n onPress?.(event);\n },\n [isDisabled, onClick, onPress],\n );\n\n function getRole() {\n if (role) {\n return role;\n }\n\n if (elementType === \"a\") {\n return undefined;\n }\n\n return \"button\";\n }\n\n const extraProps =\n elementType === \"button\"\n ? { type }\n : {\n role: getRole(),\n };\n\n return {\n buttonProps: {\n href: elementType === \"a\" ? href : undefined,\n target: elementType === \"a\" ? target : undefined,\n rel: elementType === \"a\" ? rel : undefined,\n tabIndex: isDisabled ? -1 : 0,\n disabled: isDisabled || undefined,\n \"aria-disabled\": isDisabled || undefined,\n name:\n elementType === \"input\" || elementType === \"button\" ? name : undefined,\n value:\n elementType === \"input\" || elementType === \"button\" ? value : undefined,\n ...extraProps,\n onClick: realOnClick,\n },\n };\n}\n", "import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n <>\n <div className=\"mobius-button__icon-wrapper\">\n <Icon icon={tick} size=\"md\" />\n </div>\n <VisuallyHidden className=\"mobius-button__success-text\">\n Success\n </VisuallyHidden>\n </>\n);\n\nexport { Success };\n", "import type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { cloneElement, isValidElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n elementType?: React.ElementType;\n /** Custom class name for setting specific CSS */\n className?: string;\n active?: boolean;\n children?: ReactNode;\n onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item = ({ ref, ...props }: ItemProps) => {\n const {\n elementType: Element = \"li\",\n active,\n onClick,\n children,\n ...otherProps\n } = props;\n const classes = classNames(\n \"mobius\",\n \"mobius-dropdown-menu__item\",\n { \"--is-active\": active },\n otherProps.className,\n );\n\n return (\n <Element ref={ref} onClick={onClick} {...otherProps}>\n {Children.map(children, child => {\n if (isValidElement(child)) {\n const childClasses = classNames(\n (child.props as { className?: string }).className,\n classes,\n );\n return cloneElement(child as ReactElement<{ className?: string }>, {\n className: childClasses,\n });\n }\n\n return <span className={classes}>{child}</span>;\n })}\n </Element>\n );\n};\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["DropdownMenu", "import_react", "import_dedupe", "import_dedupe", "classNames", "import_jsx_runtime", "import_jsx_runtime", "import_icons", "import_jsx_runtime", "import_jsx_runtime", "classNames", "import_jsx_runtime", "useDropdownMenu", "classNames", "import_react", "import_dedupe", "import_jsx_runtime", "classNames", "DropdownMenu"]
|
|
7
7
|
}
|
|
@@ -34,11 +34,12 @@ __export(MaskedField_exports, {
|
|
|
34
34
|
MaskedField: () => MaskedField
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(MaskedField_exports);
|
|
37
|
-
var
|
|
37
|
+
var import_react6 = require("react");
|
|
38
38
|
var import_react_imask = require("react-imask");
|
|
39
39
|
|
|
40
40
|
// src/components/TextField/TextField.tsx
|
|
41
41
|
var import_dedupe8 = __toESM(require("classnames/dedupe"));
|
|
42
|
+
var import_react5 = require("react");
|
|
42
43
|
|
|
43
44
|
// src/utils/spaceDelimitedList.ts
|
|
44
45
|
function spaceDelimitedList(list) {
|
|
@@ -375,9 +376,10 @@ var import_dedupe7 = __toESM(require("classnames/dedupe"));
|
|
|
375
376
|
var import_react4 = require("react");
|
|
376
377
|
var adornmentWithClassName = (component, validationClasses, className) => {
|
|
377
378
|
if (!component) return null;
|
|
378
|
-
|
|
379
|
+
const typedComponent = component;
|
|
380
|
+
return (0, import_react4.cloneElement)(typedComponent, {
|
|
379
381
|
className: (0, import_dedupe7.default)(
|
|
380
|
-
|
|
382
|
+
typedComponent.props.className,
|
|
381
383
|
validationClasses,
|
|
382
384
|
className
|
|
383
385
|
)
|
|
@@ -387,7 +389,7 @@ var adornmentWithClassName = (component, validationClasses, className) => {
|
|
|
387
389
|
// src/components/TextField/TextField.tsx
|
|
388
390
|
var import_TextField = require("@simplybusiness/mobius/src/components/TextField/TextField.css");
|
|
389
391
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
390
|
-
var
|
|
392
|
+
var TextFieldInner = ({ ref, ...props }) => {
|
|
391
393
|
const {
|
|
392
394
|
isDisabled,
|
|
393
395
|
type = "text",
|
|
@@ -481,12 +483,13 @@ var TextField = ({ ref, ...props }) => {
|
|
|
481
483
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
|
|
482
484
|
] });
|
|
483
485
|
};
|
|
486
|
+
var TextField = (0, import_react5.memo)(TextFieldInner);
|
|
484
487
|
TextField.displayName = "TextField";
|
|
485
488
|
|
|
486
489
|
// src/components/MaskedField/MaskedField.tsx
|
|
487
490
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
488
491
|
var useAcceptHandler = (onChange, useMaskedValue, name) => {
|
|
489
|
-
return (0,
|
|
492
|
+
return (0, import_react6.useCallback)(
|
|
490
493
|
(maskedValue, maskInstance) => {
|
|
491
494
|
if (!onChange) {
|
|
492
495
|
return;
|
|
@@ -502,7 +505,7 @@ var useAcceptHandler = (onChange, useMaskedValue, name) => {
|
|
|
502
505
|
);
|
|
503
506
|
};
|
|
504
507
|
var useCombinedRef = (imaskRef, forwardedRef) => {
|
|
505
|
-
return (0,
|
|
508
|
+
return (0, import_react6.useCallback)(
|
|
506
509
|
(element) => {
|
|
507
510
|
imaskRef.current = element;
|
|
508
511
|
if (typeof forwardedRef === "function") {
|
|
@@ -515,7 +518,7 @@ var useCombinedRef = (imaskRef, forwardedRef) => {
|
|
|
515
518
|
);
|
|
516
519
|
};
|
|
517
520
|
var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
|
|
518
|
-
return (0,
|
|
521
|
+
return (0, import_react6.useCallback)(
|
|
519
522
|
(event) => {
|
|
520
523
|
if (!onBlur || !maskRef.current) {
|
|
521
524
|
return;
|
|
@@ -545,7 +548,7 @@ var ControlledMaskedField = ({
|
|
|
545
548
|
const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
|
|
546
549
|
const combinedRef = useCombinedRef(imaskRef, forwardedRef);
|
|
547
550
|
const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
|
|
548
|
-
(0,
|
|
551
|
+
(0, import_react6.useEffect)(() => {
|
|
549
552
|
if (!maskRef.current) {
|
|
550
553
|
return;
|
|
551
554
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/MaskedField/MaskedField.tsx", "../../../../src/components/TextField/TextField.tsx", "../../../../src/utils/spaceDelimitedList.ts", "../../../../src/hooks/useLabel/useLabel.tsx", "../../../../src/hooks/useTextField/useTextField.tsx", "../../../../src/hooks/useValidationClasses/useValidationClasses.ts", "../../../../src/components/ErrorMessage/ErrorMessage.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx", "../../../../src/components/Label/Label.tsx", "../../../../src/components/Stack/Stack.tsx", "../../../../src/components/TextField/adornmentWithClassName.ts"],
|
|
4
|
-
"sourcesContent": ["\"use client\";\n\nimport type { ChangeEvent, FocusEvent, Ref, RefAttributes } from \"react\";\nimport { useCallback, useEffect } from \"react\";\nimport { useIMask } from \"react-imask\";\nimport type { FactoryOpts, InputMask, InputMaskElement } from \"imask\";\nimport type { TextFieldProps } from \"../TextField\";\nimport { TextField } from \"../TextField\";\n\nexport type MaskedFieldElementType = HTMLInputElement;\n\nexport interface MaskedFieldProps\n extends\n Omit<TextFieldProps, \"type\" | \"ref\">,\n RefAttributes<MaskedFieldElementType> {\n mask: FactoryOpts;\n \"data-testid\"?: string;\n /**\n * If true, onChange and onBlur events will emit the masked (formatted) value.\n * If false (default), events will emit the unmasked (raw) value.\n *\n * @example\n * // TelephoneQuestion uses useMaskedValue={true}\n * // User types: 5551234567\n * // onChange receives: \"(555) 123-4567\" (formatted for display/storage)\n *\n * @example\n * // CurrencyQuestion uses useMaskedValue={false}\n * // User types: 1234\n * // User sees: \"1,234\" (with thousands separator)\n * // onChange receives: \"1234\" (raw number for calculations)\n */\n useMaskedValue?: boolean;\n}\n\nexport type MaskedFieldRef = Ref<MaskedFieldElementType>;\n\n/**\n * Creates an onChange handler for IMask's onAccept callback.\n *\n * IMask calls onAccept every time the user types and the mask accepts the input.\n * This handler converts IMask's callback into a standard React onChange event.\n *\n * @param onChange - The onChange handler from parent component\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion (US) - useMaskedValue=true\n * // User types: \"5551234567\"\n * // Emits: \"(555) 123-4567\" (formatted for display)\n * // Use case: Want to store/display the formatted phone number\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // User types: \"1234.56\"\n * // User sees: \"1,234.56\" (with formatting)\n * // Emits: \"1234.56\" (raw value for calculations)\n * // Use case: Need numeric value for backend/calculations\n */\nconst useAcceptHandler = (\n onChange: MaskedFieldProps[\"onChange\"],\n useMaskedValue: boolean,\n name?: string,\n) => {\n return useCallback(\n (maskedValue: string, maskInstance: InputMask<FactoryOpts>) => {\n // Exit early if no onChange handler provided\n if (!onChange) {\n return;\n }\n\n // IMask provides two values:\n // 1. maskedValue: The formatted value user sees (e.g., \"(555) 123-4567\")\n // 2. maskInstance.unmaskedValue: The raw value without formatting (e.g., \"5551234567\")\n const formattedValue = maskedValue;\n const rawValue = maskInstance.unmaskedValue;\n\n // Choose which value to emit based on useMaskedValue prop\n const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n // Create a synthetic React event that matches the standard onChange signature\n // This allows parent components to handle it like any other input change\n onChange({\n target: { name, value: valueToEmit },\n } as ChangeEvent<HTMLInputElement>);\n },\n [onChange, useMaskedValue, name],\n );\n};\n\n/**\n * Creates a ref callback that forwards the input element to both IMask and the parent component.\n *\n * React allows two ways to pass refs:\n * 1. Ref callback function: (element) => { ... }\n * 2. Ref object: { current: element }\n *\n * This hook handles both cases and also ensures IMask gets the element reference it needs.\n *\n * @param imaskRef - IMask's ref (needs the element to apply masking)\n * @param forwardedRef - Parent component's ref (could be function or object)\n *\n * @example\n * // Parent uses callback ref\n * <MaskedField ref={(el) => console.log(el)} />\n *\n * @example\n * // Parent uses useRef\n * const inputRef = useRef(null);\n * <MaskedField ref={inputRef} />\n */\nconst useCombinedRef = (\n imaskRef: React.MutableRefObject<InputMaskElement | null>,\n forwardedRef?: MaskedFieldRef,\n) => {\n return useCallback(\n (element: HTMLInputElement | null) => {\n // First, give the element to IMask so it can apply masking\n imaskRef.current = element;\n\n // Then forward the element to the parent component's ref\n // Handle both callback refs and ref objects\n\n // Case 1: Parent passed a callback ref function\n if (typeof forwardedRef === \"function\") {\n forwardedRef(element);\n }\n // Case 2: Parent passed a ref object (from useRef)\n else if (forwardedRef) {\n forwardedRef.current = element;\n }\n // Case 3: No ref was forwarded (forwardedRef is null/undefined)\n // Do nothing - this is fine\n },\n [imaskRef, forwardedRef],\n );\n};\n\n/**\n * Creates an onBlur handler that extracts the correct value from IMask.\n *\n * When the user tabs away or clicks outside the input, we need to emit\n * the current value (either formatted or raw) via the onBlur event.\n *\n * @param onBlur - The onBlur handler from parent component\n * @param maskRef - Reference to the IMask instance (provides current values)\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion - useMaskedValue=true\n * // Input displays: \"(555) 123-4567\"\n * // onBlur emits: \"(555) 123-4567\" (formatted)\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // Input displays: \"$1,234.56\"\n * // onBlur emits: \"1234.56\" (raw for validation/submission)\n */\nconst useBlurHandler = (\n onBlur: MaskedFieldProps[\"onBlur\"],\n maskRef: React.MutableRefObject<InputMask<FactoryOpts> | null>,\n useMaskedValue: boolean,\n name?: string,\n) => {\n return useCallback(\n (event: FocusEvent<Element>) => {\n // Exit early if no onBlur handler provided or mask isn't initialized\n if (!onBlur || !maskRef.current) {\n return;\n }\n\n // Extract current values from the IMask instance\n // maskRef.current.value: The formatted value (e.g., \"(555) 123-4567\")\n // maskRef.current.unmaskedValue: The raw value (e.g., \"5551234567\")\n const formattedValue = maskRef.current.value;\n const rawValue = maskRef.current.unmaskedValue;\n\n // Choose which value to emit based on useMaskedValue prop\n const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n // Create an enhanced event that preserves the original event properties\n // but overrides the target to include our extracted value\n onBlur({\n ...event,\n target: { ...event.target, name, value: valueToEmit },\n } as FocusEvent<Element>);\n },\n [onBlur, maskRef, useMaskedValue, name],\n );\n};\n\n/**\n * Controlled MaskedField - for use with value prop.\n * Syncs external value changes to IMask via useEffect.\n *\n * Use this when:\n * - The parent component manages the input state\n * - You need to programmatically update the value\n * - You need validation or transformation on every change\n */\nconst ControlledMaskedField = ({\n mask,\n useMaskedValue = false,\n value,\n onChange,\n onBlur,\n name,\n forwardedRef,\n ...textFieldProps\n}: Omit<MaskedFieldProps, \"defaultValue\"> & {\n value: string | number;\n forwardedRef?: MaskedFieldRef;\n}) => {\n const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });\n\n const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n // Sync external value changes to IMask\n useEffect(() => {\n if (!maskRef.current) {\n return;\n }\n\n const stringValue = value.toString();\n const currentMasked = maskRef.current.value;\n const currentUnmasked = maskRef.current.unmaskedValue;\n\n // Only update if value actually changed (prevents infinite loops)\n if (currentMasked !== stringValue && currentUnmasked !== stringValue) {\n setValue(stringValue);\n }\n }, [value, maskRef, setValue, imaskRef]);\n\n return (\n <TextField\n {...textFieldProps}\n ref={combinedRef}\n name={name}\n onBlur={handleBlur}\n />\n );\n};\n\n/**\n * Uncontrolled MaskedField - for use with defaultValue prop.\n * No value synchronization needed - IMask manages the value internally.\n *\n * Use this when:\n * - You only need the final value on submit\n * - You don't need to react to intermediate changes\n * - You want simpler code without state management\n */\nconst UncontrolledMaskedField = ({\n mask,\n useMaskedValue = false,\n defaultValue,\n onChange,\n onBlur,\n name,\n forwardedRef,\n ...textFieldProps\n}: Omit<MaskedFieldProps, \"value\"> & {\n defaultValue?: string | number;\n forwardedRef?: MaskedFieldRef;\n}) => {\n const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });\n\n const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n return (\n <TextField\n {...textFieldProps}\n ref={combinedRef}\n name={name}\n onBlur={handleBlur}\n defaultValue={defaultValue?.toString()}\n />\n );\n};\n\nconst MaskedField = ({ ref: forwardedRef, ...props }: MaskedFieldProps) => {\n const { value, defaultValue, ...rest } = props;\n\n // Check for \"value\" in props (not `value !== undefined`) to maintain consistent\n // controlled/uncontrolled state throughout component lifetime and prevent focus loss.\n // Example: CurrencyQuestion passes value={undefined} initially, then value={5} after typing.\n if (\"value\" in props) {\n return (\n <ControlledMaskedField\n {...rest}\n value={value ?? \"\"}\n forwardedRef={forwardedRef}\n />\n );\n } else {\n return (\n <UncontrolledMaskedField\n {...rest}\n defaultValue={defaultValue}\n forwardedRef={forwardedRef}\n />\n );\n }\n};\n\nMaskedField.displayName = \"MaskedField\";\n\nexport { MaskedField };\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type {\n HTMLInputTypeAttribute,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps, FocusEvents } from \"../../types\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\nimport \"./TextField.css\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n extends\n DOMProps,\n FocusEvents,\n UseTextFieldProps,\n RefAttributes<TextFieldElementType> {\n className?: string;\n errorMessage?: string;\n children?: ReactNode;\n label?: string;\n type?: Exclude<\n HTMLInputTypeAttribute,\n | \"button\"\n | \"checkbox\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"file\"\n | \"image\"\n | \"month\"\n | \"radio\"\n | \"range\"\n | \"reset\"\n | \"submit\"\n | \"week\"\n >;\n prefixInside?: ReactElement;\n prefixOutside?: ReactElement;\n suffixInside?: ReactElement;\n suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField = ({ ref, ...props }: TextFieldProps) => {\n const {\n isDisabled,\n type = \"text\",\n isInvalid,\n className,\n label,\n errorMessage,\n children,\n isRequired,\n prefixInside,\n prefixOutside,\n suffixInside,\n suffixOutside,\n autoComplete,\n isReadOnly,\n ...otherProps\n } = props;\n\n const resolvedAutoComplete =\n autoComplete ??\n (type === \"email\" ? \"email\" : type === \"tel\" ? \"tel\" : undefined);\n\n const { inputProps, labelProps, errorMessageProps } = useTextField({\n ...props,\n autoComplete: resolvedAutoComplete,\n \"aria-errormessage\": errorMessage,\n });\n\n const hidden = type === \"hidden\";\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const textfieldClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n \"--is-hidden\": hidden,\n [className || \"\"]: true,\n };\n\n const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n const labelClasses = classNames(\n {\n \"--is-disabled\": isDisabled,\n },\n validationClasses,\n );\n\n const containerClasses = classNames(\n \"mobius\",\n \"mobius-text-field\",\n sharedClasses,\n );\n\n const inputClasses = classNames(\n \"mobius\",\n \"mobius-text-field__input\",\n sharedClasses,\n );\n\n const inputWrapperClasses = classNames(\n \"mobius-text-field__input-wrapper\",\n sharedClasses,\n );\n\n return (\n <Stack gap=\"xs\" className={containerClasses}>\n {label && !hidden && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className=\"mobius-text-field__inner-container\">\n {adornmentWithClassName(\n prefixOutside,\n labelClasses,\n \"mobius-text-field__prefix-outside\",\n )}\n <div className={inputWrapperClasses}>\n {adornmentWithClassName(\n prefixInside,\n labelClasses,\n \"mobius-text-field__prefix-inside\",\n )}\n <input\n {...otherProps}\n {...inputProps}\n ref={ref}\n type={type}\n className={inputClasses}\n />\n {adornmentWithClassName(\n suffixInside,\n labelClasses,\n \"mobius-text-field__suffix-inside\",\n )}\n </div>\n {adornmentWithClassName(\n suffixOutside,\n labelClasses,\n \"mobius-text-field__suffix-outside\",\n )}\n </div>\n {children && (\n <div className=\"mobius-text-field__children\">{children}</div>\n )}\n\n <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n </Stack>\n );\n};\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n", "export function spaceDelimitedList(\n list: (string | null | undefined)[],\n): string | undefined {\n return list.filter(Boolean).join(\" \") || undefined;\n}\n", "import type { LabelHTMLAttributes } from \"react\";\nimport { useId, useRef } from \"react\";\n\nexport type UseLabelProps = {\n id?: string | undefined;\n label?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n labelElementType?: \"label\" | \"span\" | undefined;\n};\n\nexport type UseLabelReturn = {\n labelProps: {\n id?: string | undefined;\n } & LabelHTMLAttributes<HTMLLabelElement>;\n fieldProps: LabellingProps;\n};\n\nexport type LabellingProps = {\n id?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n \"aria-describedby\"?: string | undefined;\n \"aria-details\"?: string | undefined;\n};\n\nexport function useLabel({\n id: providedId,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n labelElementType = \"label\",\n}: UseLabelProps) {\n let labelProps: UseLabelReturn[\"labelProps\"] = {};\n let fieldProps: UseLabelReturn[\"fieldProps\"] = {};\n\n const hasWarnedAboutMissingLabels = useRef(false);\n\n const fallbackId = useId();\n const id = providedId || fallbackId;\n const labelId = useId();\n\n if (label) {\n ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n labelProps = {\n id: labelId,\n htmlFor: labelElementType === \"label\" ? id : undefined,\n };\n } else if (\n !ariaLabelledby &&\n !ariaLabel &&\n !hasWarnedAboutMissingLabels.current\n ) {\n hasWarnedAboutMissingLabels.current = true;\n console.warn(\n \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n );\n }\n\n fieldProps = {\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n };\n\n return {\n labelProps,\n fieldProps,\n };\n}\n", "import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport type { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n const {\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n inputElementType = \"input\",\n } = props;\n const { labelProps, fieldProps } = useLabel(props);\n\n const descriptionId = useId();\n const descriptionProps = { id: descriptionId };\n\n const errorMessageId = useId();\n const errorMessageProps = { id: errorMessageId };\n\n const ariaDescribedBy = spaceDelimitedList([\n props.description && descriptionId,\n props.errorMessage && errorMessageId,\n props[\"aria-describedby\"],\n ]);\n\n return {\n descriptionProps,\n errorMessageProps,\n labelProps,\n inputProps: {\n defaultValue: props.defaultValue,\n value: props.value,\n onChange: props.onChange,\n disabled: isDisabled,\n readOnly: isReadOnly,\n required: isRequired,\n \"aria-required\": isRequired === true ? true : undefined,\n \"aria-invalid\": props.isInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": props[\"aria-errormessage\"],\n role: props.role,\n\n type: inputElementType === \"input\" ? props.type : undefined,\n pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n autoComplete: props.autoComplete,\n maxLength: props.maxLength,\n minLength: props.minLength,\n name: props.name,\n placeholder: props.placeholder,\n inputMode: props.inputMode,\n\n // Clipboard events\n onCopy: props.onCopy,\n onCut: props.onCut,\n onPaste: props.onPaste,\n\n // Composition events\n onCompositionEnd: props.onCompositionEnd,\n onCompositionStart: props.onCompositionStart,\n onCompositionUpdate: props.onCompositionUpdate,\n\n // Selection events\n onSelect: props.onSelect,\n\n // Input events\n onBeforeInput: props.onBeforeInput,\n onInput: props.onInput,\n\n // Focus events\n onFocus: props.onFocus,\n onBlur: props.onBlur,\n\n ...fieldProps,\n },\n };\n}\n", "import type { Validation } from \"../../types\";\n\nexport type GetValidationClassesProps = Pick<Validation, \"isInvalid\">;\n\nexport const useValidationClasses = (props: GetValidationClassesProps) => {\n const { isInvalid } = props;\n\n if (isInvalid) {\n return \"--is-invalid\";\n }\n\n if (isInvalid === false) {\n return \"--is-valid\";\n }\n\n return \"\";\n};\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\n", "import classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text, getElementType } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\n// Block-level tags that cannot be nested inside <p>.\nconst BLOCK_TAG =\n /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\\s>/]/i;\nconst containsBlockHTML = (text: string) => BLOCK_TAG.test(text);\nconst containsHTML = (text: string) =>\n /<[a-z/]/i.test(text) || /&(?:#\\d+|#x[\\da-f]+|[a-z]\\w*);/i.test(text); // tag or entity\n\nconst buildTextClasses = (\n textProps: Omit<TextProps, \"children\">,\n htmlClassName?: string,\n) => {\n const { variant, elementType, spacing, className } = textProps;\n const variantType = variant || getElementType(variant, elementType);\n return classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n htmlClassName,\n );\n};\n\nexport interface TextOrHTMLProps\n extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n /** HTML string to be rendered with dangerouslySetInnerHTML */\n text: string;\n /** Custom class name for the dangerous HTML element */\n htmlClassName?: string;\n /** HTML element type for the dangerous HTML element */\n htmlElementType?: HTMLElementType;\n /** If true, wraps the dangerous HTML element inside a Text component */\n textWrapper?: boolean;\n /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n ref,\n text,\n htmlClassName,\n htmlElementType,\n textWrapper = false,\n autoDetect = false,\n ...textProps\n}: TextOrHTMLProps) => {\n const hasBlockContent = autoDetect && containsBlockHTML(text);\n\n // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n // See: https://github.com/facebook/react/issues/31660\n const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n // Non-block text with autoDetect: render directly on a Text-equivalent element,\n // avoiding unnecessary <span> nesting inside <p>.\n if (autoDetect && !hasBlockContent) {\n const { variant, spacing, elementType, className, ...domProps } = textProps;\n const Element = getElementType(variant, elementType);\n const classes = buildTextClasses(textProps, htmlClassName);\n\n return containsHTML(text) ? (\n <Element\n ref={ref}\n {...domProps}\n className={classes}\n dangerouslySetInnerHTML={dangerousHTML}\n />\n ) : (\n <Element ref={ref} {...domProps} className={classes}>\n {text}\n </Element>\n );\n }\n\n const DangerousComponent =\n htmlElementType ?? (hasBlockContent ? \"div\" : \"span\");\n const dangerousElement = (\n <DangerousComponent\n className={htmlClassName}\n dangerouslySetInnerHTML={dangerousHTML}\n />\n );\n\n if (textWrapper) {\n return (\n <Text ref={ref} {...textProps}>\n {dangerousElement}\n </Text>\n );\n }\n\n return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"body\"\n | \"small\"\n | \"legal\"\n | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n /** HTML element for the text */\n elementType?: ElementType;\n /** Specify font size override */\n variant?: TextVariantType;\n /** Specify compact line height override */\n spacing?: \"loose\" | \"tight\";\n /** Custom class name for setting specific CSS */\n className?: string;\n children: ReactNode;\n style?: React.CSSProperties;\n}\n\nexport const getElementType = (\n variant: TextVariantType | undefined,\n elementType: ElementType | undefined,\n): ElementType => {\n // Explicit elementType always wins\n if (elementType) {\n return elementType;\n }\n // Infer element from variant\n if (variant && [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant)) {\n return variant as ElementType;\n }\n return \"p\";\n};\n\nconst Text = ({ ref, elementType, ...props }: TextProps) => {\n // Remove non-DOM props from element\n const { variant, className, spacing, ...otherProps } = props;\n\n // If a variant is supplied, set the class name and element type\n const Element: ElementType = getElementType(variant, elementType);\n const variantType = variant || Element;\n const classes = classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n", "import type React from \"react\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Label.css\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n React.JSX.IntrinsicElements[\"label\"],\n \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {\n children?: ReactNode;\n className?: string;\n elementType?: \"label\" | \"span\";\n}\n\nconst Label = ({ ref, ...props }: LabelProps) => {\n const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n otherProps.className = classes;\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {children}\n </Element>\n );\n};\n\nLabel.displayName = \"Label\";\nexport { Label };\n", "import type { Ref, RefAttributes, ReactNode } from \"react\";\nimport type React from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SpacingType } from \"../../types\";\nimport \"./Stack.css\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n children?: ReactNode;\n /** How big a gap between items */\n gap?: SpacingType;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack = ({ ref, ...props }: StackProps) => {\n const { elementType: Element = \"div\", gap, ...otherProps } = props;\n\n const classes = classNames(\n \"mobius\",\n \"mobius-stack\",\n {\n [`--gap-${gap}`]: gap,\n },\n otherProps.className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nStack.displayName = \"Stack\";\n", "import classNames from \"classnames/dedupe\";\nimport type { ReactElement } from \"react\";\nimport { cloneElement } from \"react\";\n\nexport const adornmentWithClassName = (\n component?: ReactElement,\n validationClasses?: string,\n className?: string,\n) => {\n if (!component) return null;\n\n return cloneElement(component, {\n className: classNames(\n (component.props as { className?: string }).className,\n validationClasses,\n className,\n ),\n } as { className: string });\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["import_react", "import_dedupe", "import_react", "import_dedupe", "classNames", "import_dedupe", "import_react", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_react", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime"]
|
|
4
|
+
"sourcesContent": ["\"use client\";\n\nimport type { ChangeEvent, FocusEvent, Ref, RefAttributes } from \"react\";\nimport { useCallback, useEffect } from \"react\";\nimport { useIMask } from \"react-imask\";\nimport type { FactoryOpts, InputMask, InputMaskElement } from \"imask\";\nimport type { TextFieldProps } from \"../TextField\";\nimport { TextField } from \"../TextField\";\n\nexport type MaskedFieldElementType = HTMLInputElement;\n\nexport interface MaskedFieldProps\n extends\n Omit<TextFieldProps, \"type\" | \"ref\">,\n RefAttributes<MaskedFieldElementType> {\n mask: FactoryOpts;\n \"data-testid\"?: string;\n /**\n * If true, onChange and onBlur events will emit the masked (formatted) value.\n * If false (default), events will emit the unmasked (raw) value.\n *\n * @example\n * // TelephoneQuestion uses useMaskedValue={true}\n * // User types: 5551234567\n * // onChange receives: \"(555) 123-4567\" (formatted for display/storage)\n *\n * @example\n * // CurrencyQuestion uses useMaskedValue={false}\n * // User types: 1234\n * // User sees: \"1,234\" (with thousands separator)\n * // onChange receives: \"1234\" (raw number for calculations)\n */\n useMaskedValue?: boolean;\n}\n\nexport type MaskedFieldRef = Ref<MaskedFieldElementType>;\n\n/**\n * Creates an onChange handler for IMask's onAccept callback.\n *\n * IMask calls onAccept every time the user types and the mask accepts the input.\n * This handler converts IMask's callback into a standard React onChange event.\n *\n * @param onChange - The onChange handler from parent component\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion (US) - useMaskedValue=true\n * // User types: \"5551234567\"\n * // Emits: \"(555) 123-4567\" (formatted for display)\n * // Use case: Want to store/display the formatted phone number\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // User types: \"1234.56\"\n * // User sees: \"1,234.56\" (with formatting)\n * // Emits: \"1234.56\" (raw value for calculations)\n * // Use case: Need numeric value for backend/calculations\n */\nconst useAcceptHandler = (\n onChange: MaskedFieldProps[\"onChange\"],\n useMaskedValue: boolean,\n name?: string,\n) => {\n return useCallback(\n (maskedValue: string, maskInstance: InputMask<FactoryOpts>) => {\n // Exit early if no onChange handler provided\n if (!onChange) {\n return;\n }\n\n // IMask provides two values:\n // 1. maskedValue: The formatted value user sees (e.g., \"(555) 123-4567\")\n // 2. maskInstance.unmaskedValue: The raw value without formatting (e.g., \"5551234567\")\n const formattedValue = maskedValue;\n const rawValue = maskInstance.unmaskedValue;\n\n // Choose which value to emit based on useMaskedValue prop\n const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n // Create a synthetic React event that matches the standard onChange signature\n // This allows parent components to handle it like any other input change\n onChange({\n target: { name, value: valueToEmit },\n } as ChangeEvent<HTMLInputElement>);\n },\n [onChange, useMaskedValue, name],\n );\n};\n\n/**\n * Creates a ref callback that forwards the input element to both IMask and the parent component.\n *\n * React allows two ways to pass refs:\n * 1. Ref callback function: (element) => { ... }\n * 2. Ref object: { current: element }\n *\n * This hook handles both cases and also ensures IMask gets the element reference it needs.\n *\n * @param imaskRef - IMask's ref (needs the element to apply masking)\n * @param forwardedRef - Parent component's ref (could be function or object)\n *\n * @example\n * // Parent uses callback ref\n * <MaskedField ref={(el) => console.log(el)} />\n *\n * @example\n * // Parent uses useRef\n * const inputRef = useRef(null);\n * <MaskedField ref={inputRef} />\n */\nconst useCombinedRef = (\n imaskRef: React.MutableRefObject<InputMaskElement | null>,\n forwardedRef?: MaskedFieldRef,\n) => {\n return useCallback(\n (element: HTMLInputElement | null) => {\n // First, give the element to IMask so it can apply masking\n imaskRef.current = element;\n\n // Then forward the element to the parent component's ref\n // Handle both callback refs and ref objects\n\n // Case 1: Parent passed a callback ref function\n if (typeof forwardedRef === \"function\") {\n forwardedRef(element);\n }\n // Case 2: Parent passed a ref object (from useRef)\n else if (forwardedRef) {\n forwardedRef.current = element;\n }\n // Case 3: No ref was forwarded (forwardedRef is null/undefined)\n // Do nothing - this is fine\n },\n [imaskRef, forwardedRef],\n );\n};\n\n/**\n * Creates an onBlur handler that extracts the correct value from IMask.\n *\n * When the user tabs away or clicks outside the input, we need to emit\n * the current value (either formatted or raw) via the onBlur event.\n *\n * @param onBlur - The onBlur handler from parent component\n * @param maskRef - Reference to the IMask instance (provides current values)\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion - useMaskedValue=true\n * // Input displays: \"(555) 123-4567\"\n * // onBlur emits: \"(555) 123-4567\" (formatted)\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // Input displays: \"$1,234.56\"\n * // onBlur emits: \"1234.56\" (raw for validation/submission)\n */\nconst useBlurHandler = (\n onBlur: MaskedFieldProps[\"onBlur\"],\n maskRef: React.MutableRefObject<InputMask<FactoryOpts> | null>,\n useMaskedValue: boolean,\n name?: string,\n) => {\n return useCallback(\n (event: FocusEvent<Element>) => {\n // Exit early if no onBlur handler provided or mask isn't initialized\n if (!onBlur || !maskRef.current) {\n return;\n }\n\n // Extract current values from the IMask instance\n // maskRef.current.value: The formatted value (e.g., \"(555) 123-4567\")\n // maskRef.current.unmaskedValue: The raw value (e.g., \"5551234567\")\n const formattedValue = maskRef.current.value;\n const rawValue = maskRef.current.unmaskedValue;\n\n // Choose which value to emit based on useMaskedValue prop\n const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n // Create an enhanced event that preserves the original event properties\n // but overrides the target to include our extracted value\n onBlur({\n ...event,\n target: { ...event.target, name, value: valueToEmit },\n } as FocusEvent<Element>);\n },\n [onBlur, maskRef, useMaskedValue, name],\n );\n};\n\n/**\n * Controlled MaskedField - for use with value prop.\n * Syncs external value changes to IMask via useEffect.\n *\n * Use this when:\n * - The parent component manages the input state\n * - You need to programmatically update the value\n * - You need validation or transformation on every change\n */\nconst ControlledMaskedField = ({\n mask,\n useMaskedValue = false,\n value,\n onChange,\n onBlur,\n name,\n forwardedRef,\n ...textFieldProps\n}: Omit<MaskedFieldProps, \"defaultValue\"> & {\n value: string | number;\n forwardedRef?: MaskedFieldRef;\n}) => {\n const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });\n\n const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n // Sync external value changes to IMask\n useEffect(() => {\n if (!maskRef.current) {\n return;\n }\n\n const stringValue = value.toString();\n const currentMasked = maskRef.current.value;\n const currentUnmasked = maskRef.current.unmaskedValue;\n\n // Only update if value actually changed (prevents infinite loops)\n if (currentMasked !== stringValue && currentUnmasked !== stringValue) {\n setValue(stringValue);\n }\n }, [value, maskRef, setValue, imaskRef]);\n\n return (\n <TextField\n {...textFieldProps}\n ref={combinedRef}\n name={name}\n onBlur={handleBlur}\n />\n );\n};\n\n/**\n * Uncontrolled MaskedField - for use with defaultValue prop.\n * No value synchronization needed - IMask manages the value internally.\n *\n * Use this when:\n * - You only need the final value on submit\n * - You don't need to react to intermediate changes\n * - You want simpler code without state management\n */\nconst UncontrolledMaskedField = ({\n mask,\n useMaskedValue = false,\n defaultValue,\n onChange,\n onBlur,\n name,\n forwardedRef,\n ...textFieldProps\n}: Omit<MaskedFieldProps, \"value\"> & {\n defaultValue?: string | number;\n forwardedRef?: MaskedFieldRef;\n}) => {\n const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });\n\n const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n return (\n <TextField\n {...textFieldProps}\n ref={combinedRef}\n name={name}\n onBlur={handleBlur}\n defaultValue={defaultValue?.toString()}\n />\n );\n};\n\nconst MaskedField = ({ ref: forwardedRef, ...props }: MaskedFieldProps) => {\n const { value, defaultValue, ...rest } = props;\n\n // Check for \"value\" in props (not `value !== undefined`) to maintain consistent\n // controlled/uncontrolled state throughout component lifetime and prevent focus loss.\n // Example: CurrencyQuestion passes value={undefined} initially, then value={5} after typing.\n if (\"value\" in props) {\n return (\n <ControlledMaskedField\n {...rest}\n value={value ?? \"\"}\n forwardedRef={forwardedRef}\n />\n );\n } else {\n return (\n <UncontrolledMaskedField\n {...rest}\n defaultValue={defaultValue}\n forwardedRef={forwardedRef}\n />\n );\n }\n};\n\nMaskedField.displayName = \"MaskedField\";\n\nexport { MaskedField };\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { memo } from \"react\";\nimport type {\n HTMLInputTypeAttribute,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps, FocusEvents } from \"../../types\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\nimport \"./TextField.css\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n extends\n DOMProps,\n FocusEvents,\n UseTextFieldProps,\n RefAttributes<TextFieldElementType> {\n className?: string;\n errorMessage?: string;\n children?: ReactNode;\n label?: string;\n type?: Exclude<\n HTMLInputTypeAttribute,\n | \"button\"\n | \"checkbox\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"file\"\n | \"image\"\n | \"month\"\n | \"radio\"\n | \"range\"\n | \"reset\"\n | \"submit\"\n | \"week\"\n >;\n prefixInside?: ReactElement;\n prefixOutside?: ReactElement;\n suffixInside?: ReactElement;\n suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextFieldInner = ({ ref, ...props }: TextFieldProps) => {\n const {\n isDisabled,\n type = \"text\",\n isInvalid,\n className,\n label,\n errorMessage,\n children,\n isRequired,\n prefixInside,\n prefixOutside,\n suffixInside,\n suffixOutside,\n autoComplete,\n isReadOnly,\n ...otherProps\n } = props;\n\n const resolvedAutoComplete =\n autoComplete ??\n (type === \"email\" ? \"email\" : type === \"tel\" ? \"tel\" : undefined);\n\n const { inputProps, labelProps, errorMessageProps } = useTextField({\n ...props,\n autoComplete: resolvedAutoComplete,\n \"aria-errormessage\": errorMessage,\n });\n\n const hidden = type === \"hidden\";\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const textfieldClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n \"--is-hidden\": hidden,\n [className || \"\"]: true,\n };\n\n const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n const labelClasses = classNames(\n {\n \"--is-disabled\": isDisabled,\n },\n validationClasses,\n );\n\n const containerClasses = classNames(\n \"mobius\",\n \"mobius-text-field\",\n sharedClasses,\n );\n\n const inputClasses = classNames(\n \"mobius\",\n \"mobius-text-field__input\",\n sharedClasses,\n );\n\n const inputWrapperClasses = classNames(\n \"mobius-text-field__input-wrapper\",\n sharedClasses,\n );\n\n return (\n <Stack gap=\"xs\" className={containerClasses}>\n {label && !hidden && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className=\"mobius-text-field__inner-container\">\n {adornmentWithClassName(\n prefixOutside,\n labelClasses,\n \"mobius-text-field__prefix-outside\",\n )}\n <div className={inputWrapperClasses}>\n {adornmentWithClassName(\n prefixInside,\n labelClasses,\n \"mobius-text-field__prefix-inside\",\n )}\n <input\n {...otherProps}\n {...inputProps}\n ref={ref}\n type={type}\n className={inputClasses}\n />\n {adornmentWithClassName(\n suffixInside,\n labelClasses,\n \"mobius-text-field__suffix-inside\",\n )}\n </div>\n {adornmentWithClassName(\n suffixOutside,\n labelClasses,\n \"mobius-text-field__suffix-outside\",\n )}\n </div>\n {children && (\n <div className=\"mobius-text-field__children\">{children}</div>\n )}\n\n <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n </Stack>\n );\n};\n\nconst TextField = memo(TextFieldInner);\nTextField.displayName = \"TextField\";\nexport { TextField };\n", "export function spaceDelimitedList(\n list: (string | null | undefined)[],\n): string | undefined {\n return list.filter(Boolean).join(\" \") || undefined;\n}\n", "import type { LabelHTMLAttributes } from \"react\";\nimport { useId, useRef } from \"react\";\n\nexport type UseLabelProps = {\n id?: string | undefined;\n label?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n labelElementType?: \"label\" | \"span\" | undefined;\n};\n\nexport type UseLabelReturn = {\n labelProps: {\n id?: string | undefined;\n } & LabelHTMLAttributes<HTMLLabelElement>;\n fieldProps: LabellingProps;\n};\n\nexport type LabellingProps = {\n id?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n \"aria-describedby\"?: string | undefined;\n \"aria-details\"?: string | undefined;\n};\n\nexport function useLabel({\n id: providedId,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n labelElementType = \"label\",\n}: UseLabelProps) {\n let labelProps: UseLabelReturn[\"labelProps\"] = {};\n let fieldProps: UseLabelReturn[\"fieldProps\"] = {};\n\n const hasWarnedAboutMissingLabels = useRef(false);\n\n const fallbackId = useId();\n const id = providedId || fallbackId;\n const labelId = useId();\n\n if (label) {\n ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n labelProps = {\n id: labelId,\n htmlFor: labelElementType === \"label\" ? id : undefined,\n };\n } else if (\n !ariaLabelledby &&\n !ariaLabel &&\n !hasWarnedAboutMissingLabels.current\n ) {\n hasWarnedAboutMissingLabels.current = true;\n console.warn(\n \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n );\n }\n\n fieldProps = {\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n };\n\n return {\n labelProps,\n fieldProps,\n };\n}\n", "import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport type { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n const {\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n inputElementType = \"input\",\n } = props;\n const { labelProps, fieldProps } = useLabel(props);\n\n const descriptionId = useId();\n const descriptionProps = { id: descriptionId };\n\n const errorMessageId = useId();\n const errorMessageProps = { id: errorMessageId };\n\n const ariaDescribedBy = spaceDelimitedList([\n props.description && descriptionId,\n props.errorMessage && errorMessageId,\n props[\"aria-describedby\"],\n ]);\n\n return {\n descriptionProps,\n errorMessageProps,\n labelProps,\n inputProps: {\n defaultValue: props.defaultValue,\n value: props.value,\n onChange: props.onChange,\n disabled: isDisabled,\n readOnly: isReadOnly,\n required: isRequired,\n \"aria-required\": isRequired === true ? true : undefined,\n \"aria-invalid\": props.isInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": props[\"aria-errormessage\"],\n role: props.role,\n\n type: inputElementType === \"input\" ? props.type : undefined,\n pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n autoComplete: props.autoComplete,\n maxLength: props.maxLength,\n minLength: props.minLength,\n name: props.name,\n placeholder: props.placeholder,\n inputMode: props.inputMode,\n\n // Clipboard events\n onCopy: props.onCopy,\n onCut: props.onCut,\n onPaste: props.onPaste,\n\n // Composition events\n onCompositionEnd: props.onCompositionEnd,\n onCompositionStart: props.onCompositionStart,\n onCompositionUpdate: props.onCompositionUpdate,\n\n // Selection events\n onSelect: props.onSelect,\n\n // Input events\n onBeforeInput: props.onBeforeInput,\n onInput: props.onInput,\n\n // Focus events\n onFocus: props.onFocus,\n onBlur: props.onBlur,\n\n ...fieldProps,\n },\n };\n}\n", "import type { Validation } from \"../../types\";\n\nexport type GetValidationClassesProps = Pick<Validation, \"isInvalid\">;\n\nexport const useValidationClasses = (props: GetValidationClassesProps) => {\n const { isInvalid } = props;\n\n if (isInvalid) {\n return \"--is-invalid\";\n }\n\n if (isInvalid === false) {\n return \"--is-valid\";\n }\n\n return \"\";\n};\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\n", "import classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text, getElementType } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\n// Block-level tags that cannot be nested inside <p>.\nconst BLOCK_TAG =\n /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\\s>/]/i;\nconst containsBlockHTML = (text: string) => BLOCK_TAG.test(text);\nconst containsHTML = (text: string) =>\n /<[a-z/]/i.test(text) || /&(?:#\\d+|#x[\\da-f]+|[a-z]\\w*);/i.test(text); // tag or entity\n\nconst buildTextClasses = (\n textProps: Omit<TextProps, \"children\">,\n htmlClassName?: string,\n) => {\n const { variant, elementType, spacing, className } = textProps;\n const variantType = variant || getElementType(variant, elementType);\n return classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n htmlClassName,\n );\n};\n\nexport interface TextOrHTMLProps\n extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n /** HTML string to be rendered with dangerouslySetInnerHTML */\n text: string;\n /** Custom class name for the dangerous HTML element */\n htmlClassName?: string;\n /** HTML element type for the dangerous HTML element */\n htmlElementType?: HTMLElementType;\n /** If true, wraps the dangerous HTML element inside a Text component */\n textWrapper?: boolean;\n /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n ref,\n text,\n htmlClassName,\n htmlElementType,\n textWrapper = false,\n autoDetect = false,\n ...textProps\n}: TextOrHTMLProps) => {\n const hasBlockContent = autoDetect && containsBlockHTML(text);\n\n // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n // See: https://github.com/facebook/react/issues/31660\n const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n // Non-block text with autoDetect: render directly on a Text-equivalent element,\n // avoiding unnecessary <span> nesting inside <p>.\n if (autoDetect && !hasBlockContent) {\n const { variant, spacing, elementType, className, ...domProps } = textProps;\n const Element = getElementType(variant, elementType);\n const classes = buildTextClasses(textProps, htmlClassName);\n\n return containsHTML(text) ? (\n <Element\n ref={ref}\n {...domProps}\n className={classes}\n dangerouslySetInnerHTML={dangerousHTML}\n />\n ) : (\n <Element ref={ref} {...domProps} className={classes}>\n {text}\n </Element>\n );\n }\n\n const DangerousComponent =\n htmlElementType ?? (hasBlockContent ? \"div\" : \"span\");\n const dangerousElement = (\n <DangerousComponent\n className={htmlClassName}\n dangerouslySetInnerHTML={dangerousHTML}\n />\n );\n\n if (textWrapper) {\n return (\n <Text ref={ref} {...textProps}>\n {dangerousElement}\n </Text>\n );\n }\n\n return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"body\"\n | \"small\"\n | \"legal\"\n | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n /** HTML element for the text */\n elementType?: ElementType;\n /** Specify font size override */\n variant?: TextVariantType;\n /** Specify compact line height override */\n spacing?: \"loose\" | \"tight\";\n /** Custom class name for setting specific CSS */\n className?: string;\n children: ReactNode;\n style?: React.CSSProperties;\n}\n\nexport const getElementType = (\n variant: TextVariantType | undefined,\n elementType: ElementType | undefined,\n): ElementType => {\n // Explicit elementType always wins\n if (elementType) {\n return elementType;\n }\n // Infer element from variant\n if (variant && [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant)) {\n return variant as ElementType;\n }\n return \"p\";\n};\n\nconst Text = ({ ref, elementType, ...props }: TextProps) => {\n // Remove non-DOM props from element\n const { variant, className, spacing, ...otherProps } = props;\n\n // If a variant is supplied, set the class name and element type\n const Element: ElementType = getElementType(variant, elementType);\n const variantType = variant || Element;\n const classes = classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n", "import type React from \"react\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Label.css\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n React.JSX.IntrinsicElements[\"label\"],\n \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {\n children?: ReactNode;\n className?: string;\n elementType?: \"label\" | \"span\";\n}\n\nconst Label = ({ ref, ...props }: LabelProps) => {\n const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n otherProps.className = classes;\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {children}\n </Element>\n );\n};\n\nLabel.displayName = \"Label\";\nexport { Label };\n", "import type { Ref, RefAttributes, ReactNode } from \"react\";\nimport type React from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SpacingType } from \"../../types\";\nimport \"./Stack.css\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n children?: ReactNode;\n /** How big a gap between items */\n gap?: SpacingType;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack = ({ ref, ...props }: StackProps) => {\n const { elementType: Element = \"div\", gap, ...otherProps } = props;\n\n const classes = classNames(\n \"mobius\",\n \"mobius-stack\",\n {\n [`--gap-${gap}`]: gap,\n },\n otherProps.className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nStack.displayName = \"Stack\";\n", "import classNames from \"classnames/dedupe\";\nimport type { ReactElement } from \"react\";\nimport { cloneElement } from \"react\";\n\nexport const adornmentWithClassName = (\n component?: ReactElement,\n validationClasses?: string,\n className?: string,\n) => {\n if (!component) return null;\n\n const typedComponent = component as ReactElement<{ className?: string }>;\n return cloneElement(typedComponent, {\n className: classNames(\n typedComponent.props.className,\n validationClasses,\n className,\n ),\n });\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_react", "import_dedupe", "import_react", "import_react", "import_dedupe", "classNames", "import_dedupe", "import_react", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_react", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime"]
|
|
7
7
|
}
|
|
@@ -595,9 +595,10 @@ var init_adornmentWithClassName = __esm({
|
|
|
595
595
|
import_react8 = require("react");
|
|
596
596
|
adornmentWithClassName = (component, validationClasses, className) => {
|
|
597
597
|
if (!component) return null;
|
|
598
|
-
|
|
598
|
+
const typedComponent = component;
|
|
599
|
+
return (0, import_react8.cloneElement)(typedComponent, {
|
|
599
600
|
className: (0, import_dedupe7.default)(
|
|
600
|
-
|
|
601
|
+
typedComponent.props.className,
|
|
601
602
|
validationClasses,
|
|
602
603
|
className
|
|
603
604
|
)
|
|
@@ -607,12 +608,13 @@ var init_adornmentWithClassName = __esm({
|
|
|
607
608
|
});
|
|
608
609
|
|
|
609
610
|
// src/components/TextField/TextField.tsx
|
|
610
|
-
var import_dedupe8, import_TextField, import_jsx_runtime7, TextField;
|
|
611
|
+
var import_dedupe8, import_react9, import_TextField, import_jsx_runtime7, TextFieldInner, TextField;
|
|
611
612
|
var init_TextField = __esm({
|
|
612
613
|
"src/components/TextField/TextField.tsx"() {
|
|
613
614
|
"use strict";
|
|
614
615
|
"use client";
|
|
615
616
|
import_dedupe8 = __toESM(require("classnames/dedupe"));
|
|
617
|
+
import_react9 = require("react");
|
|
616
618
|
init_hooks();
|
|
617
619
|
init_ErrorMessage2();
|
|
618
620
|
init_Label2();
|
|
@@ -620,7 +622,7 @@ var init_TextField = __esm({
|
|
|
620
622
|
init_adornmentWithClassName();
|
|
621
623
|
import_TextField = require("@simplybusiness/mobius/src/components/TextField/TextField.css");
|
|
622
624
|
import_jsx_runtime7 = require("react/jsx-runtime");
|
|
623
|
-
|
|
625
|
+
TextFieldInner = ({ ref, ...props }) => {
|
|
624
626
|
const {
|
|
625
627
|
isDisabled,
|
|
626
628
|
type = "text",
|
|
@@ -714,6 +716,7 @@ var init_TextField = __esm({
|
|
|
714
716
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
|
|
715
717
|
] });
|
|
716
718
|
};
|
|
719
|
+
TextField = (0, import_react9.memo)(TextFieldInner);
|
|
717
720
|
TextField.displayName = "TextField";
|
|
718
721
|
}
|
|
719
722
|
});
|
|
@@ -731,17 +734,17 @@ var MaskedField_exports = {};
|
|
|
731
734
|
__export(MaskedField_exports, {
|
|
732
735
|
MaskedField: () => MaskedField
|
|
733
736
|
});
|
|
734
|
-
var
|
|
737
|
+
var import_react10, import_react_imask, import_jsx_runtime8, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
|
|
735
738
|
var init_MaskedField = __esm({
|
|
736
739
|
"src/components/MaskedField/MaskedField.tsx"() {
|
|
737
740
|
"use strict";
|
|
738
741
|
"use client";
|
|
739
|
-
|
|
742
|
+
import_react10 = require("react");
|
|
740
743
|
import_react_imask = require("react-imask");
|
|
741
744
|
init_TextField2();
|
|
742
745
|
import_jsx_runtime8 = require("react/jsx-runtime");
|
|
743
746
|
useAcceptHandler = (onChange, useMaskedValue, name) => {
|
|
744
|
-
return (0,
|
|
747
|
+
return (0, import_react10.useCallback)(
|
|
745
748
|
(maskedValue, maskInstance) => {
|
|
746
749
|
if (!onChange) {
|
|
747
750
|
return;
|
|
@@ -757,7 +760,7 @@ var init_MaskedField = __esm({
|
|
|
757
760
|
);
|
|
758
761
|
};
|
|
759
762
|
useCombinedRef = (imaskRef, forwardedRef) => {
|
|
760
|
-
return (0,
|
|
763
|
+
return (0, import_react10.useCallback)(
|
|
761
764
|
(element) => {
|
|
762
765
|
imaskRef.current = element;
|
|
763
766
|
if (typeof forwardedRef === "function") {
|
|
@@ -770,7 +773,7 @@ var init_MaskedField = __esm({
|
|
|
770
773
|
);
|
|
771
774
|
};
|
|
772
775
|
useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
|
|
773
|
-
return (0,
|
|
776
|
+
return (0, import_react10.useCallback)(
|
|
774
777
|
(event) => {
|
|
775
778
|
if (!onBlur || !maskRef.current) {
|
|
776
779
|
return;
|
|
@@ -800,7 +803,7 @@ var init_MaskedField = __esm({
|
|
|
800
803
|
const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
|
|
801
804
|
const combinedRef = useCombinedRef(imaskRef, forwardedRef);
|
|
802
805
|
const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
|
|
803
|
-
(0,
|
|
806
|
+
(0, import_react10.useEffect)(() => {
|
|
804
807
|
if (!maskRef.current) {
|
|
805
808
|
return;
|
|
806
809
|
}
|