@accelint/design-toolkit 9.4.0 → 9.4.1
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/catalog-info.yaml +1 -1
- package/dist/components/accordion/group.d.ts +2 -2
- package/dist/components/accordion/header.d.ts +2 -2
- package/dist/components/accordion/index.d.ts +2 -2
- package/dist/components/accordion/panel.d.ts +2 -2
- package/dist/components/accordion/trigger.d.ts +2 -2
- package/dist/components/action-bar/index.d.ts +2 -2
- package/dist/components/avatar/context.d.ts +4 -4
- package/dist/components/avatar/index.d.ts +2 -2
- package/dist/components/badge/context.d.ts +2 -2
- package/dist/components/badge/index.d.ts +2 -2
- package/dist/components/breadcrumbs/index.d.ts +2 -2
- package/dist/components/breadcrumbs/item.d.ts +2 -2
- package/dist/components/button/context.d.ts +4 -4
- package/dist/components/button/index.d.ts +2 -2
- package/dist/components/button/link.d.ts +2 -2
- package/dist/components/button/toggle.d.ts +2 -2
- package/dist/components/checkbox/group.d.ts +2 -2
- package/dist/components/checkbox/index.d.ts +2 -2
- package/dist/components/chip/context.d.ts +4 -4
- package/dist/components/chip/deletable.d.ts +2 -2
- package/dist/components/chip/index.d.ts +2 -2
- package/dist/components/chip/list.d.ts +4 -4
- package/dist/components/chip/selectable.d.ts +2 -2
- package/dist/components/classification-badge/context.d.ts +4 -4
- package/dist/components/classification-badge/index.d.ts +2 -2
- package/dist/components/classification-banner/context.d.ts +4 -4
- package/dist/components/classification-banner/index.d.ts +2 -2
- package/dist/components/clock/index.d.ts +2 -2
- package/dist/components/color-picker/index.d.ts +2 -2
- package/dist/components/combobox-field/context.d.ts +4 -4
- package/dist/components/combobox-field/index.d.ts +2 -2
- package/dist/components/coordinate-field/context.d.ts +6 -6
- package/dist/components/coordinate-field/index.d.ts +2 -2
- package/dist/components/coordinate-field/index.js +2 -2
- package/dist/components/coordinate-field/index.js.map +1 -1
- package/dist/components/coordinate-field/segment-configs.js +1 -1
- package/dist/components/coordinate-field/segment-configs.js.map +1 -1
- package/dist/components/coordinate-field/segment.d.ts +2 -2
- package/dist/components/coordinate-field/segment.js +8 -8
- package/dist/components/coordinate-field/segment.js.map +1 -1
- package/dist/components/coordinate-field/styles.module.css +7 -3
- package/dist/components/date-field/index.d.ts +2 -2
- package/dist/components/deferred-collection/index.d.ts +2 -2
- package/dist/components/details-list/context.d.ts +4 -4
- package/dist/components/details-list/index.d.ts +2 -2
- package/dist/components/details-list/label.d.ts +2 -2
- package/dist/components/details-list/value.d.ts +2 -2
- package/dist/components/dialog/content.d.ts +2 -2
- package/dist/components/dialog/context.d.ts +2 -2
- package/dist/components/dialog/footer.d.ts +2 -2
- package/dist/components/dialog/index.d.ts +2 -2
- package/dist/components/dialog/title.d.ts +2 -2
- package/dist/components/divider/context.d.ts +4 -4
- package/dist/components/divider/index.d.ts +2 -2
- package/dist/components/drawer/back.d.ts +2 -2
- package/dist/components/drawer/close.d.ts +2 -2
- package/dist/components/drawer/content.d.ts +2 -2
- package/dist/components/drawer/context.d.ts +2 -2
- package/dist/components/drawer/footer.d.ts +2 -2
- package/dist/components/drawer/header-title.d.ts +2 -2
- package/dist/components/drawer/header.d.ts +2 -2
- package/dist/components/drawer/index.d.ts +2 -2
- package/dist/components/drawer/layout-main.d.ts +2 -2
- package/dist/components/drawer/layout.d.ts +2 -2
- package/dist/components/drawer/menu-item.d.ts +2 -2
- package/dist/components/drawer/menu.d.ts +2 -2
- package/dist/components/drawer/panel.d.ts +2 -2
- package/dist/components/drawer/trigger.d.ts +2 -2
- package/dist/components/drawer/view.d.ts +2 -2
- package/dist/components/flashcard/index.d.ts +9 -9
- package/dist/components/hero/context.d.ts +2 -2
- package/dist/components/hero/index.d.ts +2 -2
- package/dist/components/hero/subtitle.d.ts +2 -2
- package/dist/components/hero/title.d.ts +3 -3
- package/dist/components/hotkey/context.d.ts +4 -4
- package/dist/components/hotkey/index.d.ts +2 -2
- package/dist/components/hotkey/set.d.ts +2 -2
- package/dist/components/icon/context.d.ts +4 -4
- package/dist/components/icon/index.d.ts +2 -2
- package/dist/components/input/context.d.ts +2 -2
- package/dist/components/input/index.d.ts +2 -2
- package/dist/components/kanban/card-body.d.ts +2 -2
- package/dist/components/kanban/card-header-actions.d.ts +2 -2
- package/dist/components/kanban/card-header-title.d.ts +2 -2
- package/dist/components/kanban/card-header.d.ts +2 -2
- package/dist/components/kanban/card.d.ts +2 -2
- package/dist/components/kanban/column-actions.d.ts +2 -2
- package/dist/components/kanban/column-container.d.ts +2 -2
- package/dist/components/kanban/column-content.d.ts +2 -2
- package/dist/components/kanban/column-header-actions.d.ts +2 -2
- package/dist/components/kanban/column-header-drag-handle.d.ts +2 -2
- package/dist/components/kanban/column-header-title.d.ts +2 -2
- package/dist/components/kanban/column-header.d.ts +2 -2
- package/dist/components/kanban/column.d.ts +2 -2
- package/dist/components/kanban/context.d.ts +2 -2
- package/dist/components/kanban/header-actions.d.ts +2 -2
- package/dist/components/kanban/header-search.d.ts +2 -2
- package/dist/components/kanban/header-title.d.ts +2 -2
- package/dist/components/kanban/header.d.ts +2 -2
- package/dist/components/kanban/kanban.d.ts +4 -4
- package/dist/components/label/context.d.ts +4 -4
- package/dist/components/label/index.d.ts +2 -2
- package/dist/components/lines/index.d.ts +2 -2
- package/dist/components/link/context.d.ts +2 -2
- package/dist/components/link/index.d.ts +2 -2
- package/dist/components/list/context.d.ts +2 -2
- package/dist/components/list/index.d.ts +2 -2
- package/dist/components/list/item-content.d.ts +2 -2
- package/dist/components/list/item-description.d.ts +2 -2
- package/dist/components/list/item-title.d.ts +2 -2
- package/dist/components/list/item.d.ts +2 -2
- package/dist/components/menu/context.d.ts +2 -2
- package/dist/components/menu/index.d.ts +2 -2
- package/dist/components/menu/item-description.d.ts +2 -2
- package/dist/components/menu/item-label.d.ts +2 -2
- package/dist/components/menu/item.d.ts +2 -2
- package/dist/components/menu/section.d.ts +2 -2
- package/dist/components/menu/separator.d.ts +2 -2
- package/dist/components/menu/submenu.d.ts +3 -3
- package/dist/components/notice/index.d.ts +2 -2
- package/dist/components/notice/list.d.ts +2 -2
- package/dist/components/notice/notice-icon.d.ts +2 -2
- package/dist/components/options/context.d.ts +2 -2
- package/dist/components/options/index.d.ts +2 -2
- package/dist/components/options/item-content.d.ts +2 -2
- package/dist/components/options/item-description.d.ts +2 -2
- package/dist/components/options/item-label.d.ts +2 -2
- package/dist/components/options/item.d.ts +2 -2
- package/dist/components/options/section.d.ts +2 -2
- package/dist/components/pagination/context.d.ts +2 -2
- package/dist/components/pagination/index.d.ts +2 -2
- package/dist/components/pagination/next.d.ts +2 -2
- package/dist/components/pagination/pages.d.ts +2 -2
- package/dist/components/pagination/prev.d.ts +2 -2
- package/dist/components/popover/content.d.ts +2 -2
- package/dist/components/popover/footer.d.ts +2 -2
- package/dist/components/popover/index.d.ts +2 -2
- package/dist/components/popover/title.d.ts +2 -2
- package/dist/components/popover/trigger.d.ts +2 -2
- package/dist/components/query-builder/action-element.d.ts +2 -2
- package/dist/components/query-builder/actions.d.ts +4 -4
- package/dist/components/query-builder/combinator-selector.d.ts +2 -2
- package/dist/components/query-builder/index.d.ts +2 -2
- package/dist/components/query-builder/rule-group.d.ts +4 -4
- package/dist/components/query-builder/rule.d.ts +2 -2
- package/dist/components/query-builder/value-editor.d.ts +2 -2
- package/dist/components/query-builder/value-selector.d.ts +2 -2
- package/dist/components/radio/context.d.ts +2 -2
- package/dist/components/radio/group.d.ts +2 -2
- package/dist/components/radio/index.d.ts +2 -2
- package/dist/components/search-field/context.d.ts +4 -4
- package/dist/components/search-field/index.d.ts +2 -2
- package/dist/components/select-field/context.d.ts +4 -4
- package/dist/components/select-field/index.d.ts +2 -2
- package/dist/components/sidenav/avatar.d.ts +2 -2
- package/dist/components/sidenav/content.d.ts +2 -2
- package/dist/components/sidenav/context.d.ts +2 -2
- package/dist/components/sidenav/footer.d.ts +2 -2
- package/dist/components/sidenav/header.d.ts +2 -2
- package/dist/components/sidenav/index.d.ts +2 -2
- package/dist/components/sidenav/item.d.ts +2 -2
- package/dist/components/sidenav/link.d.ts +2 -2
- package/dist/components/sidenav/menu-item.d.ts +2 -2
- package/dist/components/sidenav/menu.d.ts +2 -2
- package/dist/components/sidenav/trigger.d.ts +2 -2
- package/dist/components/skeleton/index.d.ts +2 -2
- package/dist/components/slider/index.d.ts +2 -2
- package/dist/components/switch/context.d.ts +4 -4
- package/dist/components/switch/index.d.ts +2 -2
- package/dist/components/table/body.d.ts +2 -2
- package/dist/components/table/cell.d.ts +2 -2
- package/dist/components/table/context.d.ts +2 -2
- package/dist/components/table/header-cell.d.ts +2 -2
- package/dist/components/table/header.d.ts +2 -2
- package/dist/components/table/index.d.ts +2 -2
- package/dist/components/table/row.d.ts +2 -2
- package/dist/components/tabs/context.d.ts +4 -4
- package/dist/components/tabs/index.d.ts +2 -2
- package/dist/components/tabs/list.d.ts +2 -2
- package/dist/components/tabs/panel.d.ts +2 -2
- package/dist/components/tabs/tab.d.ts +2 -2
- package/dist/components/text-area-field/context.d.ts +4 -4
- package/dist/components/text-area-field/index.d.ts +2 -2
- package/dist/components/text-field/context.d.ts +4 -4
- package/dist/components/text-field/index.d.ts +2 -2
- package/dist/components/time-field/index.d.ts +2 -2
- package/dist/components/tooltip/context.d.ts +2 -2
- package/dist/components/tooltip/index.d.ts +2 -2
- package/dist/components/tooltip/trigger.d.ts +2 -2
- package/dist/components/tree/index.d.ts +2 -2
- package/dist/components/tree/item-actions.d.ts +2 -2
- package/dist/components/tree/item-content.d.ts +2 -2
- package/dist/components/tree/item-description.d.ts +2 -2
- package/dist/components/tree/item-label.d.ts +2 -2
- package/dist/components/tree/item-prefix-icon.d.ts +2 -2
- package/dist/components/tree/item.d.ts +2 -2
- package/dist/components/view-stack/context.d.ts +2 -2
- package/dist/components/view-stack/index.d.ts +2 -2
- package/dist/components/view-stack/trigger.d.ts +2 -2
- package/dist/providers/portal.d.ts +2 -2
- package/dist/providers/theme-provider.d.ts +2 -2
- package/package.json +5 -5
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { OptionsDataItem } from "../options/types.js";
|
|
14
14
|
import { ComboBoxFieldProps } from "./types.js";
|
|
15
15
|
import "client-only";
|
|
16
|
-
import * as
|
|
16
|
+
import * as react_jsx_runtime42 from "react/jsx-runtime";
|
|
17
17
|
|
|
18
18
|
//#region src/components/combobox-field/index.d.ts
|
|
19
19
|
|
|
@@ -43,7 +43,7 @@ import * as react_jsx_runtime32 from "react/jsx-runtime";
|
|
|
43
43
|
declare function ComboBoxField<T extends OptionsDataItem>({
|
|
44
44
|
ref,
|
|
45
45
|
...props
|
|
46
|
-
}: ComboBoxFieldProps<T>):
|
|
46
|
+
}: ComboBoxFieldProps<T>): react_jsx_runtime42.JSX.Element;
|
|
47
47
|
//#endregion
|
|
48
48
|
export { ComboBoxField };
|
|
49
49
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
|
|
13
13
|
import { ProviderProps } from "../../lib/types.js";
|
|
14
14
|
import { CoordinateFieldProps, CoordinateFieldState } from "./types.js";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react12 from "react";
|
|
16
16
|
import { ContextValue } from "react-aria-components";
|
|
17
|
-
import * as
|
|
17
|
+
import * as react_jsx_runtime43 from "react/jsx-runtime";
|
|
18
18
|
|
|
19
19
|
//#region src/components/coordinate-field/context.d.ts
|
|
20
20
|
|
|
@@ -48,7 +48,7 @@ import * as react_jsx_runtime34 from "react/jsx-runtime";
|
|
|
48
48
|
*
|
|
49
49
|
* @see CoordinateFieldStateContext for internal runtime state
|
|
50
50
|
*/
|
|
51
|
-
declare const CoordinateFieldContext:
|
|
51
|
+
declare const CoordinateFieldContext: react12.Context<ContextValue<CoordinateFieldProps, HTMLDivElement>>;
|
|
52
52
|
/**
|
|
53
53
|
* State Context for CoordinateField component.
|
|
54
54
|
*
|
|
@@ -66,7 +66,7 @@ declare const CoordinateFieldContext: react14.Context<ContextValue<CoordinateFie
|
|
|
66
66
|
* const state = useCoordinateFieldStateContext();
|
|
67
67
|
* const { segmentValues, isDisabled, registerTimeout } = state;
|
|
68
68
|
*/
|
|
69
|
-
declare const CoordinateFieldStateContext:
|
|
69
|
+
declare const CoordinateFieldStateContext: react12.Context<CoordinateFieldState | null>;
|
|
70
70
|
/**
|
|
71
71
|
* Provider component for CoordinateField context
|
|
72
72
|
* Wraps children with CoordinateFieldContext
|
|
@@ -78,7 +78,7 @@ declare const CoordinateFieldStateContext: react14.Context<CoordinateFieldState
|
|
|
78
78
|
declare function CoordinateFieldProvider({
|
|
79
79
|
children,
|
|
80
80
|
...props
|
|
81
|
-
}: ProviderProps<CoordinateFieldProps>):
|
|
81
|
+
}: ProviderProps<CoordinateFieldProps>): react_jsx_runtime43.JSX.Element;
|
|
82
82
|
/**
|
|
83
83
|
* Provider component for CoordinateField state context
|
|
84
84
|
* Wraps children with CoordinateFieldStateContext
|
|
@@ -94,7 +94,7 @@ declare function CoordinateFieldStateProvider({
|
|
|
94
94
|
}: {
|
|
95
95
|
children: React.ReactNode;
|
|
96
96
|
value: CoordinateFieldState;
|
|
97
|
-
}):
|
|
97
|
+
}): react_jsx_runtime43.JSX.Element;
|
|
98
98
|
/**
|
|
99
99
|
* Hook to access CoordinateField state context
|
|
100
100
|
* Must be used within a CoordinateField component
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
import { CoordinateFieldProps } from "./types.js";
|
|
14
14
|
import "client-only";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react_jsx_runtime46 from "react/jsx-runtime";
|
|
16
16
|
|
|
17
17
|
//#region src/components/coordinate-field/index.d.ts
|
|
18
18
|
|
|
@@ -104,7 +104,7 @@ import * as react_jsx_runtime37 from "react/jsx-runtime";
|
|
|
104
104
|
declare function CoordinateField({
|
|
105
105
|
ref,
|
|
106
106
|
...props
|
|
107
|
-
}: CoordinateFieldProps):
|
|
107
|
+
}: CoordinateFieldProps): react_jsx_runtime46.JSX.Element;
|
|
108
108
|
//#endregion
|
|
109
109
|
export { CoordinateField };
|
|
110
110
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -240,9 +240,9 @@ function CoordinateField({ ref, ...props }) {
|
|
|
240
240
|
onOpenChange: handlePopoverOpenChange,
|
|
241
241
|
children: [/* @__PURE__ */ jsx(Button$1, {
|
|
242
242
|
variant: "icon",
|
|
243
|
-
size,
|
|
243
|
+
size: "small",
|
|
244
244
|
color: "mono-bold",
|
|
245
|
-
className: classNames?.formatButton,
|
|
245
|
+
className: clsx(styles.formatButton, classNames?.formatButton),
|
|
246
246
|
"aria-label": "View coordinate in all formats",
|
|
247
247
|
isDisabled: !copy.isFormatButtonEnabled,
|
|
248
248
|
children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(GlobalShare, {}) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Label","DialogTrigger","Button","Popover","AriaText","Dialog","RadioGroup","Radio"],"sources":["../../../src/components/coordinate-field/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport Check from '@accelint/icons/check';\nimport CopyToClipboard from '@accelint/icons/copy-to-clipboard';\nimport GlobalShare from '@accelint/icons/global-share';\nimport { filterDOMProps } from '@react-aria/utils';\nimport 'client-only';\nimport {\n type CSSProperties,\n type ReactNode,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport {\n Text as AriaText,\n composeRenderProps,\n FieldError,\n FieldErrorContext,\n GroupContext,\n LabelContext,\n Provider,\n TextContext,\n useContextProps,\n} from 'react-aria-components';\nimport { useCoordinateField } from '../../hooks/coordinate-field';\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport { DialogContent } from '../dialog/content';\nimport { DialogFooter } from '../dialog/footer';\nimport { DialogTitle } from '../dialog/title';\nimport { DialogTrigger } from '../dialog/trigger';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Popover } from '../popover';\nimport { PopoverContent } from '../popover/content';\nimport { PopoverTitle } from '../popover/title';\nimport { Radio } from '../radio';\nimport { RadioGroup } from '../radio/group';\nimport { CoordinateFieldContext, CoordinateFieldStateContext } from './context';\nimport {\n type CoordinateFormatResult,\n getAllCoordinateFormats,\n} from './coordinate-utils';\nimport { CoordinateSegment } from './segment';\nimport { GROUP_SEPARATOR, getSegmentLabel } from './segment-configs';\nimport styles from './styles.module.css';\nimport {\n COORDINATE_FORMAT_LABELS,\n COORDINATE_FORMAT_NAMES,\n COORDINATE_SYSTEMS,\n type CoordinateSystem,\n} from './types';\nimport { calculateMinControlWidth } from './width-utils';\nimport type { CoordinateFieldProps } from './types';\n\n/**\n * CoordinateField - A comprehensive coordinate input component with multiple format support\n *\n * Provides accessible coordinate input functionality with support for multiple coordinate\n * systems (DD, DDM, DMS, MGRS, UTM). All values are normalized to Decimal Degrees internally\n * for consistency.\n *\n * @param props - The coordinate field props.\n * @param props.ref - Reference to the coordinate field element.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.description - Description text displayed below the field.\n * @param props.label - Label text for the coordinate field.\n * @param props.format - Coordinate format to use (dd, ddm, dms, mgrs, utm).\n * @param props.size - Size variant of the field.\n * @param props.variant - Layout variant (inline or stacked).\n * @param props.showFormatButton - Whether to show the format conversion button.\n * @param props.isDisabled - Whether the field is disabled.\n * @param props.isInvalid - Whether the field is in an invalid state.\n * @param props.isRequired - Whether the field is required.\n * @param props.isReadOnly - Whether the field is read-only.\n * @returns The coordinate field component.\n *\n * @example\n * ```tsx\n * // Basic coordinate field\n * <CoordinateField label=\"Location\" />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with validation\n * <CoordinateField\n * label=\"Target Coordinates\"\n * isRequired\n * isInvalid={hasError}\n * errorMessage=\"Please enter a valid coordinate\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with specific format\n * <CoordinateField\n * label=\"Position\"\n * format=\"dms\"\n * description=\"Enter coordinates in Degrees Minutes Seconds format\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Compact coordinate field\n * <CoordinateField\n * label=\"Coordinates\"\n * size=\"small\"\n * format=\"dd\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Controlled coordinate field\n * <CoordinateField\n * label=\"Selected Location\"\n * value={coordinates}\n * onChange={setCoordinates}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with error handling\n * <CoordinateField\n * label=\"Target Coordinates\"\n * onError={(message, context) => {\n * // message will be \"Invalid coordinate value\" for validation errors\n * // or \"Invalid coordinate format\" for paste errors\n * setErrorMessage(message);\n * console.error(message, context);\n * }}\n * isInvalid={!!errorMessage}\n * errorMessage={errorMessage}\n * />\n * ```\n */\nexport function CoordinateField({ ref, ...props }: CoordinateFieldProps) {\n [props, ref] = useContextProps(props, ref, CoordinateFieldContext);\n\n const {\n classNames,\n description: descriptionProp,\n label: labelProp,\n format = 'dd',\n size = 'medium',\n variant = 'inline',\n showFormatButton = true,\n isDisabled = false,\n isInvalid: isInvalidProp = false,\n isRequired = false,\n isReadOnly = false,\n ...rest\n } = props;\n\n const isSmall = size === 'small';\n\n const DOMProps = filterDOMProps(rest, { global: true });\n\n // When size is small and label is hidden, use aria-label instead of aria-labelledby\n // to ensure screen readers have an accessible name\n const ariaLabelForSmallSize =\n isSmall && labelProp ? labelProp : rest['aria-label'];\n\n const {\n state,\n focus,\n paste,\n copy,\n registerTimeout,\n fieldProps,\n labelProps,\n descriptionProps,\n errorProps,\n validation,\n effectiveErrorMessage,\n isInvalid,\n } = useCoordinateField(\n props,\n ariaLabelForSmallSize,\n rest['aria-describedby'],\n rest['aria-details'],\n );\n\n const componentState = {\n segmentValues: state.segmentValues,\n format,\n currentValue: state.currentValue,\n validationErrors: state.validationErrors,\n isDisabled,\n isInvalid,\n isRequired,\n size,\n variant,\n registerTimeout,\n };\n\n // Store all coordinate formats, calculated only when popover opens\n const [allCoordinateFormats, setAllCoordinateFormats] = useState<Record<\n CoordinateSystem,\n CoordinateFormatResult\n > | null>(null);\n\n const handlePopoverOpenChange = useCallback(\n (isOpen: boolean) => {\n if (isOpen) {\n setAllCoordinateFormats(getAllCoordinateFormats(state.currentValue));\n }\n },\n [state.currentValue],\n );\n\n // Calculate the minimum width needed for the control container\n // This keeps the outlined container at a fixed width while segments animate\n const minControlWidth = useMemo(\n () =>\n calculateMinControlWidth(\n state.editableSegmentConfigs,\n state.segmentConfigs,\n showFormatButton,\n ),\n [state.editableSegmentConfigs, state.segmentConfigs, showFormatButton],\n );\n\n return (\n <Provider\n values={[\n [CoordinateFieldContext, props],\n [CoordinateFieldStateContext, componentState],\n [GroupContext, fieldProps],\n [LabelContext, labelProps],\n [\n TextContext,\n {\n slots: {\n description: descriptionProps,\n errorMessage: errorProps,\n },\n },\n ],\n [FieldErrorContext, validation],\n ]}\n >\n <div\n {...DOMProps}\n {...fieldProps}\n ref={ref}\n className={clsx(\n 'group/coordinate-field',\n styles.field,\n classNames?.field,\n )}\n data-size={size}\n data-disabled={isDisabled || null}\n data-invalid={isInvalid || null}\n >\n {!isSmall && labelProp && (\n <Label\n className={classNames?.label}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n\n <div\n style={\n {\n '--min-width': variant === 'stacked' ? 'unset' : minControlWidth,\n } as CSSProperties\n }\n className={clsx(styles.control, classNames?.control)}\n data-readonly={isReadOnly || null}\n >\n <div\n className={clsx(styles.input, styles[variant], classNames?.input)}\n onPasteCapture={paste.handleInputPaste}\n data-input-container\n >\n {state.segmentConfigs\n .reduce<ReactNode[][]>(\n (acc, config, configIndex) => {\n const currentGroupIndex = acc.length - 1;\n\n if (\n config.value === GROUP_SEPARATOR &&\n variant === 'stacked'\n ) {\n acc.push([]);\n\n return acc;\n }\n\n if (config.type === 'literal') {\n acc[currentGroupIndex]?.push(\n <span\n key={`${format}-literal-${configIndex}-${config.value}`}\n className={styles.literal}\n >\n {config.value}\n </span>,\n );\n\n return acc;\n }\n\n const editableIndex = state.segmentConfigs\n .slice(0, configIndex)\n .filter((c) => c.type !== 'literal').length;\n\n acc[currentGroupIndex]?.push(\n <CoordinateSegment\n key={`${format}-segment-${editableIndex}`}\n value={state.segmentValues[editableIndex] || ''}\n onChange={(newValue) =>\n state.handleSegmentChange(editableIndex, newValue)\n }\n onFocus={() =>\n focus.setFocusedSegmentIndex(editableIndex)\n }\n onBlur={() => {\n focus.setFocusedSegmentIndex(-1);\n state.flushPendingValidation();\n }}\n onKeyDown={(e) =>\n focus.handleSegmentKeyDown(editableIndex, e)\n }\n onAutoAdvance={() =>\n focus.focusNextSegment(editableIndex)\n }\n onAutoRetreat={() =>\n focus.focusPreviousSegment(editableIndex)\n }\n placeholder={config.placeholder}\n maxLength={config.maxLength}\n pad={config.pad}\n className={clsx(styles.segment, classNames?.segment)}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n allowedChars={config.allowedChars}\n segmentRef={focus.segmentRefs[editableIndex]}\n segmentIndex={editableIndex}\n totalSegments={state.editableSegmentConfigs.length}\n ariaLabel={getSegmentLabel(format, editableIndex)}\n />,\n );\n\n return acc;\n },\n [[]],\n )\n .map((group, groupIndex) => (\n <div\n className={clsx(styles.segmentGroup, styles[variant])}\n key={`${format}-group-${\n // biome-ignore lint/suspicious/noArrayIndexKey: intentional\n groupIndex\n }`}\n >\n {group}\n </div>\n ))}\n </div>\n\n {showFormatButton && (\n <DialogTrigger onOpenChange={handlePopoverOpenChange}>\n <Button\n variant='icon'\n size={size}\n color='mono-bold'\n className={classNames?.formatButton}\n aria-label='View coordinate in all formats'\n isDisabled={!copy.isFormatButtonEnabled}\n >\n <Icon>\n <GlobalShare />\n </Icon>\n </Button>\n <Popover classNames={{ popover: styles.popover }}>\n <PopoverTitle className={styles.popoverTitle}>\n Copy Coordinates\n </PopoverTitle>\n <PopoverContent>\n {allCoordinateFormats &&\n COORDINATE_SYSTEMS.map((formatKey) => {\n const formatResult = allCoordinateFormats[formatKey];\n const isCopied = copy.copiedFormat === formatKey;\n\n return (\n <div key={formatKey} className={styles.formatRow}>\n <div className={styles.formatLabels}>\n <span className={styles.formatLabel}>\n {COORDINATE_FORMAT_LABELS[formatKey]}\n </span>\n <span\n className={styles.formatValue}\n title={formatResult.value}\n >\n {formatResult.value}\n </span>\n </div>\n <Button\n variant='icon'\n color='mono-bold'\n aria-label={`Copy ${COORDINATE_FORMAT_LABELS[formatKey]} format`}\n onClick={() => copy.handleCopyFormat(formatKey)}\n isDisabled={!formatResult.isValid}\n >\n <Icon>\n {isCopied ? <Check /> : <CopyToClipboard />}\n </Icon>\n </Button>\n </div>\n );\n })}\n </PopoverContent>\n </Popover>\n </DialogTrigger>\n )}\n </div>\n\n {/* Description is hidden when field is invalid (unless disabled) to make room for error message */}\n {descriptionProp && !isSmall && (!isInvalid || isDisabled) && (\n <AriaText\n className={clsx(styles.description, classNames?.description)}\n slot='description'\n >\n {descriptionProp}\n </AriaText>\n )}\n\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n clsx(styles.error, className),\n )}\n >\n {effectiveErrorMessage}\n </FieldError>\n\n <DialogTrigger\n isOpen={paste.showDisambiguationModal}\n onOpenChange={paste.setShowDisambiguationModal}\n >\n <Button className={styles.hiddenTrigger}>Hidden Trigger</Button>\n <Dialog size='small'>\n <DialogTitle className={styles.modalTitle}>\n Select Coordinate Format\n </DialogTitle>\n <DialogContent>\n <p className={styles.modalDescription}>\n The pasted value matches multiple coordinate formats. Please\n select the correct interpretation:\n </p>\n\n <RadioGroup\n classNames={{ group: styles.formatOptions }}\n value={paste.selectedDisambiguationFormat}\n onChange={(value) =>\n paste.setSelectedDisambiguationFormat(\n value as CoordinateSystem,\n )\n }\n >\n {paste.disambiguationMatches.map((match) => (\n <Radio key={match.format} value={match.format}>\n <div className={styles.modalOptionContent}>\n <span className={styles.formatOptionLabel}>\n {COORDINATE_FORMAT_NAMES[match.format]}\n </span>\n <span className={styles.formatOptionValue}>\n {match.displayString}\n </span>\n </div>\n </Radio>\n ))}\n </RadioGroup>\n </DialogContent>\n <DialogFooter className={styles.modalActions}>\n <Button\n variant='flat'\n onPress={() => paste.setShowDisambiguationModal(false)}\n >\n Cancel\n </Button>\n <Button onPress={paste.handleDisambiguationSelect}>\n Apply Selected\n </Button>\n </DialogFooter>\n </Dialog>\n </DialogTrigger>\n </div>\n </Provider>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["Label","DialogTrigger","Button","Popover","AriaText","Dialog","RadioGroup","Radio"],"sources":["../../../src/components/coordinate-field/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport Check from '@accelint/icons/check';\nimport CopyToClipboard from '@accelint/icons/copy-to-clipboard';\nimport GlobalShare from '@accelint/icons/global-share';\nimport { filterDOMProps } from '@react-aria/utils';\nimport 'client-only';\nimport {\n type CSSProperties,\n type ReactNode,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport {\n Text as AriaText,\n composeRenderProps,\n FieldError,\n FieldErrorContext,\n GroupContext,\n LabelContext,\n Provider,\n TextContext,\n useContextProps,\n} from 'react-aria-components';\nimport { useCoordinateField } from '../../hooks/coordinate-field';\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport { DialogContent } from '../dialog/content';\nimport { DialogFooter } from '../dialog/footer';\nimport { DialogTitle } from '../dialog/title';\nimport { DialogTrigger } from '../dialog/trigger';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Popover } from '../popover';\nimport { PopoverContent } from '../popover/content';\nimport { PopoverTitle } from '../popover/title';\nimport { Radio } from '../radio';\nimport { RadioGroup } from '../radio/group';\nimport { CoordinateFieldContext, CoordinateFieldStateContext } from './context';\nimport {\n type CoordinateFormatResult,\n getAllCoordinateFormats,\n} from './coordinate-utils';\nimport { CoordinateSegment } from './segment';\nimport { GROUP_SEPARATOR, getSegmentLabel } from './segment-configs';\nimport styles from './styles.module.css';\nimport {\n COORDINATE_FORMAT_LABELS,\n COORDINATE_FORMAT_NAMES,\n COORDINATE_SYSTEMS,\n type CoordinateSystem,\n} from './types';\nimport { calculateMinControlWidth } from './width-utils';\nimport type { CoordinateFieldProps } from './types';\n\n/**\n * CoordinateField - A comprehensive coordinate input component with multiple format support\n *\n * Provides accessible coordinate input functionality with support for multiple coordinate\n * systems (DD, DDM, DMS, MGRS, UTM). All values are normalized to Decimal Degrees internally\n * for consistency.\n *\n * @param props - The coordinate field props.\n * @param props.ref - Reference to the coordinate field element.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.description - Description text displayed below the field.\n * @param props.label - Label text for the coordinate field.\n * @param props.format - Coordinate format to use (dd, ddm, dms, mgrs, utm).\n * @param props.size - Size variant of the field.\n * @param props.variant - Layout variant (inline or stacked).\n * @param props.showFormatButton - Whether to show the format conversion button.\n * @param props.isDisabled - Whether the field is disabled.\n * @param props.isInvalid - Whether the field is in an invalid state.\n * @param props.isRequired - Whether the field is required.\n * @param props.isReadOnly - Whether the field is read-only.\n * @returns The coordinate field component.\n *\n * @example\n * ```tsx\n * // Basic coordinate field\n * <CoordinateField label=\"Location\" />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with validation\n * <CoordinateField\n * label=\"Target Coordinates\"\n * isRequired\n * isInvalid={hasError}\n * errorMessage=\"Please enter a valid coordinate\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with specific format\n * <CoordinateField\n * label=\"Position\"\n * format=\"dms\"\n * description=\"Enter coordinates in Degrees Minutes Seconds format\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Compact coordinate field\n * <CoordinateField\n * label=\"Coordinates\"\n * size=\"small\"\n * format=\"dd\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Controlled coordinate field\n * <CoordinateField\n * label=\"Selected Location\"\n * value={coordinates}\n * onChange={setCoordinates}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Coordinate field with error handling\n * <CoordinateField\n * label=\"Target Coordinates\"\n * onError={(message, context) => {\n * // message will be \"Invalid coordinate value\" for validation errors\n * // or \"Invalid coordinate format\" for paste errors\n * setErrorMessage(message);\n * console.error(message, context);\n * }}\n * isInvalid={!!errorMessage}\n * errorMessage={errorMessage}\n * />\n * ```\n */\nexport function CoordinateField({ ref, ...props }: CoordinateFieldProps) {\n [props, ref] = useContextProps(props, ref, CoordinateFieldContext);\n\n const {\n classNames,\n description: descriptionProp,\n label: labelProp,\n format = 'dd',\n size = 'medium',\n variant = 'inline',\n showFormatButton = true,\n isDisabled = false,\n isInvalid: isInvalidProp = false,\n isRequired = false,\n isReadOnly = false,\n ...rest\n } = props;\n\n const isSmall = size === 'small';\n\n const DOMProps = filterDOMProps(rest, { global: true });\n\n // When size is small and label is hidden, use aria-label instead of aria-labelledby\n // to ensure screen readers have an accessible name\n const ariaLabelForSmallSize =\n isSmall && labelProp ? labelProp : rest['aria-label'];\n\n const {\n state,\n focus,\n paste,\n copy,\n registerTimeout,\n fieldProps,\n labelProps,\n descriptionProps,\n errorProps,\n validation,\n effectiveErrorMessage,\n isInvalid,\n } = useCoordinateField(\n props,\n ariaLabelForSmallSize,\n rest['aria-describedby'],\n rest['aria-details'],\n );\n\n const componentState = {\n segmentValues: state.segmentValues,\n format,\n currentValue: state.currentValue,\n validationErrors: state.validationErrors,\n isDisabled,\n isInvalid,\n isRequired,\n size,\n variant,\n registerTimeout,\n };\n\n // Store all coordinate formats, calculated only when popover opens\n const [allCoordinateFormats, setAllCoordinateFormats] = useState<Record<\n CoordinateSystem,\n CoordinateFormatResult\n > | null>(null);\n\n const handlePopoverOpenChange = useCallback(\n (isOpen: boolean) => {\n if (isOpen) {\n setAllCoordinateFormats(getAllCoordinateFormats(state.currentValue));\n }\n },\n [state.currentValue],\n );\n\n // Calculate the minimum width needed for the control container\n // This keeps the outlined container at a fixed width while segments animate\n const minControlWidth = useMemo(\n () =>\n calculateMinControlWidth(\n state.editableSegmentConfigs,\n state.segmentConfigs,\n showFormatButton,\n ),\n [state.editableSegmentConfigs, state.segmentConfigs, showFormatButton],\n );\n\n return (\n <Provider\n values={[\n [CoordinateFieldContext, props],\n [CoordinateFieldStateContext, componentState],\n [GroupContext, fieldProps],\n [LabelContext, labelProps],\n [\n TextContext,\n {\n slots: {\n description: descriptionProps,\n errorMessage: errorProps,\n },\n },\n ],\n [FieldErrorContext, validation],\n ]}\n >\n <div\n {...DOMProps}\n {...fieldProps}\n ref={ref}\n className={clsx(\n 'group/coordinate-field',\n styles.field,\n classNames?.field,\n )}\n data-size={size}\n data-disabled={isDisabled || null}\n data-invalid={isInvalid || null}\n >\n {!isSmall && labelProp && (\n <Label\n className={classNames?.label}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n\n <div\n style={\n {\n '--min-width': variant === 'stacked' ? 'unset' : minControlWidth,\n } as CSSProperties\n }\n className={clsx(styles.control, classNames?.control)}\n data-readonly={isReadOnly || null}\n >\n <div\n className={clsx(styles.input, styles[variant], classNames?.input)}\n onPasteCapture={paste.handleInputPaste}\n data-input-container\n >\n {state.segmentConfigs\n .reduce<ReactNode[][]>(\n (acc, config, configIndex) => {\n const currentGroupIndex = acc.length - 1;\n\n if (\n config.value === GROUP_SEPARATOR &&\n variant === 'stacked'\n ) {\n acc.push([]);\n\n return acc;\n }\n\n if (config.type === 'literal') {\n acc[currentGroupIndex]?.push(\n <span\n key={`${format}-literal-${configIndex}-${config.value}`}\n className={styles.literal}\n >\n {config.value}\n </span>,\n );\n\n return acc;\n }\n\n const editableIndex = state.segmentConfigs\n .slice(0, configIndex)\n .filter((c) => c.type !== 'literal').length;\n\n acc[currentGroupIndex]?.push(\n <CoordinateSegment\n key={`${format}-segment-${editableIndex}`}\n value={state.segmentValues[editableIndex] || ''}\n onChange={(newValue) =>\n state.handleSegmentChange(editableIndex, newValue)\n }\n onFocus={() =>\n focus.setFocusedSegmentIndex(editableIndex)\n }\n onBlur={() => {\n focus.setFocusedSegmentIndex(-1);\n state.flushPendingValidation();\n }}\n onKeyDown={(e) =>\n focus.handleSegmentKeyDown(editableIndex, e)\n }\n onAutoAdvance={() =>\n focus.focusNextSegment(editableIndex)\n }\n onAutoRetreat={() =>\n focus.focusPreviousSegment(editableIndex)\n }\n placeholder={config.placeholder}\n maxLength={config.maxLength}\n pad={config.pad}\n className={clsx(styles.segment, classNames?.segment)}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n allowedChars={config.allowedChars}\n segmentRef={focus.segmentRefs[editableIndex]}\n segmentIndex={editableIndex}\n totalSegments={state.editableSegmentConfigs.length}\n ariaLabel={getSegmentLabel(format, editableIndex)}\n />,\n );\n\n return acc;\n },\n [[]],\n )\n .map((group, groupIndex) => (\n <div\n className={clsx(styles.segmentGroup, styles[variant])}\n key={`${format}-group-${\n // biome-ignore lint/suspicious/noArrayIndexKey: intentional\n groupIndex\n }`}\n >\n {group}\n </div>\n ))}\n </div>\n\n {showFormatButton && (\n <DialogTrigger onOpenChange={handlePopoverOpenChange}>\n <Button\n variant='icon'\n size='small'\n color='mono-bold'\n className={clsx(styles.formatButton, classNames?.formatButton)}\n aria-label='View coordinate in all formats'\n isDisabled={!copy.isFormatButtonEnabled}\n >\n <Icon>\n <GlobalShare />\n </Icon>\n </Button>\n <Popover classNames={{ popover: styles.popover }}>\n <PopoverTitle className={styles.popoverTitle}>\n Copy Coordinates\n </PopoverTitle>\n <PopoverContent>\n {allCoordinateFormats &&\n COORDINATE_SYSTEMS.map((formatKey) => {\n const formatResult = allCoordinateFormats[formatKey];\n const isCopied = copy.copiedFormat === formatKey;\n\n return (\n <div key={formatKey} className={styles.formatRow}>\n <div className={styles.formatLabels}>\n <span className={styles.formatLabel}>\n {COORDINATE_FORMAT_LABELS[formatKey]}\n </span>\n <span\n className={styles.formatValue}\n title={formatResult.value}\n >\n {formatResult.value}\n </span>\n </div>\n <Button\n variant='icon'\n color='mono-bold'\n aria-label={`Copy ${COORDINATE_FORMAT_LABELS[formatKey]} format`}\n onClick={() => copy.handleCopyFormat(formatKey)}\n isDisabled={!formatResult.isValid}\n >\n <Icon>\n {isCopied ? <Check /> : <CopyToClipboard />}\n </Icon>\n </Button>\n </div>\n );\n })}\n </PopoverContent>\n </Popover>\n </DialogTrigger>\n )}\n </div>\n\n {/* Description is hidden when field is invalid (unless disabled) to make room for error message */}\n {descriptionProp && !isSmall && (!isInvalid || isDisabled) && (\n <AriaText\n className={clsx(styles.description, classNames?.description)}\n slot='description'\n >\n {descriptionProp}\n </AriaText>\n )}\n\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n clsx(styles.error, className),\n )}\n >\n {effectiveErrorMessage}\n </FieldError>\n\n <DialogTrigger\n isOpen={paste.showDisambiguationModal}\n onOpenChange={paste.setShowDisambiguationModal}\n >\n <Button className={styles.hiddenTrigger}>Hidden Trigger</Button>\n <Dialog size='small'>\n <DialogTitle className={styles.modalTitle}>\n Select Coordinate Format\n </DialogTitle>\n <DialogContent>\n <p className={styles.modalDescription}>\n The pasted value matches multiple coordinate formats. Please\n select the correct interpretation:\n </p>\n\n <RadioGroup\n classNames={{ group: styles.formatOptions }}\n value={paste.selectedDisambiguationFormat}\n onChange={(value) =>\n paste.setSelectedDisambiguationFormat(\n value as CoordinateSystem,\n )\n }\n >\n {paste.disambiguationMatches.map((match) => (\n <Radio key={match.format} value={match.format}>\n <div className={styles.modalOptionContent}>\n <span className={styles.formatOptionLabel}>\n {COORDINATE_FORMAT_NAMES[match.format]}\n </span>\n <span className={styles.formatOptionValue}>\n {match.displayString}\n </span>\n </div>\n </Radio>\n ))}\n </RadioGroup>\n </DialogContent>\n <DialogFooter className={styles.modalActions}>\n <Button\n variant='flat'\n onPress={() => paste.setShowDisambiguationModal(false)}\n >\n Cancel\n </Button>\n <Button onPress={paste.handleDisambiguationSelect}>\n Apply Selected\n </Button>\n </DialogFooter>\n </Dialog>\n </DialogTrigger>\n </div>\n </Provider>\n );\n}\n"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
/** Padding for numeric segments (0.25ch ≈ quarter character width for visual spacing) */
|
|
16
16
|
const NUMERIC_PAD = .25;
|
|
17
17
|
/** Larger padding for final segment to account for container edge (0.5ch ≈ half character) */
|
|
18
|
-
const LAST_PAD = .
|
|
18
|
+
const LAST_PAD = .8;
|
|
19
19
|
/** The separator used for the logical field groups. */
|
|
20
20
|
const GROUP_SEPARATOR = ", ";
|
|
21
21
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segment-configs.js","names":["ddSegmentConfigs: SegmentConfig[]","ddmSegmentConfigs: SegmentConfig[]","dmsSegmentConfigs: SegmentConfig[]","mgrsSegmentConfigs: SegmentConfig[]","utmSegmentConfigs: SegmentConfig[]","EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number>"],"sources":["../../../src/components/coordinate-field/segment-configs.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Coordinate Field Segment Configurations\n *\n * This file defines the segment layouts for each supported coordinate system format.\n * Each configuration specifies the editable segments and literal separators that make up\n * the coordinate input for that format.\n *\n * Supported formats:\n * - DD (Decimal Degrees) - 2 editable segments\n * - DDM (Degrees Decimal Minutes) - 6 editable segments\n * - DMS (Degrees Minutes Seconds) - 8 editable segments\n * - MGRS (Military Grid Reference System) - 5 editable segments\n * - UTM (Universal Transverse Mercator) - 4 editable segments\n *\n * References:\n * - DD parser: /packages/geo/src/coordinates/latlon/decimal-degrees/parser.ts\n * - DDM parser: /packages/geo/src/coordinates/latlon/degrees-decimal-minutes/parser.ts\n * - DMS parser: /packages/geo/src/coordinates/latlon/degrees-minutes-seconds/parser.ts\n * - MGRS parser: /packages/geo/src/coordinates/mgrs/parser.ts\n * - UTM parser: /packages/geo/src/coordinates/utm/parser.ts\n */\n\nimport type { CoordinateSystem, SegmentConfig } from './types';\n\n/** Padding for numeric segments (0.25ch ≈ quarter character width for visual spacing) */\nconst NUMERIC_PAD = 0.25;\n\n/** Larger padding for final segment to account for container edge (0.5ch ≈ half character) */\nconst LAST_PAD = 0.5;\n\n/** The separator used for the logical field groups. */\nexport const GROUP_SEPARATOR = ', ';\n\n/**\n * DD (Decimal Degrees) Segment Configuration\n *\n * Format: [lat_deg], [lon_deg]\n * Example: 89.765432, -123.456789\n *\n * Segments:\n * - Latitude degrees: -90 to 90, allows negative sign, decimals, 0-9\n * - Longitude degrees: -180 to 180, allows negative sign, decimals, 0-9\n *\n * Total segments: 2 editable\n */\nexport const ddSegmentConfigs: SegmentConfig[] = [\n {\n type: 'numeric',\n placeholder: '00.000000',\n allowedChars: '[0-9\\\\-\\\\.]',\n maxLength: 10, // Max: -90.123456\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: GROUP_SEPARATOR,\n },\n {\n type: 'numeric',\n placeholder: '-000.000000',\n allowedChars: '[0-9\\\\-\\\\.]',\n maxLength: 11, // Max: -180.123456\n pad: LAST_PAD,\n },\n];\n\n/**\n * DDM (Degrees Decimal Minutes) Segment Configuration\n *\n * Format: [lat_deg]° [lat_min]' [lat_dir], [lon_deg]° [lon_min]' [lon_dir]\n * Example: 89° 45.9259' N, 123° 27.4073' W\n *\n * Segments:\n * - Latitude degrees: 0-90, whole number only (no decimals)\n * - Latitude minutes: 0-59.9999, decimals allowed\n * - Latitude direction: N or S\n * - Longitude degrees: 0-180, whole number only (no decimals)\n * - Longitude minutes: 0-59.9999, decimals allowed\n * - Longitude direction: E or W\n *\n * Total segments: 6 editable\n */\nexport const ddmSegmentConfigs: SegmentConfig[] = [\n // Latitude degrees\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 90\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '°',\n },\n // Latitude minutes (decimal minutes)\n {\n type: 'numeric',\n placeholder: '00.0000',\n allowedChars: '[0-9\\\\.]',\n maxLength: 7, // Max: 59.9999\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: \"'\",\n },\n // Latitude direction\n {\n type: 'directional',\n placeholder: 'N',\n allowedChars: '[NS]',\n maxLength: 1,\n pad: 0,\n },\n {\n type: 'literal',\n value: GROUP_SEPARATOR,\n },\n // Longitude degrees\n {\n type: 'numeric',\n placeholder: '000',\n allowedChars: '[0-9]',\n maxLength: 3, // Max: 180\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '°',\n },\n // Longitude minutes (decimal minutes)\n {\n type: 'numeric',\n placeholder: '00.0000',\n allowedChars: '[0-9\\\\.]',\n maxLength: 7, // Max: 59.9999\n pad: LAST_PAD,\n },\n {\n type: 'literal',\n value: \"'\",\n },\n // Longitude direction\n {\n type: 'directional',\n placeholder: 'W',\n allowedChars: '[EW]',\n maxLength: 1,\n pad: 0,\n },\n];\n\n/**\n * DMS (Degrees Minutes Seconds) Segment Configuration\n *\n * Format: [lat_deg]° [lat_min]' [lat_sec]\" [lat_dir], [lon_deg]° [lon_min]' [lon_sec]\" [lon_dir]\n * Example: 89° 45' 55.56\" N, 123° 27' 24.44\" W\n *\n * Segments:\n * - Latitude degrees: 0-90, whole number only (no decimals)\n * - Latitude minutes: 0-59, whole number only (no decimals)\n * - Latitude seconds: 0-59.999, decimals allowed\n * - Latitude direction: N or S\n * - Longitude degrees: 0-180, whole number only (no decimals)\n * - Longitude minutes: 0-59, whole number only (no decimals)\n * - Longitude seconds: 0-59.999, decimals allowed\n * - Longitude direction: E or W\n *\n * Total segments: 8 editable\n */\nexport const dmsSegmentConfigs: SegmentConfig[] = [\n // Latitude degrees\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 90\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '°',\n },\n // Latitude minutes (whole number)\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 59\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: \"'\",\n },\n // Latitude seconds (decimal seconds)\n {\n type: 'numeric',\n placeholder: '00.00',\n allowedChars: '[0-9\\\\.]',\n maxLength: 5, // Max: 59.99\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '\"',\n },\n // Latitude direction\n {\n type: 'directional',\n placeholder: 'N',\n allowedChars: '[NS]',\n maxLength: 1,\n pad: 0,\n },\n {\n type: 'literal',\n value: GROUP_SEPARATOR,\n },\n // Longitude degrees\n {\n type: 'numeric',\n placeholder: '000',\n allowedChars: '[0-9]',\n maxLength: 3, // Max: 180\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '°',\n },\n // Longitude minutes (whole number)\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 59\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: \"'\",\n },\n // Longitude seconds (decimal seconds)\n {\n type: 'numeric',\n placeholder: '00.00',\n allowedChars: '[0-9\\\\.]',\n maxLength: 5, // Max: 59.99\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '\"',\n },\n // Longitude direction\n {\n type: 'directional',\n placeholder: 'W',\n allowedChars: '[EW]',\n maxLength: 1,\n pad: 0,\n },\n];\n\n/**\n * MGRS (Military Grid Reference System) Segment Configuration\n *\n * Format: [zone][band] [grid_100km] [easting] [northing]\n * Example: 18T WM 12345 67890\n *\n * Segments:\n * - Zone: 1-60, 2 digits\n * - Band: C-X (excluding I and O), 1 letter\n * - Grid 100km: 2 letters (A-Z excluding I and O)\n * - Easting: 5 digits (can be 1-5 based on precision)\n * - Northing: 5 digits (can be 1-5 based on precision)\n *\n * Total segments: 5 editable\n *\n * Reference: /packages/geo/src/coordinates/mgrs/parser.ts\n * Pattern: /^((?:..?)?)(\\w?)\\s*((?:\\w{2})?)\\s*(?:(\\d+(?:\\.\\d*)?)?)\\s*(?:(\\d+(?:\\.\\d*)?)?)$/i\n */\nexport const mgrsSegmentConfigs: SegmentConfig[] = [\n // Zone (1-60)\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 60\n pad: NUMERIC_PAD,\n },\n // Band (C-X, excluding I and O)\n {\n type: 'alphanumeric',\n placeholder: 'T',\n allowedChars: '[C-HJ-NP-X]', // Excludes I and O\n maxLength: 1,\n pad: 0,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Grid 100km identifier (2 letters, A-Z excluding I and O)\n {\n type: 'alphanumeric',\n placeholder: 'WM',\n allowedChars: '[A-HJ-NP-Z]', // Excludes I and O\n maxLength: 2,\n pad: 0,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Easting (5 digits, can be 1-5 based on precision)\n {\n type: 'numeric',\n placeholder: '00000',\n allowedChars: '[0-9]',\n maxLength: 5,\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Northing (5 digits, can be 1-5 based on precision)\n {\n type: 'numeric',\n placeholder: '00000',\n allowedChars: '[0-9]',\n maxLength: 5,\n pad: LAST_PAD,\n },\n];\n\n/**\n * UTM (Universal Transverse Mercator) Segment Configuration\n *\n * Format: [zone][hemisphere] [easting] [northing]\n * Example: 18N 585628 4511644\n *\n * Segments:\n * - Zone: 1-60, 2 digits\n * - Hemisphere: N or S, 1 letter\n * - Easting: 6-7 digits\n * - Northing: 7 digits\n *\n * Total segments: 4 editable\n *\n * Reference: /packages/geo/src/coordinates/utm/parser.ts\n * Pattern: /^((?:..)?)\\s*(\\w?)\\s*(?:(\\d+(?:\\.\\d*)?)?)\\s*(?:(\\d+(?:\\.\\d*)?)?)$/i\n */\nexport const utmSegmentConfigs: SegmentConfig[] = [\n // Zone (1-60)\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 60\n pad: NUMERIC_PAD,\n },\n // Hemisphere (N or S)\n {\n type: 'directional',\n placeholder: 'N',\n allowedChars: '[NS]',\n maxLength: 1,\n pad: 0,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Easting (6-7 digits)\n {\n type: 'numeric',\n placeholder: '000000',\n allowedChars: '[0-9]',\n maxLength: 7,\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Northing (7 digits)\n {\n type: 'numeric',\n placeholder: '0000000',\n allowedChars: '[0-9]',\n maxLength: 7,\n pad: LAST_PAD,\n },\n];\n\n/**\n * Get segment configurations for a specific coordinate system\n *\n * @param format - The coordinate system format\n * @returns Array of segment configurations for the specified format\n */\nexport function getSegmentConfigs(format: CoordinateSystem): SegmentConfig[] {\n switch (format) {\n case 'dd':\n return ddSegmentConfigs;\n case 'ddm':\n return ddmSegmentConfigs;\n case 'dms':\n return dmsSegmentConfigs;\n case 'mgrs':\n return mgrsSegmentConfigs;\n case 'utm':\n return utmSegmentConfigs;\n default:\n // Default to DD format if unknown format provided\n return ddSegmentConfigs;\n }\n}\n\n/**\n * Get format description with example\n *\n * Provides a user-friendly description of the coordinate format with an example value.\n * These descriptions can be used as helper text to guide users on the expected format.\n *\n * @param format - The coordinate system format\n * @returns Description string with format example\n */\nexport function getFormatDescription(format: CoordinateSystem): string {\n switch (format) {\n case 'dd':\n return 'Example: 40.7128, -74.0060 (New York City)';\n case 'ddm':\n return \"Example: 40° 42.768' N, 74° 0.360' W (New York City)\";\n case 'dms':\n return 'Example: 40° 42\\' 46.08\" N, 74° 0\\' 21.60\" W (New York City)';\n case 'mgrs':\n return 'Example: 18T WL 80654 06346 (New York City)';\n case 'utm':\n return 'Example: 18N 585628 4511644 (New York City)';\n default:\n return '';\n }\n}\n\n/**\n * Get editable segment count for a format\n *\n * Returns the number of editable segments (excluding literal separators) for each format.\n * This is useful for initializing segment values and validation.\n *\n * @param format - The coordinate system format\n * @returns Number of editable segments\n */\nexport function getEditableSegmentCount(format: CoordinateSystem): number {\n const configs = getSegmentConfigs(format);\n return configs.filter((config) => config.type !== 'literal').length;\n}\n\n/**\n * Validate segment count for each format\n *\n * Expected editable segment counts:\n * - DD: 2 segments (lat, lon)\n * - DDM: 6 segments (lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir)\n * - DMS: 8 segments (lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir)\n * - MGRS: 5 segments (zone, band, grid, easting, northing)\n * - UTM: 4 segments (zone, hemisphere, easting, northing)\n */\nexport const EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number> = {\n dd: 2,\n ddm: 6,\n dms: 8,\n mgrs: 5,\n utm: 4,\n};\n\n/**\n * Get semantic accessibility label for a segment based on format and editable index\n *\n * Provides descriptive labels for screen readers (e.g., \"Latitude degrees\", \"Longitude minutes\")\n * to improve accessibility beyond generic \"Coordinate segment 1\" announcements.\n *\n * @param format - The coordinate system format\n * @param editableIndex - The index of the editable segment (0-based, excluding literals)\n * @returns Semantic label string for the segment\n */\nexport function getSegmentLabel(\n format: CoordinateSystem,\n editableIndex: number,\n): string {\n switch (format) {\n case 'dd':\n // DD: [lat, lon]\n return editableIndex === 0 ? 'Latitude' : 'Longitude';\n\n case 'ddm':\n // DDM: [lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir]\n switch (editableIndex) {\n case 0:\n return 'Latitude degrees';\n case 1:\n return 'Latitude minutes';\n case 2:\n return 'Latitude direction';\n case 3:\n return 'Longitude degrees';\n case 4:\n return 'Longitude minutes';\n case 5:\n return 'Longitude direction';\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n\n case 'dms':\n // DMS: [lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir]\n switch (editableIndex) {\n case 0:\n return 'Latitude degrees';\n case 1:\n return 'Latitude minutes';\n case 2:\n return 'Latitude seconds';\n case 3:\n return 'Latitude direction';\n case 4:\n return 'Longitude degrees';\n case 5:\n return 'Longitude minutes';\n case 6:\n return 'Longitude seconds';\n case 7:\n return 'Longitude direction';\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n\n case 'mgrs':\n // MGRS: [zone, band, grid, easting, northing]\n switch (editableIndex) {\n case 0:\n return 'MGRS zone';\n case 1:\n return 'MGRS band';\n case 2:\n return 'MGRS grid square';\n case 3:\n return 'MGRS easting';\n case 4:\n return 'MGRS northing';\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n\n case 'utm':\n // UTM: [zone, hemisphere, easting, northing]\n switch (editableIndex) {\n case 0:\n return 'UTM zone';\n case 1:\n return 'UTM hemisphere';\n case 2:\n return 'UTM easting';\n case 3:\n return 'UTM northing';\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAM,cAAc;;AAGpB,MAAM,WAAW;;AAGjB,MAAa,kBAAkB;;;;;;;;;;;;;AAc/B,MAAaA,mBAAoC;CAC/C;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CACD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;AAkBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;;AAoBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;;AAoBD,MAAaC,qBAAsC;CAEjD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;AAmBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;AAQD,SAAgB,kBAAkB,QAA2C;AAC3E,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QAEE,QAAO;;;;;;;;;;;;AAab,SAAgB,qBAAqB,QAAkC;AACrE,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QACE,QAAO;;;;;;;;;;;;AAab,SAAgB,wBAAwB,QAAkC;AAExE,QADgB,kBAAkB,OAAO,CAC1B,QAAQ,WAAW,OAAO,SAAS,UAAU,CAAC;;;;;;;;;;;;AAa/D,MAAaC,0BAA4D;CACvE,IAAI;CACJ,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACN;;;;;;;;;;;AAYD,SAAgB,gBACd,QACA,eACQ;AACR,SAAQ,QAAR;EACE,KAAK,KAEH,QAAO,kBAAkB,IAAI,aAAa;EAE5C,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,OAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,QACE,QAAO,sBAAsB,gBAAgB"}
|
|
1
|
+
{"version":3,"file":"segment-configs.js","names":["ddSegmentConfigs: SegmentConfig[]","ddmSegmentConfigs: SegmentConfig[]","dmsSegmentConfigs: SegmentConfig[]","mgrsSegmentConfigs: SegmentConfig[]","utmSegmentConfigs: SegmentConfig[]","EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number>"],"sources":["../../../src/components/coordinate-field/segment-configs.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Coordinate Field Segment Configurations\n *\n * This file defines the segment layouts for each supported coordinate system format.\n * Each configuration specifies the editable segments and literal separators that make up\n * the coordinate input for that format.\n *\n * Supported formats:\n * - DD (Decimal Degrees) - 2 editable segments\n * - DDM (Degrees Decimal Minutes) - 6 editable segments\n * - DMS (Degrees Minutes Seconds) - 8 editable segments\n * - MGRS (Military Grid Reference System) - 5 editable segments\n * - UTM (Universal Transverse Mercator) - 4 editable segments\n *\n * References:\n * - DD parser: /packages/geo/src/coordinates/latlon/decimal-degrees/parser.ts\n * - DDM parser: /packages/geo/src/coordinates/latlon/degrees-decimal-minutes/parser.ts\n * - DMS parser: /packages/geo/src/coordinates/latlon/degrees-minutes-seconds/parser.ts\n * - MGRS parser: /packages/geo/src/coordinates/mgrs/parser.ts\n * - UTM parser: /packages/geo/src/coordinates/utm/parser.ts\n */\n\nimport type { CoordinateSystem, SegmentConfig } from './types';\n\n/** Padding for numeric segments (0.25ch ≈ quarter character width for visual spacing) */\nconst NUMERIC_PAD = 0.25;\n\n/** Larger padding for final segment to account for container edge (0.5ch ≈ half character) */\nconst LAST_PAD = 0.8;\n\n/** The separator used for the logical field groups. */\nexport const GROUP_SEPARATOR = ', ';\n\n/**\n * DD (Decimal Degrees) Segment Configuration\n *\n * Format: [lat_deg], [lon_deg]\n * Example: 89.765432, -123.456789\n *\n * Segments:\n * - Latitude degrees: -90 to 90, allows negative sign, decimals, 0-9\n * - Longitude degrees: -180 to 180, allows negative sign, decimals, 0-9\n *\n * Total segments: 2 editable\n */\nexport const ddSegmentConfigs: SegmentConfig[] = [\n {\n type: 'numeric',\n placeholder: '00.000000',\n allowedChars: '[0-9\\\\-\\\\.]',\n maxLength: 10, // Max: -90.123456\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: GROUP_SEPARATOR,\n },\n {\n type: 'numeric',\n placeholder: '-000.000000',\n allowedChars: '[0-9\\\\-\\\\.]',\n maxLength: 11, // Max: -180.123456\n pad: LAST_PAD,\n },\n];\n\n/**\n * DDM (Degrees Decimal Minutes) Segment Configuration\n *\n * Format: [lat_deg]° [lat_min]' [lat_dir], [lon_deg]° [lon_min]' [lon_dir]\n * Example: 89° 45.9259' N, 123° 27.4073' W\n *\n * Segments:\n * - Latitude degrees: 0-90, whole number only (no decimals)\n * - Latitude minutes: 0-59.9999, decimals allowed\n * - Latitude direction: N or S\n * - Longitude degrees: 0-180, whole number only (no decimals)\n * - Longitude minutes: 0-59.9999, decimals allowed\n * - Longitude direction: E or W\n *\n * Total segments: 6 editable\n */\nexport const ddmSegmentConfigs: SegmentConfig[] = [\n // Latitude degrees\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 90\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '°',\n },\n // Latitude minutes (decimal minutes)\n {\n type: 'numeric',\n placeholder: '00.0000',\n allowedChars: '[0-9\\\\.]',\n maxLength: 7, // Max: 59.9999\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: \"'\",\n },\n // Latitude direction\n {\n type: 'directional',\n placeholder: 'N',\n allowedChars: '[NS]',\n maxLength: 1,\n pad: 0,\n },\n {\n type: 'literal',\n value: GROUP_SEPARATOR,\n },\n // Longitude degrees\n {\n type: 'numeric',\n placeholder: '000',\n allowedChars: '[0-9]',\n maxLength: 3, // Max: 180\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '°',\n },\n // Longitude minutes (decimal minutes)\n {\n type: 'numeric',\n placeholder: '00.0000',\n allowedChars: '[0-9\\\\.]',\n maxLength: 7, // Max: 59.9999\n pad: LAST_PAD,\n },\n {\n type: 'literal',\n value: \"'\",\n },\n // Longitude direction\n {\n type: 'directional',\n placeholder: 'W',\n allowedChars: '[EW]',\n maxLength: 1,\n pad: 0,\n },\n];\n\n/**\n * DMS (Degrees Minutes Seconds) Segment Configuration\n *\n * Format: [lat_deg]° [lat_min]' [lat_sec]\" [lat_dir], [lon_deg]° [lon_min]' [lon_sec]\" [lon_dir]\n * Example: 89° 45' 55.56\" N, 123° 27' 24.44\" W\n *\n * Segments:\n * - Latitude degrees: 0-90, whole number only (no decimals)\n * - Latitude minutes: 0-59, whole number only (no decimals)\n * - Latitude seconds: 0-59.999, decimals allowed\n * - Latitude direction: N or S\n * - Longitude degrees: 0-180, whole number only (no decimals)\n * - Longitude minutes: 0-59, whole number only (no decimals)\n * - Longitude seconds: 0-59.999, decimals allowed\n * - Longitude direction: E or W\n *\n * Total segments: 8 editable\n */\nexport const dmsSegmentConfigs: SegmentConfig[] = [\n // Latitude degrees\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 90\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '°',\n },\n // Latitude minutes (whole number)\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 59\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: \"'\",\n },\n // Latitude seconds (decimal seconds)\n {\n type: 'numeric',\n placeholder: '00.00',\n allowedChars: '[0-9\\\\.]',\n maxLength: 5, // Max: 59.99\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '\"',\n },\n // Latitude direction\n {\n type: 'directional',\n placeholder: 'N',\n allowedChars: '[NS]',\n maxLength: 1,\n pad: 0,\n },\n {\n type: 'literal',\n value: GROUP_SEPARATOR,\n },\n // Longitude degrees\n {\n type: 'numeric',\n placeholder: '000',\n allowedChars: '[0-9]',\n maxLength: 3, // Max: 180\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '°',\n },\n // Longitude minutes (whole number)\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 59\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: \"'\",\n },\n // Longitude seconds (decimal seconds)\n {\n type: 'numeric',\n placeholder: '00.00',\n allowedChars: '[0-9\\\\.]',\n maxLength: 5, // Max: 59.99\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: '\"',\n },\n // Longitude direction\n {\n type: 'directional',\n placeholder: 'W',\n allowedChars: '[EW]',\n maxLength: 1,\n pad: 0,\n },\n];\n\n/**\n * MGRS (Military Grid Reference System) Segment Configuration\n *\n * Format: [zone][band] [grid_100km] [easting] [northing]\n * Example: 18T WM 12345 67890\n *\n * Segments:\n * - Zone: 1-60, 2 digits\n * - Band: C-X (excluding I and O), 1 letter\n * - Grid 100km: 2 letters (A-Z excluding I and O)\n * - Easting: 5 digits (can be 1-5 based on precision)\n * - Northing: 5 digits (can be 1-5 based on precision)\n *\n * Total segments: 5 editable\n *\n * Reference: /packages/geo/src/coordinates/mgrs/parser.ts\n * Pattern: /^((?:..?)?)(\\w?)\\s*((?:\\w{2})?)\\s*(?:(\\d+(?:\\.\\d*)?)?)\\s*(?:(\\d+(?:\\.\\d*)?)?)$/i\n */\nexport const mgrsSegmentConfigs: SegmentConfig[] = [\n // Zone (1-60)\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 60\n pad: NUMERIC_PAD,\n },\n // Band (C-X, excluding I and O)\n {\n type: 'alphanumeric',\n placeholder: 'T',\n allowedChars: '[C-HJ-NP-X]', // Excludes I and O\n maxLength: 1,\n pad: 0,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Grid 100km identifier (2 letters, A-Z excluding I and O)\n {\n type: 'alphanumeric',\n placeholder: 'WM',\n allowedChars: '[A-HJ-NP-Z]', // Excludes I and O\n maxLength: 2,\n pad: 0,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Easting (5 digits, can be 1-5 based on precision)\n {\n type: 'numeric',\n placeholder: '00000',\n allowedChars: '[0-9]',\n maxLength: 5,\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Northing (5 digits, can be 1-5 based on precision)\n {\n type: 'numeric',\n placeholder: '00000',\n allowedChars: '[0-9]',\n maxLength: 5,\n pad: LAST_PAD,\n },\n];\n\n/**\n * UTM (Universal Transverse Mercator) Segment Configuration\n *\n * Format: [zone][hemisphere] [easting] [northing]\n * Example: 18N 585628 4511644\n *\n * Segments:\n * - Zone: 1-60, 2 digits\n * - Hemisphere: N or S, 1 letter\n * - Easting: 6-7 digits\n * - Northing: 7 digits\n *\n * Total segments: 4 editable\n *\n * Reference: /packages/geo/src/coordinates/utm/parser.ts\n * Pattern: /^((?:..)?)\\s*(\\w?)\\s*(?:(\\d+(?:\\.\\d*)?)?)\\s*(?:(\\d+(?:\\.\\d*)?)?)$/i\n */\nexport const utmSegmentConfigs: SegmentConfig[] = [\n // Zone (1-60)\n {\n type: 'numeric',\n placeholder: '00',\n allowedChars: '[0-9]',\n maxLength: 2, // Max: 60\n pad: NUMERIC_PAD,\n },\n // Hemisphere (N or S)\n {\n type: 'directional',\n placeholder: 'N',\n allowedChars: '[NS]',\n maxLength: 1,\n pad: 0,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Easting (6-7 digits)\n {\n type: 'numeric',\n placeholder: '000000',\n allowedChars: '[0-9]',\n maxLength: 7,\n pad: NUMERIC_PAD,\n },\n {\n type: 'literal',\n value: ' ',\n },\n // Northing (7 digits)\n {\n type: 'numeric',\n placeholder: '0000000',\n allowedChars: '[0-9]',\n maxLength: 7,\n pad: LAST_PAD,\n },\n];\n\n/**\n * Get segment configurations for a specific coordinate system\n *\n * @param format - The coordinate system format\n * @returns Array of segment configurations for the specified format\n */\nexport function getSegmentConfigs(format: CoordinateSystem): SegmentConfig[] {\n switch (format) {\n case 'dd':\n return ddSegmentConfigs;\n case 'ddm':\n return ddmSegmentConfigs;\n case 'dms':\n return dmsSegmentConfigs;\n case 'mgrs':\n return mgrsSegmentConfigs;\n case 'utm':\n return utmSegmentConfigs;\n default:\n // Default to DD format if unknown format provided\n return ddSegmentConfigs;\n }\n}\n\n/**\n * Get format description with example\n *\n * Provides a user-friendly description of the coordinate format with an example value.\n * These descriptions can be used as helper text to guide users on the expected format.\n *\n * @param format - The coordinate system format\n * @returns Description string with format example\n */\nexport function getFormatDescription(format: CoordinateSystem): string {\n switch (format) {\n case 'dd':\n return 'Example: 40.7128, -74.0060 (New York City)';\n case 'ddm':\n return \"Example: 40° 42.768' N, 74° 0.360' W (New York City)\";\n case 'dms':\n return 'Example: 40° 42\\' 46.08\" N, 74° 0\\' 21.60\" W (New York City)';\n case 'mgrs':\n return 'Example: 18T WL 80654 06346 (New York City)';\n case 'utm':\n return 'Example: 18N 585628 4511644 (New York City)';\n default:\n return '';\n }\n}\n\n/**\n * Get editable segment count for a format\n *\n * Returns the number of editable segments (excluding literal separators) for each format.\n * This is useful for initializing segment values and validation.\n *\n * @param format - The coordinate system format\n * @returns Number of editable segments\n */\nexport function getEditableSegmentCount(format: CoordinateSystem): number {\n const configs = getSegmentConfigs(format);\n return configs.filter((config) => config.type !== 'literal').length;\n}\n\n/**\n * Validate segment count for each format\n *\n * Expected editable segment counts:\n * - DD: 2 segments (lat, lon)\n * - DDM: 6 segments (lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir)\n * - DMS: 8 segments (lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir)\n * - MGRS: 5 segments (zone, band, grid, easting, northing)\n * - UTM: 4 segments (zone, hemisphere, easting, northing)\n */\nexport const EXPECTED_SEGMENT_COUNTS: Record<CoordinateSystem, number> = {\n dd: 2,\n ddm: 6,\n dms: 8,\n mgrs: 5,\n utm: 4,\n};\n\n/**\n * Get semantic accessibility label for a segment based on format and editable index\n *\n * Provides descriptive labels for screen readers (e.g., \"Latitude degrees\", \"Longitude minutes\")\n * to improve accessibility beyond generic \"Coordinate segment 1\" announcements.\n *\n * @param format - The coordinate system format\n * @param editableIndex - The index of the editable segment (0-based, excluding literals)\n * @returns Semantic label string for the segment\n */\nexport function getSegmentLabel(\n format: CoordinateSystem,\n editableIndex: number,\n): string {\n switch (format) {\n case 'dd':\n // DD: [lat, lon]\n return editableIndex === 0 ? 'Latitude' : 'Longitude';\n\n case 'ddm':\n // DDM: [lat_deg, lat_min, lat_dir, lon_deg, lon_min, lon_dir]\n switch (editableIndex) {\n case 0:\n return 'Latitude degrees';\n case 1:\n return 'Latitude minutes';\n case 2:\n return 'Latitude direction';\n case 3:\n return 'Longitude degrees';\n case 4:\n return 'Longitude minutes';\n case 5:\n return 'Longitude direction';\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n\n case 'dms':\n // DMS: [lat_deg, lat_min, lat_sec, lat_dir, lon_deg, lon_min, lon_sec, lon_dir]\n switch (editableIndex) {\n case 0:\n return 'Latitude degrees';\n case 1:\n return 'Latitude minutes';\n case 2:\n return 'Latitude seconds';\n case 3:\n return 'Latitude direction';\n case 4:\n return 'Longitude degrees';\n case 5:\n return 'Longitude minutes';\n case 6:\n return 'Longitude seconds';\n case 7:\n return 'Longitude direction';\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n\n case 'mgrs':\n // MGRS: [zone, band, grid, easting, northing]\n switch (editableIndex) {\n case 0:\n return 'MGRS zone';\n case 1:\n return 'MGRS band';\n case 2:\n return 'MGRS grid square';\n case 3:\n return 'MGRS easting';\n case 4:\n return 'MGRS northing';\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n\n case 'utm':\n // UTM: [zone, hemisphere, easting, northing]\n switch (editableIndex) {\n case 0:\n return 'UTM zone';\n case 1:\n return 'UTM hemisphere';\n case 2:\n return 'UTM easting';\n case 3:\n return 'UTM northing';\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n\n default:\n return `Coordinate segment ${editableIndex + 1}`;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAM,cAAc;;AAGpB,MAAM,WAAW;;AAGjB,MAAa,kBAAkB;;;;;;;;;;;;;AAc/B,MAAaA,mBAAoC;CAC/C;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CACD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;AAkBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;;AAoBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;;AAoBD,MAAaC,qBAAsC;CAEjD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;;;;;;;;;;;;AAmBD,MAAaC,oBAAqC;CAEhD;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACD;EACE,MAAM;EACN,OAAO;EACR;CAED;EACE,MAAM;EACN,aAAa;EACb,cAAc;EACd,WAAW;EACX,KAAK;EACN;CACF;;;;;;;AAQD,SAAgB,kBAAkB,QAA2C;AAC3E,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QAEE,QAAO;;;;;;;;;;;;AAab,SAAgB,qBAAqB,QAAkC;AACrE,SAAQ,QAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QACE,QAAO;;;;;;;;;;;;AAab,SAAgB,wBAAwB,QAAkC;AAExE,QADgB,kBAAkB,OAAO,CAC1B,QAAQ,WAAW,OAAO,SAAS,UAAU,CAAC;;;;;;;;;;;;AAa/D,MAAaC,0BAA4D;CACvE,IAAI;CACJ,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACN;;;;;;;;;;;AAYD,SAAgB,gBACd,QACA,eACQ;AACR,SAAQ,QAAR;EACE,KAAK,KAEH,QAAO,kBAAkB,IAAI,aAAa;EAE5C,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,OAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,KAAK,MAEH,SAAQ,eAAR;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO,sBAAsB,gBAAgB;;EAGnD,QACE,QAAO,sBAAsB,gBAAgB"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
import { CoordinateSegmentProps } from "./types.js";
|
|
14
14
|
import "client-only";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react_jsx_runtime49 from "react/jsx-runtime";
|
|
16
16
|
|
|
17
17
|
//#region src/components/coordinate-field/segment.d.ts
|
|
18
18
|
|
|
@@ -91,7 +91,7 @@ declare function CoordinateSegment({
|
|
|
91
91
|
onAutoRetreat,
|
|
92
92
|
pad,
|
|
93
93
|
ariaLabel
|
|
94
|
-
}: CoordinateSegmentProps):
|
|
94
|
+
}: CoordinateSegmentProps): react_jsx_runtime49.JSX.Element;
|
|
95
95
|
//#endregion
|
|
96
96
|
export { CoordinateSegment };
|
|
97
97
|
//# sourceMappingURL=segment.d.ts.map
|
|
@@ -78,6 +78,10 @@ import { jsx } from "react/jsx-runtime";
|
|
|
78
78
|
function CoordinateSegment({ value, onChange, onFocus, onBlur, onKeyDown, placeholder, maxLength, className, isDisabled, isReadOnly, allowedChars, segmentRef, segmentIndex, totalSegments: _totalSegments, onAutoAdvance, onAutoRetreat, pad, ariaLabel }) {
|
|
79
79
|
const contextState = useCoordinateFieldStateContext();
|
|
80
80
|
const effectiveIsDisabled = contextState.isDisabled ?? isDisabled;
|
|
81
|
+
const allowedCharsRegex = useMemo(() => {
|
|
82
|
+
if (!allowedChars) return null;
|
|
83
|
+
return new RegExp(`^${allowedChars}*$`, "i");
|
|
84
|
+
}, [allowedChars]);
|
|
81
85
|
const dynamicWidth = useMemo(() => {
|
|
82
86
|
if (maxLength === void 0) return;
|
|
83
87
|
const padding = pad ?? .5;
|
|
@@ -89,9 +93,7 @@ function CoordinateSegment({ value, onChange, onFocus, onBlur, onKeyDown, placeh
|
|
|
89
93
|
]);
|
|
90
94
|
const handleChange = (e) => {
|
|
91
95
|
const newValue = e.target.value;
|
|
92
|
-
if (
|
|
93
|
-
if (!(/* @__PURE__ */ new RegExp(`^${allowedChars}*$`)).test(newValue)) return;
|
|
94
|
-
}
|
|
96
|
+
if (allowedCharsRegex && !allowedCharsRegex.test(newValue)) return;
|
|
95
97
|
if (maxLength && newValue.length > maxLength) return;
|
|
96
98
|
onChange(newValue);
|
|
97
99
|
if (maxLength && newValue.length === maxLength && onAutoAdvance) {
|
|
@@ -103,11 +105,9 @@ function CoordinateSegment({ value, onChange, onFocus, onBlur, onKeyDown, placeh
|
|
|
103
105
|
};
|
|
104
106
|
const handlePaste = (e) => {
|
|
105
107
|
const pastedText = e.clipboardData.getData("text");
|
|
106
|
-
if (
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
108
|
+
if (allowedCharsRegex && !allowedCharsRegex.test(pastedText)) {
|
|
109
|
+
e.preventDefault();
|
|
110
|
+
return;
|
|
111
111
|
}
|
|
112
112
|
if (maxLength && pastedText.length > maxLength) {
|
|
113
113
|
e.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segment.js","names":[],"sources":["../../../src/components/coordinate-field/segment.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { useMemo } from 'react';\nimport { useCoordinateFieldStateContext } from './context';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';\nimport type { CoordinateSegmentProps } from './types';\n\n/**\n * CoordinateSegment - A controlled input component for a single coordinate segment\n *\n * This component represents one editable part of a coordinate (e.g., degrees, minutes, direction).\n * It handles character filtering, focus management, and keyboard navigation.\n *\n * Segment Types (determined by allowedChars):\n * - Numeric: \"[0-9\\\\-\\\\.]\" - for DD degrees, DDM/DMS degrees/minutes/seconds\n * - Directional: \"[NSEW]\" - for DDM/DMS direction indicators\n * - Alphanumeric: \"[0-9A-Z]\" - for MGRS/UTM zone identifiers\n *\n * @param props - The coordinate segment props.\n * @param props.value - Current value of the segment.\n * @param props.onChange - Callback when the segment value changes.\n * @param props.onFocus - Callback when the segment gains focus.\n * @param props.onBlur - Callback when the segment loses focus.\n * @param props.onKeyDown - Callback for key down events.\n * @param props.placeholder - Placeholder text for the segment.\n * @param props.maxLength - Maximum character length for the segment.\n * @param props.className - Additional CSS class name.\n * @param props.isDisabled - Whether the segment is disabled.\n * @param props.isReadOnly - Whether the segment is read-only.\n * @param props.allowedChars - Regex pattern for allowed characters.\n * @param props.segmentRef - Ref for the segment input element.\n * @param props.segmentIndex - Index of this segment within the coordinate field.\n * @param props.totalSegments - Total number of segments in the coordinate field.\n * @param props.onAutoAdvance - Callback to advance focus to the next segment.\n * @param props.onAutoRetreat - Callback to retreat focus to the previous segment.\n * @param props.pad - Padding value for width calculation.\n * @param props.ariaLabel - Accessible label for the segment.\n * @returns The coordinate segment input component.\n *\n * @example\n * ```tsx\n * // Numeric segment (latitude degrees)\n * <CoordinateSegment\n * value={latDegrees}\n * onChange={setLatDegrees}\n * allowedChars=\"[0-9\\\\-\\\\.]\"\n * maxLength={10}\n * placeholder=\"00.00000\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Directional segment (latitude direction)\n * <CoordinateSegment\n * value={latDir}\n * onChange={setLatDir}\n * allowedChars=\"[NS]\"\n * maxLength={1}\n * placeholder=\"N\"\n * />\n * ```\n */\nexport function CoordinateSegment({\n value,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n placeholder,\n maxLength,\n className,\n isDisabled,\n isReadOnly,\n allowedChars,\n segmentRef,\n segmentIndex,\n totalSegments: _totalSegments,\n onAutoAdvance,\n onAutoRetreat,\n pad,\n ariaLabel,\n}: CoordinateSegmentProps) {\n const contextState = useCoordinateFieldStateContext();\n\n const effectiveIsDisabled = contextState.isDisabled ?? isDisabled;\n\n // Calculate dynamic width based on focus state\n const dynamicWidth = useMemo(() => {\n if (maxLength === undefined) {\n return undefined;\n }\n\n // Default padding to 0.5 if not specified\n const padding = pad ?? 0.5;\n\n // When blurred, use value length (or maxLength if empty) + padding\n const contentLength = value.length > 0 ? value.length : maxLength;\n return contentLength + padding;\n }, [maxLength, pad, value.length]);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (
|
|
1
|
+
{"version":3,"file":"segment.js","names":[],"sources":["../../../src/components/coordinate-field/segment.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { useMemo } from 'react';\nimport { useCoordinateFieldStateContext } from './context';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';\nimport type { CoordinateSegmentProps } from './types';\n\n/**\n * CoordinateSegment - A controlled input component for a single coordinate segment\n *\n * This component represents one editable part of a coordinate (e.g., degrees, minutes, direction).\n * It handles character filtering, focus management, and keyboard navigation.\n *\n * Segment Types (determined by allowedChars):\n * - Numeric: \"[0-9\\\\-\\\\.]\" - for DD degrees, DDM/DMS degrees/minutes/seconds\n * - Directional: \"[NSEW]\" - for DDM/DMS direction indicators\n * - Alphanumeric: \"[0-9A-Z]\" - for MGRS/UTM zone identifiers\n *\n * @param props - The coordinate segment props.\n * @param props.value - Current value of the segment.\n * @param props.onChange - Callback when the segment value changes.\n * @param props.onFocus - Callback when the segment gains focus.\n * @param props.onBlur - Callback when the segment loses focus.\n * @param props.onKeyDown - Callback for key down events.\n * @param props.placeholder - Placeholder text for the segment.\n * @param props.maxLength - Maximum character length for the segment.\n * @param props.className - Additional CSS class name.\n * @param props.isDisabled - Whether the segment is disabled.\n * @param props.isReadOnly - Whether the segment is read-only.\n * @param props.allowedChars - Regex pattern for allowed characters.\n * @param props.segmentRef - Ref for the segment input element.\n * @param props.segmentIndex - Index of this segment within the coordinate field.\n * @param props.totalSegments - Total number of segments in the coordinate field.\n * @param props.onAutoAdvance - Callback to advance focus to the next segment.\n * @param props.onAutoRetreat - Callback to retreat focus to the previous segment.\n * @param props.pad - Padding value for width calculation.\n * @param props.ariaLabel - Accessible label for the segment.\n * @returns The coordinate segment input component.\n *\n * @example\n * ```tsx\n * // Numeric segment (latitude degrees)\n * <CoordinateSegment\n * value={latDegrees}\n * onChange={setLatDegrees}\n * allowedChars=\"[0-9\\\\-\\\\.]\"\n * maxLength={10}\n * placeholder=\"00.00000\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Directional segment (latitude direction)\n * <CoordinateSegment\n * value={latDir}\n * onChange={setLatDir}\n * allowedChars=\"[NS]\"\n * maxLength={1}\n * placeholder=\"N\"\n * />\n * ```\n */\nexport function CoordinateSegment({\n value,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n placeholder,\n maxLength,\n className,\n isDisabled,\n isReadOnly,\n allowedChars,\n segmentRef,\n segmentIndex,\n totalSegments: _totalSegments,\n onAutoAdvance,\n onAutoRetreat,\n pad,\n ariaLabel,\n}: CoordinateSegmentProps) {\n const contextState = useCoordinateFieldStateContext();\n\n const effectiveIsDisabled = contextState.isDisabled ?? isDisabled;\n\n const allowedCharsRegex = useMemo(() => {\n if (!allowedChars) return null;\n return new RegExp(`^${allowedChars}*$`, 'i');\n }, [allowedChars]);\n\n // Calculate dynamic width based on focus state\n const dynamicWidth = useMemo(() => {\n if (maxLength === undefined) {\n return undefined;\n }\n\n // Default padding to 0.5 if not specified\n const padding = pad ?? 0.5;\n\n // When blurred, use value length (or maxLength if empty) + padding\n const contentLength = value.length > 0 ? value.length : maxLength;\n return contentLength + padding;\n }, [maxLength, pad, value.length]);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (allowedCharsRegex && !allowedCharsRegex.test(newValue)) {\n return;\n }\n\n if (maxLength && newValue.length > maxLength) {\n return;\n }\n\n onChange(newValue);\n\n if (maxLength && newValue.length === maxLength && onAutoAdvance) {\n const timeoutId = setTimeout(() => {\n onAutoAdvance();\n }, 0);\n contextState.registerTimeout(timeoutId);\n }\n };\n\n const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n const pastedText = e.clipboardData.getData('text');\n\n if (allowedCharsRegex && !allowedCharsRegex.test(pastedText)) {\n e.preventDefault();\n return;\n }\n\n if (maxLength && pastedText.length > maxLength) {\n e.preventDefault();\n onChange(pastedText.slice(0, maxLength));\n return;\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n const input = e.currentTarget;\n const cursorAtStart = input.selectionStart === 0;\n const cursorAtEnd = input.selectionStart === value.length;\n const isEmpty = value.length === 0;\n\n if (e.key === 'Backspace' && isEmpty && onAutoRetreat) {\n e.preventDefault();\n onAutoRetreat();\n return;\n }\n\n if (e.key === 'ArrowLeft' && cursorAtStart && onAutoRetreat) {\n e.preventDefault();\n onAutoRetreat();\n return;\n }\n\n if (e.key === 'ArrowRight' && cursorAtEnd && onAutoAdvance) {\n e.preventDefault();\n onAutoAdvance();\n return;\n }\n\n onKeyDown?.(e);\n };\n\n const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n e.target.select();\n onFocus?.();\n };\n\n const handleBlur = () => {\n onBlur?.();\n };\n\n return (\n <input\n readOnly={isReadOnly}\n ref={segmentRef}\n tabIndex={isReadOnly ? -1 : 0}\n type='text'\n value={value}\n onChange={handleChange}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={placeholder}\n maxLength={maxLength}\n className={className}\n disabled={effectiveIsDisabled}\n style={dynamicWidth ? { width: `${dynamicWidth}ch` } : undefined}\n aria-label={\n ariaLabel ||\n `Coordinate segment ${segmentIndex !== undefined ? segmentIndex + 1 : ''}`\n }\n aria-disabled={effectiveIsDisabled}\n autoComplete='off'\n inputMode={\n allowedChars?.includes('0-9')\n ? allowedChars.includes('\\\\-\\\\.')\n ? 'decimal'\n : 'numeric'\n : 'text'\n }\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,SAAgB,kBAAkB,EAChC,OACA,UACA,SACA,QACA,WACA,aACA,WACA,WACA,YACA,YACA,cACA,YACA,cACA,eAAe,gBACf,eACA,eACA,KACA,aACyB;CACzB,MAAM,eAAe,gCAAgC;CAErD,MAAM,sBAAsB,aAAa,cAAc;CAEvD,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,aAAc,QAAO;AAC1B,SAAO,IAAI,OAAO,IAAI,aAAa,KAAK,IAAI;IAC3C,CAAC,aAAa,CAAC;CAGlB,MAAM,eAAe,cAAc;AACjC,MAAI,cAAc,OAChB;EAIF,MAAM,UAAU,OAAO;AAIvB,UADsB,MAAM,SAAS,IAAI,MAAM,SAAS,aACjC;IACtB;EAAC;EAAW;EAAK,MAAM;EAAO,CAAC;CAElC,MAAM,gBAAgB,MAAqC;EACzD,MAAM,WAAW,EAAE,OAAO;AAE1B,MAAI,qBAAqB,CAAC,kBAAkB,KAAK,SAAS,CACxD;AAGF,MAAI,aAAa,SAAS,SAAS,UACjC;AAGF,WAAS,SAAS;AAElB,MAAI,aAAa,SAAS,WAAW,aAAa,eAAe;GAC/D,MAAM,YAAY,iBAAiB;AACjC,mBAAe;MACd,EAAE;AACL,gBAAa,gBAAgB,UAAU;;;CAI3C,MAAM,eAAe,MAA8C;EACjE,MAAM,aAAa,EAAE,cAAc,QAAQ,OAAO;AAElD,MAAI,qBAAqB,CAAC,kBAAkB,KAAK,WAAW,EAAE;AAC5D,KAAE,gBAAgB;AAClB;;AAGF,MAAI,aAAa,WAAW,SAAS,WAAW;AAC9C,KAAE,gBAAgB;AAClB,YAAS,WAAW,MAAM,GAAG,UAAU,CAAC;AACxC;;;CAIJ,MAAM,iBAAiB,MAAuC;EAC5D,MAAM,QAAQ,EAAE;EAChB,MAAM,gBAAgB,MAAM,mBAAmB;EAC/C,MAAM,cAAc,MAAM,mBAAmB,MAAM;EACnD,MAAM,UAAU,MAAM,WAAW;AAEjC,MAAI,EAAE,QAAQ,eAAe,WAAW,eAAe;AACrD,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,MAAI,EAAE,QAAQ,eAAe,iBAAiB,eAAe;AAC3D,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,MAAI,EAAE,QAAQ,gBAAgB,eAAe,eAAe;AAC1D,KAAE,gBAAgB;AAClB,kBAAe;AACf;;AAGF,cAAY,EAAE;;CAGhB,MAAM,eAAe,MAAoC;AACvD,IAAE,OAAO,QAAQ;AACjB,aAAW;;CAGb,MAAM,mBAAmB;AACvB,YAAU;;AAGZ,QACE,oBAAC;EACC,UAAU;EACV,KAAK;EACL,UAAU,aAAa,KAAK;EAC5B,MAAK;EACE;EACP,UAAU;EACV,SAAS;EACT,WAAW;EACX,SAAS;EACT,QAAQ;EACK;EACF;EACA;EACX,UAAU;EACV,OAAO,eAAe,EAAE,OAAO,GAAG,aAAa,KAAK,GAAG;EACvD,cACE,aACA,sBAAsB,iBAAiB,SAAY,eAAe,IAAI;EAExE,iBAAe;EACf,cAAa;EACb,WACE,cAAc,SAAS,MAAM,GACzB,aAAa,SAAS,SAAS,GAC7B,YACA,YACF;GAEN"}
|
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
min-width: var(--min-width, unset);
|
|
24
24
|
|
|
25
25
|
@variant group-size-medium/coordinate-field {
|
|
26
|
-
@apply text-body-
|
|
26
|
+
@apply text-body-s;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
@variant group-size-small/coordinate-field {
|
|
30
|
-
@apply text-body-
|
|
30
|
+
@apply text-body-xs;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
@variant group-disabled/coordinate-field {
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
.segment {
|
|
67
|
-
@apply shrink-0 text-right transition-[width] duration-150 ease-in-out outline-none;
|
|
67
|
+
@apply shrink-0 text-right uppercase transition-[width] duration-150 ease-in-out outline-none;
|
|
68
68
|
|
|
69
69
|
@variant placeholder-shown {
|
|
70
70
|
@apply fg-primary-muted;
|
|
@@ -143,6 +143,10 @@
|
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
@layer components.l2 {
|
|
146
|
+
.formatButton {
|
|
147
|
+
@apply py-0;
|
|
148
|
+
}
|
|
149
|
+
|
|
146
150
|
.formatOptions {
|
|
147
151
|
@apply mb-m gap-xs flex flex-col;
|
|
148
152
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
import { DateFieldProps } from "./types.js";
|
|
14
14
|
import "client-only";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react_jsx_runtime51 from "react/jsx-runtime";
|
|
16
16
|
import { DateValue } from "@internationalized/date";
|
|
17
17
|
|
|
18
18
|
//#region src/components/date-field/index.d.ts
|
|
@@ -100,7 +100,7 @@ declare function DateField<T extends DateValue>({
|
|
|
100
100
|
isRequired,
|
|
101
101
|
isReadOnly,
|
|
102
102
|
...rest
|
|
103
|
-
}: DateFieldProps<T>):
|
|
103
|
+
}: DateFieldProps<T>): react_jsx_runtime51.JSX.Element;
|
|
104
104
|
//#endregion
|
|
105
105
|
export { DateField };
|
|
106
106
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import { DeferredCollectionProps } from "./types.js";
|
|
14
|
-
import * as
|
|
14
|
+
import * as react_jsx_runtime52 from "react/jsx-runtime";
|
|
15
15
|
|
|
16
16
|
//#region src/components/deferred-collection/index.d.ts
|
|
17
17
|
|
|
@@ -45,7 +45,7 @@ declare function DeferredCollection({
|
|
|
45
45
|
children,
|
|
46
46
|
fallback,
|
|
47
47
|
deferFrames
|
|
48
|
-
}: DeferredCollectionProps):
|
|
48
|
+
}: DeferredCollectionProps): react_jsx_runtime52.JSX.Element;
|
|
49
49
|
//#endregion
|
|
50
50
|
export { DeferredCollection, type DeferredCollectionProps };
|
|
51
51
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -13,15 +13,15 @@
|
|
|
13
13
|
import { ProviderProps } from "../../lib/types.js";
|
|
14
14
|
import { DetailsListProps } from "./types.js";
|
|
15
15
|
import "client-only";
|
|
16
|
-
import * as
|
|
16
|
+
import * as react15 from "react";
|
|
17
17
|
import { ContextValue } from "react-aria-components";
|
|
18
|
-
import * as
|
|
18
|
+
import * as react_jsx_runtime53 from "react/jsx-runtime";
|
|
19
19
|
|
|
20
20
|
//#region src/components/details-list/context.d.ts
|
|
21
21
|
/**
|
|
22
22
|
* Context for sharing DetailsList props across component tree.
|
|
23
23
|
*/
|
|
24
|
-
declare const DetailsListContext:
|
|
24
|
+
declare const DetailsListContext: react15.Context<ContextValue<DetailsListProps, HTMLDListElement>>;
|
|
25
25
|
/**
|
|
26
26
|
* DetailsListProvider - Context provider for setting default DetailsList props.
|
|
27
27
|
*
|
|
@@ -43,7 +43,7 @@ declare const DetailsListContext: react17.Context<ContextValue<DetailsListProps,
|
|
|
43
43
|
declare function DetailsListProvider({
|
|
44
44
|
children,
|
|
45
45
|
...props
|
|
46
|
-
}: ProviderProps<DetailsListProps>):
|
|
46
|
+
}: ProviderProps<DetailsListProps>): react_jsx_runtime53.JSX.Element;
|
|
47
47
|
//#endregion
|
|
48
48
|
export { DetailsListContext, DetailsListProvider };
|
|
49
49
|
//# sourceMappingURL=context.d.ts.map
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
import { DetailsListProps } from "./types.js";
|
|
14
14
|
import "client-only";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react_jsx_runtime55 from "react/jsx-runtime";
|
|
16
16
|
|
|
17
17
|
//#region src/components/details-list/index.d.ts
|
|
18
18
|
|
|
@@ -55,7 +55,7 @@ import * as react_jsx_runtime45 from "react/jsx-runtime";
|
|
|
55
55
|
declare function DetailsList({
|
|
56
56
|
ref,
|
|
57
57
|
...props
|
|
58
|
-
}: DetailsListProps):
|
|
58
|
+
}: DetailsListProps): react_jsx_runtime55.JSX.Element;
|
|
59
59
|
//#endregion
|
|
60
60
|
export { DetailsList };
|
|
61
61
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
import { DetailsListLabelProps } from "./types.js";
|
|
14
14
|
import "client-only";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react_jsx_runtime54 from "react/jsx-runtime";
|
|
16
16
|
|
|
17
17
|
//#region src/components/details-list/label.d.ts
|
|
18
18
|
/**
|
|
@@ -31,7 +31,7 @@ import * as react_jsx_runtime46 from "react/jsx-runtime";
|
|
|
31
31
|
* </DetailsList>
|
|
32
32
|
* ```
|
|
33
33
|
*/
|
|
34
|
-
declare function DetailsListLabel(props: DetailsListLabelProps):
|
|
34
|
+
declare function DetailsListLabel(props: DetailsListLabelProps): react_jsx_runtime54.JSX.Element;
|
|
35
35
|
//#endregion
|
|
36
36
|
export { DetailsListLabel };
|
|
37
37
|
//# sourceMappingURL=label.d.ts.map
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
import { DetailsListValueProps } from "./types.js";
|
|
14
14
|
import "client-only";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react_jsx_runtime17 from "react/jsx-runtime";
|
|
16
16
|
|
|
17
17
|
//#region src/components/details-list/value.d.ts
|
|
18
18
|
|
|
@@ -33,7 +33,7 @@ import * as react_jsx_runtime27 from "react/jsx-runtime";
|
|
|
33
33
|
* </DetailsList>
|
|
34
34
|
* ```
|
|
35
35
|
*/
|
|
36
|
-
declare function DetailsListValue(props: DetailsListValueProps):
|
|
36
|
+
declare function DetailsListValue(props: DetailsListValueProps): react_jsx_runtime17.JSX.Element;
|
|
37
37
|
//#endregion
|
|
38
38
|
export { DetailsListValue };
|
|
39
39
|
//# sourceMappingURL=value.d.ts.map
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
import "client-only";
|
|
14
14
|
import { ComponentProps } from "react";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react_jsx_runtime56 from "react/jsx-runtime";
|
|
16
16
|
|
|
17
17
|
//#region src/components/dialog/content.d.ts
|
|
18
18
|
|
|
@@ -39,7 +39,7 @@ import * as react_jsx_runtime29 from "react/jsx-runtime";
|
|
|
39
39
|
declare function DialogContent({
|
|
40
40
|
children,
|
|
41
41
|
className
|
|
42
|
-
}: ComponentProps<'div'>):
|
|
42
|
+
}: ComponentProps<'div'>): react_jsx_runtime56.JSX.Element;
|
|
43
43
|
//#endregion
|
|
44
44
|
export { DialogContent };
|
|
45
45
|
//# sourceMappingURL=content.d.ts.map
|
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
|
|
13
13
|
import { DialogProps as DialogProps$1 } from "./types.js";
|
|
14
14
|
import "client-only";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react16 from "react";
|
|
16
16
|
import { ContextValue } from "react-aria-components";
|
|
17
17
|
|
|
18
18
|
//#region src/components/dialog/context.d.ts
|
|
19
19
|
/**
|
|
20
20
|
* Context for sharing Dialog props across component tree.
|
|
21
21
|
*/
|
|
22
|
-
declare const DialogContext:
|
|
22
|
+
declare const DialogContext: react16.Context<ContextValue<DialogProps$1, HTMLDivElement>>;
|
|
23
23
|
//#endregion
|
|
24
24
|
export { DialogContext };
|
|
25
25
|
//# sourceMappingURL=context.d.ts.map
|