@salt-ds/lab 1.0.0-alpha.57 → 1.0.0-alpha.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +232 -0
- package/css/salt-lab.css +216 -143
- package/dist-cjs/date-picker/DatePicker.js +3 -2
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +5 -2
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/index.js +4 -6
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/skip-link/SkipLink.css.js +1 -1
- package/dist-cjs/skip-link/SkipLink.js +25 -8
- package/dist-cjs/skip-link/SkipLink.js.map +1 -1
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +54 -37
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-cjs/stepped-tracker/Step.Connector.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.Connector.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Connector.js +21 -0
- package/dist-cjs/stepped-tracker/Step.Connector.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Description.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.Description.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Description.js +35 -0
- package/dist-cjs/stepped-tracker/Step.Description.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.ExpandTrigger.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.ExpandTrigger.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.ExpandTrigger.js +38 -0
- package/dist-cjs/stepped-tracker/Step.ExpandTrigger.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Icon.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.Icon.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Icon.js +57 -0
- package/dist-cjs/stepped-tracker/Step.Icon.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Label.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.Label.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Label.js +37 -0
- package/dist-cjs/stepped-tracker/Step.Label.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.SROnly.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.SROnly.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.SROnly.js +21 -0
- package/dist-cjs/stepped-tracker/Step.SROnly.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.js +161 -0
- package/dist-cjs/stepped-tracker/Step.js.map +1 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.Provider.js +19 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.Provider.js.map +1 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.css.js +1 -1
- package/dist-cjs/stepped-tracker/SteppedTracker.js +10 -33
- package/dist-cjs/stepped-tracker/SteppedTracker.js.map +1 -1
- package/dist-cjs/stepped-tracker/stepReducer.js +109 -0
- package/dist-cjs/stepped-tracker/stepReducer.js.map +1 -0
- package/dist-cjs/stepped-tracker/useStepReducer.js +16 -0
- package/dist-cjs/stepped-tracker/useStepReducer.js.map +1 -0
- package/dist-cjs/stepped-tracker/utils.js +86 -0
- package/dist-cjs/stepped-tracker/utils.js.map +1 -0
- package/dist-es/date-picker/DatePicker.js +3 -2
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +5 -2
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/index.js +2 -3
- package/dist-es/index.js.map +1 -1
- package/dist-es/skip-link/SkipLink.css.js +1 -1
- package/dist-es/skip-link/SkipLink.js +27 -10
- package/dist-es/skip-link/SkipLink.js.map +1 -1
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js +55 -38
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-es/stepped-tracker/Step.Connector.css.js +4 -0
- package/dist-es/stepped-tracker/Step.Connector.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Connector.js +19 -0
- package/dist-es/stepped-tracker/Step.Connector.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Description.css.js +4 -0
- package/dist-es/stepped-tracker/Step.Description.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Description.js +33 -0
- package/dist-es/stepped-tracker/Step.Description.js.map +1 -0
- package/dist-es/stepped-tracker/Step.ExpandTrigger.css.js +4 -0
- package/dist-es/stepped-tracker/Step.ExpandTrigger.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.ExpandTrigger.js +36 -0
- package/dist-es/stepped-tracker/Step.ExpandTrigger.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Icon.css.js +4 -0
- package/dist-es/stepped-tracker/Step.Icon.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Icon.js +55 -0
- package/dist-es/stepped-tracker/Step.Icon.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Label.css.js +4 -0
- package/dist-es/stepped-tracker/Step.Label.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Label.js +35 -0
- package/dist-es/stepped-tracker/Step.Label.js.map +1 -0
- package/dist-es/stepped-tracker/Step.SROnly.css.js +4 -0
- package/dist-es/stepped-tracker/Step.SROnly.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.SROnly.js +19 -0
- package/dist-es/stepped-tracker/Step.SROnly.js.map +1 -0
- package/dist-es/stepped-tracker/Step.css.js +4 -0
- package/dist-es/stepped-tracker/Step.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.js +159 -0
- package/dist-es/stepped-tracker/Step.js.map +1 -0
- package/dist-es/stepped-tracker/SteppedTracker.Provider.js +15 -0
- package/dist-es/stepped-tracker/SteppedTracker.Provider.js.map +1 -0
- package/dist-es/stepped-tracker/SteppedTracker.css.js +1 -1
- package/dist-es/stepped-tracker/SteppedTracker.js +11 -34
- package/dist-es/stepped-tracker/SteppedTracker.js.map +1 -1
- package/dist-es/stepped-tracker/stepReducer.js +107 -0
- package/dist-es/stepped-tracker/stepReducer.js.map +1 -0
- package/dist-es/stepped-tracker/useStepReducer.js +14 -0
- package/dist-es/stepped-tracker/useStepReducer.js.map +1 -0
- package/dist-es/stepped-tracker/utils.js +80 -0
- package/dist-es/stepped-tracker/utils.js.map +1 -0
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +4 -0
- package/dist-types/skip-link/SkipLink.d.ts +6 -11
- package/dist-types/skip-link/index.d.ts +0 -1
- package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +13 -8
- package/dist-types/stepped-tracker/Step.Connector.d.ts +1 -0
- package/dist-types/stepped-tracker/Step.Description.d.ts +4 -0
- package/dist-types/stepped-tracker/Step.ExpandTrigger.d.ts +5 -0
- package/dist-types/stepped-tracker/Step.Icon.d.ts +8 -0
- package/dist-types/stepped-tracker/Step.Label.d.ts +4 -0
- package/dist-types/stepped-tracker/Step.SROnly.d.ts +5 -0
- package/dist-types/stepped-tracker/Step.d.ts +2 -0
- package/dist-types/stepped-tracker/Step.types.d.ts +21 -0
- package/dist-types/stepped-tracker/SteppedTracker.Provider.d.ts +9 -0
- package/dist-types/stepped-tracker/SteppedTracker.d.ts +2 -16
- package/dist-types/stepped-tracker/SteppedTracker.types.d.ts +6 -0
- package/dist-types/stepped-tracker/index.d.ts +5 -2
- package/dist-types/stepped-tracker/stepReducer.d.ts +2 -0
- package/dist-types/stepped-tracker/stepReducer.types.d.ts +25 -0
- package/dist-types/stepped-tracker/useStepReducer.d.ts +3 -0
- package/dist-types/stepped-tracker/utils.d.ts +7 -0
- package/package.json +14 -12
- package/dist-cjs/skip-link/SkipLinks.css.js +0 -6
- package/dist-cjs/skip-link/SkipLinks.css.js.map +0 -1
- package/dist-cjs/skip-link/SkipLinks.js +0 -24
- package/dist-cjs/skip-link/SkipLinks.js.map +0 -1
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js +0 -6
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js.map +0 -1
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js +0 -25
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js.map +0 -1
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js +0 -43
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js +0 -6
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.js +0 -22
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js +0 -6
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +0 -96
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +0 -1
- package/dist-es/skip-link/SkipLinks.css.js +0 -4
- package/dist-es/skip-link/SkipLinks.css.js.map +0 -1
- package/dist-es/skip-link/SkipLinks.js +0 -22
- package/dist-es/skip-link/SkipLinks.js.map +0 -1
- package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js +0 -4
- package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js.map +0 -1
- package/dist-es/stepped-tracker/StepLabel/StepLabel.js +0 -23
- package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map +0 -1
- package/dist-es/stepped-tracker/SteppedTrackerContext.js +0 -38
- package/dist-es/stepped-tracker/SteppedTrackerContext.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js +0 -4
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.js +0 -20
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js +0 -4
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +0 -94
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +0 -1
- package/dist-types/skip-link/SkipLinks.d.ts +0 -2
- package/dist-types/stepped-tracker/StepLabel/StepLabel.d.ts +0 -9
- package/dist-types/stepped-tracker/StepLabel/index.d.ts +0 -1
- package/dist-types/stepped-tracker/SteppedTrackerContext.d.ts +0 -18
- package/dist-types/stepped-tracker/TrackerConnector/TrackerConnector.d.ts +0 -9
- package/dist-types/stepped-tracker/TrackerConnector/index.d.ts +0 -1
- package/dist-types/stepped-tracker/TrackerStep/TrackerStep.d.ts +0 -18
- package/dist-types/stepped-tracker/TrackerStep/index.d.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type ReactNode, forwardRef } from \"react\";\nimport {\n DateRangeSelectionContext,\n type RangeDatePickerState,\n type SingleDatePickerState,\n SingleDateSelectionContext,\n} from \"./DatePickerContext\";\nimport { DatePickerOverlayProvider } from \"./DatePickerOverlayProvider\";\nimport {\n type UseDatePickerRangeProps,\n type UseDatePickerSingleProps,\n useDatePicker,\n} from \"./useDatePicker\";\n\n/**\n * Base props for DatePicker.\n */\nexport interface DatePickerBaseProps {\n className?: string;\n children?: ReactNode;\n /** the open/close state of the overlay. The open/close state will be controlled when this prop is provided. */\n open?: boolean;\n /**\n * Handler for when open state changes\n * @param newOpen - true when opened\n */\n onOpen?: (newOpen: boolean) => void;\n /**\n * the initial open/close state of the overlay, when the open/close state is un-controlled.\n */\n defaultOpen?: DatePickerBaseProps[\"open\"];\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `single`.\n * @template T\n */\nexport interface DatePickerSingleProps<TDate extends DateFrameworkType>\n extends DatePickerBaseProps,\n UseDatePickerSingleProps<TDate> {\n selectionVariant: \"single\";\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `range`.\n * @template T\n */\nexport interface DatePickerRangeProps<TDate extends DateFrameworkType>\n extends DatePickerBaseProps,\n UseDatePickerRangeProps<TDate> {\n selectionVariant: \"range\";\n}\n\n/**\n * Props for the DatePicker component.\n * @template T\n */\nexport type DatePickerProps<TDate extends DateFrameworkType> =\n | DatePickerSingleProps<TDate>\n | DatePickerRangeProps<TDate>;\n\nexport const DatePickerMain = forwardRef<HTMLDivElement, DatePickerProps<any>>(\n <TDate extends DateFrameworkType>(\n props: DatePickerProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const {\n children,\n readOnly,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate,\n onSelectionChange,\n onApply,\n minDate,\n maxDate,\n onCancel,\n ...rest\n } = props;\n // biome-ignore lint/suspicious/noExplicitAny: type guard\n const useDatePickerProps: any = {\n readOnly,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate,\n onSelectionChange,\n onApply,\n minDate,\n maxDate,\n onCancel,\n };\n\n if (props.selectionVariant === \"range\") {\n const stateAndHelpers = useDatePicker<TDate, \"range\">(\n useDatePickerProps,\n ref,\n ) as RangeDatePickerState<TDate>;\n return (\n <DateRangeSelectionContext.Provider value={stateAndHelpers}>\n <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n {children}\n </div>\n </DateRangeSelectionContext.Provider>\n );\n }\n const stateAndHelpers = useDatePicker(\n useDatePickerProps,\n ref,\n ) as SingleDatePickerState<TDate>;\n\n return (\n <SingleDateSelectionContext.Provider value={stateAndHelpers}>\n <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n {children}\n </div>\n </SingleDateSelectionContext.Provider>\n );\n },\n);\n\nexport const DatePicker = forwardRef(function DatePicker<\n TDate extends DateFrameworkType,\n>(props: DatePickerProps<TDate>, ref: React.Ref<HTMLDivElement>) {\n const { open, defaultOpen, onOpen, ...rest } = props;\n\n return (\n <DatePickerOverlayProvider\n open={open}\n defaultOpen={defaultOpen}\n onOpen={onOpen}\n >\n <DatePickerMain {...rest} ref={ref} />\n </DatePickerOverlayProvider>\n );\n});\n"],"names":["forwardRef","stateAndHelpers","useDatePicker","DateRangeSelectionContext","SingleDateSelectionContext","jsx","DatePicker","DatePickerOverlayProvider"],"mappings":";;;;;;;;AA8DO,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,CACE,OACA,GACG,KAAA;AAlEP,IAAA,IAAA,EAAA,EAAA,EAAA;AAmEI,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,kBAA0B,GAAA;AAAA,MAC9B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAI,IAAA,KAAA,CAAM,qBAAqB,OAAS,EAAA;AACtC,MAAA,MAAMC,gBAAkB,GAAAC,2BAAA;AAAA,QACtB,kBAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,sCACGC,2CAA0B,CAAA,QAAA,EAA1B,EAAmC,KAAOF,EAAAA,gBAAAA,EACzC,yCAAC,KAAI,EAAA,EAAA,GAAA,EAAA,CAAK,KAAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,iBAAiB,KAAjB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAwB,cAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGJ,IAAA,MAAM,eAAkB,GAAAC,2BAAA;AAAA,MACtB,kBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,sCACGE,4CAA2B,CAAA,QAAA,EAA3B,EAAoC,KAAA,EAAO,iBAC1C,QAAC,kBAAAC,cAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,CAAA,EAAA,GAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,UAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA,EAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGN;AAEO,MAAM,UAAa,GAAAL,gBAAA,CAAW,SAASM,WAAAA,CAE5C,OAA+B,GAAgC,EAAA;AAC/D,EAAA,MAAM,EAAE,IAAM,EAAA,WAAA,EAAa,
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type ReactNode, forwardRef } from \"react\";\nimport {\n DateRangeSelectionContext,\n type RangeDatePickerState,\n type SingleDatePickerState,\n SingleDateSelectionContext,\n} from \"./DatePickerContext\";\nimport { DatePickerOverlayProvider } from \"./DatePickerOverlayProvider\";\nimport {\n type UseDatePickerRangeProps,\n type UseDatePickerSingleProps,\n useDatePicker,\n} from \"./useDatePicker\";\n\n/**\n * Base props for DatePicker.\n */\nexport interface DatePickerBaseProps {\n className?: string;\n children?: ReactNode;\n /** the open/close state of the overlay. The open/close state will be controlled when this prop is provided. */\n open?: boolean;\n /**\n * Handler for when open state changes\n * @param newOpen - true when opened\n */\n onOpen?: (newOpen: boolean) => void;\n /**\n * the initial open/close state of the overlay, when the open/close state is un-controlled.\n */\n defaultOpen?: DatePickerBaseProps[\"open\"];\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `single`.\n * @template T\n */\nexport interface DatePickerSingleProps<TDate extends DateFrameworkType>\n extends DatePickerBaseProps,\n UseDatePickerSingleProps<TDate> {\n selectionVariant: \"single\";\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `range`.\n * @template T\n */\nexport interface DatePickerRangeProps<TDate extends DateFrameworkType>\n extends DatePickerBaseProps,\n UseDatePickerRangeProps<TDate> {\n selectionVariant: \"range\";\n}\n\n/**\n * Props for the DatePicker component.\n * @template T\n */\nexport type DatePickerProps<TDate extends DateFrameworkType> =\n | DatePickerSingleProps<TDate>\n | DatePickerRangeProps<TDate>;\n\nexport const DatePickerMain = forwardRef<HTMLDivElement, DatePickerProps<any>>(\n <TDate extends DateFrameworkType>(\n props: DatePickerProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const {\n children,\n readOnly,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate,\n onSelectionChange,\n onApply,\n minDate,\n maxDate,\n onCancel,\n ...rest\n } = props;\n // biome-ignore lint/suspicious/noExplicitAny: type guard\n const useDatePickerProps: any = {\n readOnly,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate,\n onSelectionChange,\n onApply,\n minDate,\n maxDate,\n onCancel,\n };\n\n if (props.selectionVariant === \"range\") {\n const stateAndHelpers = useDatePicker<TDate, \"range\">(\n useDatePickerProps,\n ref,\n ) as RangeDatePickerState<TDate>;\n return (\n <DateRangeSelectionContext.Provider value={stateAndHelpers}>\n <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n {children}\n </div>\n </DateRangeSelectionContext.Provider>\n );\n }\n const stateAndHelpers = useDatePicker(\n useDatePickerProps,\n ref,\n ) as SingleDatePickerState<TDate>;\n\n return (\n <SingleDateSelectionContext.Provider value={stateAndHelpers}>\n <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n {children}\n </div>\n </SingleDateSelectionContext.Provider>\n );\n },\n);\n\nexport const DatePicker = forwardRef(function DatePicker<\n TDate extends DateFrameworkType,\n>(props: DatePickerProps<TDate>, ref: React.Ref<HTMLDivElement>) {\n const { open, defaultOpen, onOpen, readOnly, ...rest } = props;\n\n return (\n <DatePickerOverlayProvider\n open={open}\n defaultOpen={defaultOpen}\n onOpen={onOpen}\n readOnly={readOnly}\n >\n <DatePickerMain {...rest} readOnly={readOnly} ref={ref} />\n </DatePickerOverlayProvider>\n );\n});\n"],"names":["forwardRef","stateAndHelpers","useDatePicker","DateRangeSelectionContext","SingleDateSelectionContext","jsx","DatePicker","DatePickerOverlayProvider"],"mappings":";;;;;;;;AA8DO,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,CACE,OACA,GACG,KAAA;AAlEP,IAAA,IAAA,EAAA,EAAA,EAAA;AAmEI,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,kBAA0B,GAAA;AAAA,MAC9B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAI,IAAA,KAAA,CAAM,qBAAqB,OAAS,EAAA;AACtC,MAAA,MAAMC,gBAAkB,GAAAC,2BAAA;AAAA,QACtB,kBAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,sCACGC,2CAA0B,CAAA,QAAA,EAA1B,EAAmC,KAAOF,EAAAA,gBAAAA,EACzC,yCAAC,KAAI,EAAA,EAAA,GAAA,EAAA,CAAK,KAAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,iBAAiB,KAAjB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAwB,cAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGJ,IAAA,MAAM,eAAkB,GAAAC,2BAAA;AAAA,MACtB,kBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,sCACGE,4CAA2B,CAAA,QAAA,EAA3B,EAAoC,KAAA,EAAO,iBAC1C,QAAC,kBAAAC,cAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,CAAA,EAAA,GAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,UAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA,EAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGN;AAEO,MAAM,UAAa,GAAAL,gBAAA,CAAW,SAASM,WAAAA,CAE5C,OAA+B,GAAgC,EAAA;AAC/D,EAAA,MAAM,EAAE,IAAM,EAAA,WAAA,EAAa,QAAQ,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,EACE,uBAAAD,cAAA;AAAA,IAACE,mDAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MAEA,QAAC,kBAAAF,cAAA,CAAA,cAAA,EAAA,EAAgB,GAAG,IAAA,EAAM,UAAoB,GAAU,EAAA;AAAA;AAAA,GAC1D;AAEJ,CAAC;;;;;"}
|
|
@@ -6,7 +6,7 @@ var core = require('@salt-ds/core');
|
|
|
6
6
|
var react = require('react');
|
|
7
7
|
|
|
8
8
|
const DatePickerOverlayContext = core.createContext("DatePickerOverlayContext", void 0);
|
|
9
|
-
const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, onOpen, children }) => {
|
|
9
|
+
const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, onOpen, children, readOnly }) => {
|
|
10
10
|
const [open, setOpenState] = core.useControlled({
|
|
11
11
|
controlled: openProp,
|
|
12
12
|
default: Boolean(defaultOpen),
|
|
@@ -33,6 +33,9 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, onOpen, childr
|
|
|
33
33
|
(newOpen, _event, reason) => {
|
|
34
34
|
var _a;
|
|
35
35
|
if (newOpen) {
|
|
36
|
+
if (readOnly) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
36
39
|
triggeringElement.current = document.activeElement;
|
|
37
40
|
}
|
|
38
41
|
setOpenState(newOpen);
|
|
@@ -41,7 +44,7 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, onOpen, childr
|
|
|
41
44
|
(_a = onDismissCallback == null ? void 0 : onDismissCallback.current) == null ? void 0 : _a.call(onDismissCallback);
|
|
42
45
|
}
|
|
43
46
|
},
|
|
44
|
-
[onOpen]
|
|
47
|
+
[onOpen, readOnly]
|
|
45
48
|
);
|
|
46
49
|
const floatingUIResult = core.useFloatingUI({
|
|
47
50
|
open,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerOverlayProvider.js","sources":["../src/date-picker/DatePickerOverlayProvider.tsx"],"sourcesContent":["import {\n type OpenChangeReason,\n flip,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { createContext, useControlled, useFloatingUI } from \"@salt-ds/core\";\nimport {\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\n\n/**\n * Interface representing the state for a DatePicker overlay.\n */\ninterface DatePickerOverlayState {\n /**\n * If `true`, the overlay is open.\n */\n open: boolean;\n /**\n * The result of the floating UI calculations.\n */\n floatingUIResult: ReturnType<typeof useFloatingUI>;\n}\n\n/**\n * Interface representing the helper functions for a DatePicker overlay.\n */\ninterface DatePickerOverlayHelpers {\n /**\n * Function to get the props for the floating element.\n */\n getFloatingProps: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n /**\n * Function to get the props for the reference element.\n */\n getReferenceProps: ReturnType<typeof useInteractions>[\"getReferenceProps\"];\n /**\n * Sets the open state of the overlay.\n * @param newOpen - The new value for the open state.\n */\n setOpen: (newOpen: boolean) => void;\n /**~\n * Register a callback for when onDismiss is called\n * @param onDismissCallback\n */\n setOnDismiss: (onDismissCallback: () => void) => void;\n}\n\n/**\n * Interface representing the context type for a DatePicker overlay.\n */\ninterface DatePickerOverlayContextType {\n /**\n * The state of the DatePicker overlay.\n */\n state: DatePickerOverlayState;\n /**\n * The helper functions for the DatePicker overlay.\n */\n helpers: DatePickerOverlayHelpers;\n}\n\n/**\n * Context for the DatePicker overlay.\n */\nconst DatePickerOverlayContext = createContext<\n DatePickerOverlayContextType | undefined\n>(\"DatePickerOverlayContext\", undefined);\n\n/**\n * Props for the DatePickerOverlayProvider component.\n */\ninterface DatePickerOverlayProviderProps {\n /**\n * If `true`, the overlay is open.\n */\n open?: boolean;\n /**\n * Handler for when open state changes\n * @param newOpen - true when opened\n */\n onOpen?: (newOpen: boolean) => void;\n /**\n * The default open state of the overlay.\n */\n defaultOpen?: boolean;\n /**\n * The content to be rendered inside the overlay provider.\n */\n children: ReactNode;\n}\n\nexport const DatePickerOverlayProvider: React.FC<\n DatePickerOverlayProviderProps\n> = ({ open: openProp, defaultOpen, onOpen, children }) => {\n const [open, setOpenState] = useControlled({\n controlled: openProp,\n default: Boolean(defaultOpen),\n name: \"DatePicker\",\n state: \"openDatePickerOverlay\",\n });\n const triggeringElement = useRef<HTMLElement | null>(null);\n const onDismissCallback = useRef<() => void>();\n\n useEffect(() => {\n if (!open) {\n const trigger = triggeringElement.current as HTMLElement;\n if (trigger) {\n trigger.focus();\n }\n if (trigger instanceof HTMLInputElement) {\n setTimeout(() => {\n trigger.setSelectionRange(0, trigger.value.length);\n }, 0);\n }\n triggeringElement.current = null;\n }\n }, [open]);\n\n const setOpen = useCallback(\n (\n newOpen: boolean,\n _event?: Event | undefined,\n reason?: OpenChangeReason | undefined,\n ) => {\n if (newOpen) {\n triggeringElement.current = document.activeElement as HTMLElement;\n }\n setOpenState(newOpen);\n onOpen?.(newOpen);\n if (\n reason === \"escape-key\" ||\n (reason === \"outside-press\" && onDismissCallback.current)\n ) {\n onDismissCallback?.current?.();\n }\n },\n [onOpen],\n );\n\n const floatingUIResult = useFloatingUI({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n middleware: [flip({ fallbackStrategy: \"initialPlacement\" })],\n });\n\n const {\n getFloatingProps: _getFloatingPropsCallback,\n getReferenceProps: _getReferenceProps,\n } = useInteractions([useDismiss(floatingUIResult.context)]);\n const getFloatingPropsCallback = useMemo(\n () => _getFloatingPropsCallback,\n [_getFloatingPropsCallback],\n );\n const getReferenceProps = useMemo(\n () => _getReferenceProps,\n [_getReferenceProps],\n );\n\n const getFloatingProps = useCallback(\n (userProps: React.HTMLProps<HTMLElement> | undefined) => {\n const { x, y, strategy, elements } = floatingUIResult;\n return {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n ...getFloatingPropsCallback(userProps),\n };\n },\n [getFloatingPropsCallback, floatingUIResult],\n );\n const setOnDismiss = useCallback((dismissCallback: () => void) => {\n onDismissCallback.current = dismissCallback;\n }, []);\n\n const state: DatePickerOverlayState = useMemo(\n () => ({\n open,\n floatingUIResult,\n }),\n [open, floatingUIResult],\n );\n\n const helpers: DatePickerOverlayHelpers = useMemo(\n () => ({\n getFloatingProps,\n getReferenceProps,\n setOpen,\n setOnDismiss,\n }),\n [getFloatingProps, getReferenceProps, setOpen],\n );\n const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);\n\n return (\n <DatePickerOverlayContext.Provider value={contextValue}>\n {children}\n </DatePickerOverlayContext.Provider>\n );\n};\n\nexport const useDatePickerOverlay = (): DatePickerOverlayContextType => {\n const context = useContext(DatePickerOverlayContext);\n if (!context) {\n throw new Error(\n \"useDatePickerOverlay must be used within a DatePickerOverlayProvider\",\n );\n }\n return context;\n};\n"],"names":["createContext","useControlled","useRef","useEffect","useCallback","useFloatingUI","flip","useInteractions","useDismiss","useMemo","useContext"],"mappings":";;;;;;;AAuEA,MAAM,wBAAA,GAA2BA,kBAE/B,CAAA,0BAAA,EAA4B,KAAS,CAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"DatePickerOverlayProvider.js","sources":["../src/date-picker/DatePickerOverlayProvider.tsx"],"sourcesContent":["import {\n type OpenChangeReason,\n flip,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { createContext, useControlled, useFloatingUI } from \"@salt-ds/core\";\nimport {\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\n\n/**\n * Interface representing the state for a DatePicker overlay.\n */\ninterface DatePickerOverlayState {\n /**\n * If `true`, the overlay is open.\n */\n open: boolean;\n /**\n * The result of the floating UI calculations.\n */\n floatingUIResult: ReturnType<typeof useFloatingUI>;\n}\n\n/**\n * Interface representing the helper functions for a DatePicker overlay.\n */\ninterface DatePickerOverlayHelpers {\n /**\n * Function to get the props for the floating element.\n */\n getFloatingProps: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n /**\n * Function to get the props for the reference element.\n */\n getReferenceProps: ReturnType<typeof useInteractions>[\"getReferenceProps\"];\n /**\n * Sets the open state of the overlay.\n * @param newOpen - The new value for the open state.\n */\n setOpen: (newOpen: boolean) => void;\n /**~\n * Register a callback for when onDismiss is called\n * @param onDismissCallback\n */\n setOnDismiss: (onDismissCallback: () => void) => void;\n}\n\n/**\n * Interface representing the context type for a DatePicker overlay.\n */\ninterface DatePickerOverlayContextType {\n /**\n * The state of the DatePicker overlay.\n */\n state: DatePickerOverlayState;\n /**\n * The helper functions for the DatePicker overlay.\n */\n helpers: DatePickerOverlayHelpers;\n}\n\n/**\n * Context for the DatePicker overlay.\n */\nconst DatePickerOverlayContext = createContext<\n DatePickerOverlayContextType | undefined\n>(\"DatePickerOverlayContext\", undefined);\n\n/**\n * Props for the DatePickerOverlayProvider component.\n */\ninterface DatePickerOverlayProviderProps {\n /**\n * If `true`, the overlay is open.\n */\n open?: boolean;\n /**\n * Handler for when open state changes\n * @param newOpen - true when opened\n */\n onOpen?: (newOpen: boolean) => void;\n /**\n * The default open state of the overlay.\n */\n defaultOpen?: boolean;\n /**\n * The content to be rendered inside the overlay provider.\n */\n children: ReactNode;\n /**\n * When true, shouldn't open the overlay.\n */\n readOnly?: boolean;\n}\n\nexport const DatePickerOverlayProvider: React.FC<\n DatePickerOverlayProviderProps\n> = ({ open: openProp, defaultOpen, onOpen, children, readOnly }) => {\n const [open, setOpenState] = useControlled({\n controlled: openProp,\n default: Boolean(defaultOpen),\n name: \"DatePicker\",\n state: \"openDatePickerOverlay\",\n });\n const triggeringElement = useRef<HTMLElement | null>(null);\n const onDismissCallback = useRef<() => void>();\n\n useEffect(() => {\n if (!open) {\n const trigger = triggeringElement.current as HTMLElement;\n if (trigger) {\n trigger.focus();\n }\n if (trigger instanceof HTMLInputElement) {\n setTimeout(() => {\n trigger.setSelectionRange(0, trigger.value.length);\n }, 0);\n }\n triggeringElement.current = null;\n }\n }, [open]);\n\n const setOpen = useCallback(\n (\n newOpen: boolean,\n _event?: Event | undefined,\n reason?: OpenChangeReason | undefined,\n ) => {\n if (newOpen) {\n if (readOnly) {\n // When not open overlay when readOnly\n return;\n }\n triggeringElement.current = document.activeElement as HTMLElement;\n }\n setOpenState(newOpen);\n onOpen?.(newOpen);\n if (\n reason === \"escape-key\" ||\n (reason === \"outside-press\" && onDismissCallback.current)\n ) {\n onDismissCallback?.current?.();\n }\n },\n [onOpen, readOnly],\n );\n\n const floatingUIResult = useFloatingUI({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n middleware: [flip({ fallbackStrategy: \"initialPlacement\" })],\n });\n\n const {\n getFloatingProps: _getFloatingPropsCallback,\n getReferenceProps: _getReferenceProps,\n } = useInteractions([useDismiss(floatingUIResult.context)]);\n const getFloatingPropsCallback = useMemo(\n () => _getFloatingPropsCallback,\n [_getFloatingPropsCallback],\n );\n const getReferenceProps = useMemo(\n () => _getReferenceProps,\n [_getReferenceProps],\n );\n\n const getFloatingProps = useCallback(\n (userProps: React.HTMLProps<HTMLElement> | undefined) => {\n const { x, y, strategy, elements } = floatingUIResult;\n return {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n ...getFloatingPropsCallback(userProps),\n };\n },\n [getFloatingPropsCallback, floatingUIResult],\n );\n const setOnDismiss = useCallback((dismissCallback: () => void) => {\n onDismissCallback.current = dismissCallback;\n }, []);\n\n const state: DatePickerOverlayState = useMemo(\n () => ({\n open,\n floatingUIResult,\n }),\n [open, floatingUIResult],\n );\n\n const helpers: DatePickerOverlayHelpers = useMemo(\n () => ({\n getFloatingProps,\n getReferenceProps,\n setOpen,\n setOnDismiss,\n }),\n [getFloatingProps, getReferenceProps, setOpen],\n );\n const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);\n\n return (\n <DatePickerOverlayContext.Provider value={contextValue}>\n {children}\n </DatePickerOverlayContext.Provider>\n );\n};\n\nexport const useDatePickerOverlay = (): DatePickerOverlayContextType => {\n const context = useContext(DatePickerOverlayContext);\n if (!context) {\n throw new Error(\n \"useDatePickerOverlay must be used within a DatePickerOverlayProvider\",\n );\n }\n return context;\n};\n"],"names":["createContext","useControlled","useRef","useEffect","useCallback","useFloatingUI","flip","useInteractions","useDismiss","useMemo","useContext"],"mappings":"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"}
|
|
@@ -150,7 +150,7 @@ const DatePickerRangeInput = react.forwardRef(function DatePickerRangeInput2(pro
|
|
|
150
150
|
onDateChange: handleDateChange,
|
|
151
151
|
onDateValueChange: handleDateValueChange,
|
|
152
152
|
onChange,
|
|
153
|
-
endAdornment: /* @__PURE__ */ jsxRuntime.jsx(
|
|
153
|
+
endAdornment: !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
|
|
154
154
|
core.Button,
|
|
155
155
|
{
|
|
156
156
|
appearance: "transparent",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerRangeInput.js","sources":["../src/date-picker/DatePickerRangeInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled, useIcon } from \"@salt-ds/core\";\nimport {\n DateDetailErrorEnum,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { clsx } from \"clsx\";\nimport {\n type KeyboardEvent,\n type KeyboardEventHandler,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n DateInputRange,\n type DateInputRangeDetails,\n type DateInputRangeProps,\n type DateInputRangeValue,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerRangeInput\");\n\n/**\n * Props for the DatePickerRangeInput component.\n */\nexport interface DatePickerRangeInputProps<TDate extends DateFrameworkType>\n extends DateInputRangeProps<TDate> {\n /**\n * Function to validate the entered date\n * @param date - The selected date\n * @param details - The details of date selection, either a valid date or error\n * @returns updated DateInputRangeDetails details\n */\n validate?: (\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => DateInputRangeDetails;\n}\n\nexport function defaultRangeValidator<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n minDate: TDate | undefined,\n maxDate: TDate | undefined,\n): DateInputRangeDetails {\n const { startDate, endDate } = date || {};\n\n if (!startDate) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: DateDetailErrorEnum.UNSET,\n message: \"no start date defined\",\n });\n }\n if (!endDate) {\n details.endDate = details.endDate || {};\n details.endDate.errors = details.endDate.errors || [];\n details.endDate.errors.push({\n type: DateDetailErrorEnum.UNSET,\n message: \"no end date defined\",\n });\n }\n\n // If startDate is after endDate\n if (\n dateAdapter.isValid(startDate) &&\n dateAdapter.isValid(endDate) &&\n dateAdapter.compare(startDate, endDate) > 0\n ) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: \"greater-than-end-date\",\n message: \"start date after end date\",\n });\n }\n // If startDate is before minDate\n if (\n minDate &&\n dateAdapter.isValid(startDate) &&\n dateAdapter.compare(startDate, minDate) < 0\n ) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: \"min-date\",\n message: \"is before min date\",\n });\n }\n // If endDate is after maxDate\n if (\n maxDate &&\n dateAdapter.isValid(endDate) &&\n dateAdapter.compare(endDate, maxDate) > 0\n ) {\n details.endDate = details.endDate || {};\n details.endDate.errors = details.endDate.errors || [];\n details.endDate.errors.push({\n type: \"max-date\",\n message: \"is after max date\",\n });\n }\n return details;\n}\n\nexport const DatePickerRangeInput = forwardRef(function DatePickerRangeInput<\n TDate extends DateFrameworkType,\n>(\n props: DatePickerRangeInputProps<SingleDateSelection<TDate>>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n className,\n endInputProps: endInputPropsProp,\n startInputProps: startInputPropsProp,\n onKeyDown,\n defaultValue,\n format,\n value: valueProp,\n validate,\n onChange,\n onDateValueChange,\n ...rest\n } = props;\n\n const { CalendarIcon } = useIcon();\n\n const {\n state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"range\" });\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>();\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerRangeInput\",\n state: \"dateValue\",\n });\n\n const handleCalendarButton = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);\n select(event, date, validatedDetails);\n },\n [select, minDate, maxDate],\n );\n\n const handleDateValueChange = useCallback(\n (event: SyntheticEvent | null, newDateValue: DateInputRangeValue) => {\n setValue(newDateValue);\n onDateValueChange?.(event, newDateValue);\n },\n [onDateValueChange],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousValue.current = value;\n }\n }, [open]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setValue(previousValue.current);\n }\n }, [cancelled]);\n\n const startInputProps: {\n onKeyDown: KeyboardEventHandler<HTMLInputElement>;\n } = {\n onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n }\n startInputPropsProp?.onKeyDown?.(event);\n },\n ...startInputPropsProp,\n };\n const endInputProps: {\n onKeyDown: KeyboardEventHandler<HTMLInputElement>;\n } = {\n onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n }\n endInputPropsProp?.onKeyDown?.(event);\n },\n ...endInputPropsProp,\n };\n\n return (\n <DateInputRange\n value={\n value ?? {\n startDate: dateAdapter.format(value, format),\n endDate: dateAdapter.format(value, format),\n }\n }\n className={clsx(withBaseName(), className)}\n date={selectedDate ?? null}\n startInputProps={startInputProps}\n endInputProps={endInputProps}\n readOnly={readOnly}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n onChange={onChange}\n endAdornment={\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleCalendarButton}\n disabled={disabled}\n aria-label=\"Open Calendar\"\n >\n <CalendarIcon />\n </Button>\n }\n format={format}\n {...rest}\n />\n );\n});\n"],"names":["makePrefixer","DateDetailErrorEnum","forwardRef","DatePickerRangeInput","useLocalization","useIcon","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputRange","clsx","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePickerRangeInput.js","sources":["../src/date-picker/DatePickerRangeInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled, useIcon } from \"@salt-ds/core\";\nimport {\n DateDetailErrorEnum,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { clsx } from \"clsx\";\nimport {\n type KeyboardEvent,\n type KeyboardEventHandler,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n DateInputRange,\n type DateInputRangeDetails,\n type DateInputRangeProps,\n type DateInputRangeValue,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerRangeInput\");\n\n/**\n * Props for the DatePickerRangeInput component.\n */\nexport interface DatePickerRangeInputProps<TDate extends DateFrameworkType>\n extends DateInputRangeProps<TDate> {\n /**\n * Function to validate the entered date\n * @param date - The selected date\n * @param details - The details of date selection, either a valid date or error\n * @returns updated DateInputRangeDetails details\n */\n validate?: (\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => DateInputRangeDetails;\n}\n\nexport function defaultRangeValidator<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n minDate: TDate | undefined,\n maxDate: TDate | undefined,\n): DateInputRangeDetails {\n const { startDate, endDate } = date || {};\n\n if (!startDate) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: DateDetailErrorEnum.UNSET,\n message: \"no start date defined\",\n });\n }\n if (!endDate) {\n details.endDate = details.endDate || {};\n details.endDate.errors = details.endDate.errors || [];\n details.endDate.errors.push({\n type: DateDetailErrorEnum.UNSET,\n message: \"no end date defined\",\n });\n }\n\n // If startDate is after endDate\n if (\n dateAdapter.isValid(startDate) &&\n dateAdapter.isValid(endDate) &&\n dateAdapter.compare(startDate, endDate) > 0\n ) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: \"greater-than-end-date\",\n message: \"start date after end date\",\n });\n }\n // If startDate is before minDate\n if (\n minDate &&\n dateAdapter.isValid(startDate) &&\n dateAdapter.compare(startDate, minDate) < 0\n ) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: \"min-date\",\n message: \"is before min date\",\n });\n }\n // If endDate is after maxDate\n if (\n maxDate &&\n dateAdapter.isValid(endDate) &&\n dateAdapter.compare(endDate, maxDate) > 0\n ) {\n details.endDate = details.endDate || {};\n details.endDate.errors = details.endDate.errors || [];\n details.endDate.errors.push({\n type: \"max-date\",\n message: \"is after max date\",\n });\n }\n return details;\n}\n\nexport const DatePickerRangeInput = forwardRef(function DatePickerRangeInput<\n TDate extends DateFrameworkType,\n>(\n props: DatePickerRangeInputProps<SingleDateSelection<TDate>>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n className,\n endInputProps: endInputPropsProp,\n startInputProps: startInputPropsProp,\n onKeyDown,\n defaultValue,\n format,\n value: valueProp,\n validate,\n onChange,\n onDateValueChange,\n ...rest\n } = props;\n\n const { CalendarIcon } = useIcon();\n\n const {\n state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"range\" });\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>();\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerRangeInput\",\n state: \"dateValue\",\n });\n\n const handleCalendarButton = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);\n select(event, date, validatedDetails);\n },\n [select, minDate, maxDate],\n );\n\n const handleDateValueChange = useCallback(\n (event: SyntheticEvent | null, newDateValue: DateInputRangeValue) => {\n setValue(newDateValue);\n onDateValueChange?.(event, newDateValue);\n },\n [onDateValueChange],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousValue.current = value;\n }\n }, [open]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setValue(previousValue.current);\n }\n }, [cancelled]);\n\n const startInputProps: {\n onKeyDown: KeyboardEventHandler<HTMLInputElement>;\n } = {\n onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n }\n startInputPropsProp?.onKeyDown?.(event);\n },\n ...startInputPropsProp,\n };\n const endInputProps: {\n onKeyDown: KeyboardEventHandler<HTMLInputElement>;\n } = {\n onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n }\n endInputPropsProp?.onKeyDown?.(event);\n },\n ...endInputPropsProp,\n };\n\n return (\n <DateInputRange\n value={\n value ?? {\n startDate: dateAdapter.format(value, format),\n endDate: dateAdapter.format(value, format),\n }\n }\n className={clsx(withBaseName(), className)}\n date={selectedDate ?? null}\n startInputProps={startInputProps}\n endInputProps={endInputProps}\n readOnly={readOnly}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n onChange={onChange}\n endAdornment={\n !readOnly && (\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleCalendarButton}\n disabled={disabled}\n aria-label=\"Open Calendar\"\n >\n <CalendarIcon />\n </Button>\n )\n }\n format={format}\n {...rest}\n />\n );\n});\n"],"names":["makePrefixer","DateDetailErrorEnum","forwardRef","DatePickerRangeInput","useLocalization","useIcon","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputRange","clsx","Button"],"mappings":"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"}
|
|
@@ -119,7 +119,7 @@ const DatePickerSingleInput = react.forwardRef(
|
|
|
119
119
|
ref,
|
|
120
120
|
onDateChange: handleDateChange,
|
|
121
121
|
onDateValueChange: handleDateValueChange,
|
|
122
|
-
endAdornment: /* @__PURE__ */ jsxRuntime.jsx(
|
|
122
|
+
endAdornment: !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
|
|
123
123
|
core.Button,
|
|
124
124
|
{
|
|
125
125
|
appearance: "transparent",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport {\n DateDetailErrorEnum,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type KeyboardEvent,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport {\n DateInputSingle,\n type DateInputSingleDetails,\n type DateInputSingleProps,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps<TDate extends DateFrameworkType>\n extends DateInputSingleProps<TDate> {\n /**\n * Function to validate the entered date\n * @param date - The selected date\n * @param details - The details of date selection, either a valid date or error\n * @returns updated DateInputSingleDetails details\n */\n validate?: (\n date: SingleDateSelection<TDate>,\n details: DateInputSingleDetails,\n ) => DateInputSingleDetails;\n}\n\nfunction defaultSingleValidation<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: TDate,\n details: DateInputSingleDetails,\n minDate: TDate | undefined,\n maxDate: TDate | undefined,\n): DateInputSingleDetails {\n if (!date) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: DateDetailErrorEnum.UNSET,\n message: \"no date defined\",\n });\n } else {\n if (\n minDate &&\n dateAdapter.isValid(date) &&\n dateAdapter.compare(date, minDate) < 0\n ) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: \"min-date\",\n message: \"is before min date\",\n });\n } else if (\n maxDate &&\n dateAdapter.isValid(date) &&\n dateAdapter.compare(date, maxDate) > 0\n ) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: \"max-date\",\n message: \"is after max date\",\n });\n }\n }\n return details;\n}\n\nexport const DatePickerSingleInput = forwardRef<\n HTMLDivElement,\n DatePickerSingleInputProps<any>\n>(\n <TDate extends DateFrameworkType>(\n props: DatePickerSingleInputProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const { dateAdapter } = useLocalization<TDate>();\n\n const {\n className,\n onFocus,\n onBlur,\n value: valueProp,\n validate,\n defaultValue,\n onDateValueChange,\n onKeyDown,\n ...rest\n } = props;\n\n const {\n state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"single\" });\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>();\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerSingleInput\",\n state: \"value\",\n });\n\n const handleCalendarButton = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate>,\n details: DateInputSingleDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultSingleValidation<TDate>(\n dateAdapter,\n date,\n details,\n minDate,\n maxDate,\n );\n select(event, date, validatedDetails);\n },\n [select, validate],\n );\n\n const handleDateValueChange = useCallback(\n (event: SyntheticEvent | null, newDateValue: string) => {\n setValue(newDateValue);\n onDateValueChange?.(event, newDateValue);\n },\n [onDateValueChange],\n );\n\n const handleOnKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n onKeyDown?.(event);\n }\n },\n [onKeyDown],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousValue.current = value;\n }\n }, [open]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setValue(previousValue?.current);\n }\n }, [cancelled]);\n\n return (\n <DateInputSingle\n value={value ?? \"\"}\n className={clsx(withBaseName(), className)}\n date={selectedDate ?? null}\n readOnly={readOnly}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n endAdornment={\n <Button\n
|
|
1
|
+
{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport {\n DateDetailErrorEnum,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type KeyboardEvent,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport {\n DateInputSingle,\n type DateInputSingleDetails,\n type DateInputSingleProps,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps<TDate extends DateFrameworkType>\n extends DateInputSingleProps<TDate> {\n /**\n * Function to validate the entered date\n * @param date - The selected date\n * @param details - The details of date selection, either a valid date or error\n * @returns updated DateInputSingleDetails details\n */\n validate?: (\n date: SingleDateSelection<TDate>,\n details: DateInputSingleDetails,\n ) => DateInputSingleDetails;\n}\n\nfunction defaultSingleValidation<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: TDate,\n details: DateInputSingleDetails,\n minDate: TDate | undefined,\n maxDate: TDate | undefined,\n): DateInputSingleDetails {\n if (!date) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: DateDetailErrorEnum.UNSET,\n message: \"no date defined\",\n });\n } else {\n if (\n minDate &&\n dateAdapter.isValid(date) &&\n dateAdapter.compare(date, minDate) < 0\n ) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: \"min-date\",\n message: \"is before min date\",\n });\n } else if (\n maxDate &&\n dateAdapter.isValid(date) &&\n dateAdapter.compare(date, maxDate) > 0\n ) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: \"max-date\",\n message: \"is after max date\",\n });\n }\n }\n return details;\n}\n\nexport const DatePickerSingleInput = forwardRef<\n HTMLDivElement,\n DatePickerSingleInputProps<any>\n>(\n <TDate extends DateFrameworkType>(\n props: DatePickerSingleInputProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const { dateAdapter } = useLocalization<TDate>();\n\n const {\n className,\n onFocus,\n onBlur,\n value: valueProp,\n validate,\n defaultValue,\n onDateValueChange,\n onKeyDown,\n ...rest\n } = props;\n\n const {\n state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"single\" });\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>();\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerSingleInput\",\n state: \"value\",\n });\n\n const handleCalendarButton = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate>,\n details: DateInputSingleDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultSingleValidation<TDate>(\n dateAdapter,\n date,\n details,\n minDate,\n maxDate,\n );\n select(event, date, validatedDetails);\n },\n [select, validate],\n );\n\n const handleDateValueChange = useCallback(\n (event: SyntheticEvent | null, newDateValue: string) => {\n setValue(newDateValue);\n onDateValueChange?.(event, newDateValue);\n },\n [onDateValueChange],\n );\n\n const handleOnKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n onKeyDown?.(event);\n }\n },\n [onKeyDown],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousValue.current = value;\n }\n }, [open]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setValue(previousValue?.current);\n }\n }, [cancelled]);\n\n return (\n <DateInputSingle\n value={value ?? \"\"}\n className={clsx(withBaseName(), className)}\n date={selectedDate ?? null}\n readOnly={readOnly}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n endAdornment={\n !readOnly && (\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleCalendarButton}\n disabled={disabled}\n aria-label=\"Open Calendar\"\n >\n <CalendarIcon />\n </Button>\n )\n }\n onKeyDown={handleOnKeyDown}\n {...rest}\n />\n );\n },\n);\n"],"names":["makePrefixer","DateDetailErrorEnum","forwardRef","useLocalization","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputSingle","clsx","Button","CalendarIcon"],"mappings":"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"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -120,14 +120,13 @@ var overflowUtils = require('./responsive/overflowUtils.js');
|
|
|
120
120
|
var utils = require('./responsive/utils.js');
|
|
121
121
|
var SearchInput = require('./search-input/SearchInput.js');
|
|
122
122
|
var SkipLink = require('./skip-link/SkipLink.js');
|
|
123
|
-
var SkipLinks = require('./skip-link/SkipLinks.js');
|
|
124
123
|
var Slider = require('./slider/Slider.js');
|
|
125
124
|
var StaticList = require('./static-list/StaticList.js');
|
|
126
125
|
var StaticListItem = require('./static-list/StaticListItem.js');
|
|
127
126
|
var StaticListItemContent = require('./static-list/StaticListItemContent.js');
|
|
128
127
|
var SteppedTracker = require('./stepped-tracker/SteppedTracker.js');
|
|
129
|
-
var
|
|
130
|
-
var
|
|
128
|
+
var Step = require('./stepped-tracker/Step.js');
|
|
129
|
+
var useStepReducer = require('./stepped-tracker/useStepReducer.js');
|
|
131
130
|
var useStepperInput = require('./stepper-input/useStepperInput.js');
|
|
132
131
|
var StepperInput = require('./stepper-input/StepperInput.js');
|
|
133
132
|
var SystemStatus = require('./system-status/SystemStatus.js');
|
|
@@ -320,14 +319,13 @@ exports.isResponsiveAttribute = utils.isResponsiveAttribute;
|
|
|
320
319
|
exports.liftResponsivePropsToFormField = utils.liftResponsivePropsToFormField;
|
|
321
320
|
exports.SearchInput = SearchInput.SearchInput;
|
|
322
321
|
exports.SkipLink = SkipLink.SkipLink;
|
|
323
|
-
exports.SkipLinks = SkipLinks.SkipLinks;
|
|
324
322
|
exports.Slider = Slider.Slider;
|
|
325
323
|
exports.StaticList = StaticList.StaticList;
|
|
326
324
|
exports.StaticListItem = StaticListItem.StaticListItem;
|
|
327
325
|
exports.StaticListItemContent = StaticListItemContent.StaticListItemContent;
|
|
328
326
|
exports.SteppedTracker = SteppedTracker.SteppedTracker;
|
|
329
|
-
exports.
|
|
330
|
-
exports.
|
|
327
|
+
exports.Step = Step.Step;
|
|
328
|
+
exports.useStepReducer = useStepReducer.useStepReducer;
|
|
331
329
|
exports.useStepperInput = useStepperInput.useStepperInput;
|
|
332
330
|
exports.StepperInput = StepperInput.StepperInput;
|
|
333
331
|
exports.SystemStatus = SystemStatus.SystemStatus;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*
|
|
3
|
+
var css_248z = "/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n top: 0;\n left: 0;\n opacity: 0;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n position: absolute;\n\n color: var(--salt-content-primary-foreground);\n letter-spacing: var(--salt-text-letterSpacing);\n text-decoration: var(--salt-navigable-textDecoration);\n font-family: var(--salt-text-fontFamily);\n white-space: nowrap;\n background: var(--saltSkipLink-background, var(--salt-container-primary-background));\n z-index: calc(var(--salt-zIndex-appHeader) + 1);\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n opacity: 1;\n width: auto;\n height: max(var(--salt-size-base), auto);\n padding: var(--salt-spacing-100) var(--salt-spacing-300);\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n box-shadow: var(--salt-overlayable-shadow);\n}\n\n@keyframes fade-out-back-outline {\n /* required animation to apply an opacity fade-out-back to outline */\n 0% {\n outline-color: var(--salt-focused-outlineColor);\n }\n 100% {\n outline-color: transparent;\n }\n}\n\n.saltSkipLink-target {\n animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both;\n outline: var(--salt-focused-outline);\n}\n@media (prefers-reduced-motion: reduce) {\n .saltSkipLink-target {\n animation: none;\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=SkipLink.css.js.map
|
|
@@ -11,24 +11,41 @@ var SkipLink$1 = require('./SkipLink.css.js');
|
|
|
11
11
|
|
|
12
12
|
const withBaseName = core.makePrefixer("saltSkipLink");
|
|
13
13
|
const SkipLink = react.forwardRef(
|
|
14
|
-
function SkipLink2({ className,
|
|
14
|
+
function SkipLink2({ className, targetId, children, onKeyUp, onBlur, onClick, ...rest }, ref) {
|
|
15
|
+
const [isTargetAvailable, setIsTargetAvailable] = react.useState(false);
|
|
15
16
|
const targetWindow = window.useWindow();
|
|
16
17
|
styles.useComponentCssInjection({
|
|
17
18
|
testId: "salt-skip-link",
|
|
18
19
|
css: SkipLink$1,
|
|
19
20
|
window: targetWindow
|
|
20
21
|
});
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
const targetRef = react.useRef(null);
|
|
23
|
+
react.useEffect(() => {
|
|
24
|
+
if (targetWindow) {
|
|
25
|
+
targetRef.current = targetWindow.document.getElementById(targetId);
|
|
26
|
+
}
|
|
27
|
+
setIsTargetAvailable(!!targetRef.current);
|
|
28
|
+
}, [targetId, targetWindow]);
|
|
29
|
+
const eventHandlers = useManageFocusOnTarget.useManageFocusOnTarget({
|
|
30
|
+
onKeyUp,
|
|
31
|
+
onBlur,
|
|
32
|
+
onClick,
|
|
33
|
+
targetRef,
|
|
34
|
+
targetClass: withBaseName("target")
|
|
35
|
+
});
|
|
36
|
+
if (!isTargetAvailable) return null;
|
|
37
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
38
|
+
"a",
|
|
25
39
|
{
|
|
40
|
+
className: clsx.clsx(withBaseName(), className),
|
|
41
|
+
href: `#${targetId}`,
|
|
42
|
+
ref,
|
|
43
|
+
target: "_self",
|
|
26
44
|
...eventHandlers,
|
|
27
45
|
...rest,
|
|
28
|
-
|
|
29
|
-
ref
|
|
46
|
+
children
|
|
30
47
|
}
|
|
31
|
-
)
|
|
48
|
+
);
|
|
32
49
|
}
|
|
33
50
|
);
|
|
34
51
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * The ID of the target element to apply focus when the link is clicked.\n * If the element with this ID is not found, the SkipLink will not be rendered.\n */\n targetId: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n function SkipLink(\n { className, targetId, children, onKeyUp, onBlur, onClick, ...rest },\n ref,\n ) {\n const [isTargetAvailable, setIsTargetAvailable] = useState(false);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-link\",\n css: skipLinkCss,\n window: targetWindow,\n });\n\n const targetRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n if (targetWindow) {\n targetRef.current = targetWindow.document.getElementById(targetId);\n }\n setIsTargetAvailable(!!targetRef.current);\n }, [targetId, targetWindow]);\n\n const eventHandlers = useManageFocusOnTarget({\n onKeyUp,\n onBlur,\n onClick,\n targetRef,\n targetClass: withBaseName(\"target\"),\n });\n\n if (!isTargetAvailable) return null;\n return (\n <a\n className={clsx(withBaseName(), className)}\n href={`#${targetId}`}\n ref={ref}\n target=\"_self\"\n {...eventHandlers}\n {...rest}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","SkipLink","useState","useWindow","useComponentCssInjection","skipLinkCss","useRef","useEffect","useManageFocusOnTarget","jsx","clsx"],"mappings":";;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAAA,CACP,EAAE,SAAA,EAAW,QAAU,EAAA,QAAA,EAAU,OAAS,EAAA,MAAA,EAAQ,OAAS,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChE,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAYC,aAA2B,IAAI,CAAA;AAEjD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,SAAA,CAAU,OAAU,GAAA,YAAA,CAAa,QAAS,CAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AAEnE,MAAqB,oBAAA,CAAA,CAAC,CAAC,SAAA,CAAU,OAAO,CAAA;AAAA,KACvC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,IAAA,MAAM,gBAAgBC,6CAAuB,CAAA;AAAA,MAC3C,OAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,EAAa,aAAa,QAAQ;AAAA,KACnC,CAAA;AAED,IAAI,IAAA,CAAC,mBAA0B,OAAA,IAAA;AAC/B,IACE,uBAAAC,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,QAClB,GAAA;AAAA,QACA,MAAO,EAAA,OAAA;AAAA,QACN,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -4,6 +4,9 @@ var react = require('react');
|
|
|
4
4
|
|
|
5
5
|
const FOCUS_TIMEOUT = 50;
|
|
6
6
|
const useManageFocusOnTarget = ({
|
|
7
|
+
onKeyUp,
|
|
8
|
+
onBlur,
|
|
9
|
+
onClick,
|
|
7
10
|
targetRef,
|
|
8
11
|
targetClass
|
|
9
12
|
}) => {
|
|
@@ -15,44 +18,58 @@ const useManageFocusOnTarget = ({
|
|
|
15
18
|
setTarget(targetRef.current);
|
|
16
19
|
}
|
|
17
20
|
}, [targetRef]);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (!hasTabIndex.current) {
|
|
26
|
-
shouldRemoveTabIndex.current = true;
|
|
27
|
-
target.setAttribute("tabIndex", "-1");
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const removeTabIndex = () => {
|
|
31
|
-
if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
|
|
32
|
-
target.removeAttribute("tabIndex");
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const handleFocusOnTarget = () => {
|
|
36
|
-
shouldRemoveTabIndex.current = false;
|
|
37
|
-
target.classList.add(targetClass);
|
|
38
|
-
};
|
|
39
|
-
const handleBlurFromTarget = () => {
|
|
21
|
+
if (!target) {
|
|
22
|
+
return {};
|
|
23
|
+
}
|
|
24
|
+
const addTabIndex = () => {
|
|
25
|
+
const tabIndex = target.getAttribute("tabIndex");
|
|
26
|
+
hasTabIndex.current = tabIndex || tabIndex === "0";
|
|
27
|
+
if (!hasTabIndex.current) {
|
|
40
28
|
shouldRemoveTabIndex.current = true;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
29
|
+
target.setAttribute("tabIndex", "-1");
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const removeTabIndex = () => {
|
|
33
|
+
if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
|
|
34
|
+
target.removeAttribute("tabIndex");
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
const handleFocusOnTarget = () => {
|
|
38
|
+
shouldRemoveTabIndex.current = false;
|
|
39
|
+
target.classList.add(targetClass);
|
|
40
|
+
};
|
|
41
|
+
const handleBlurFromTarget = () => {
|
|
42
|
+
shouldRemoveTabIndex.current = true;
|
|
43
|
+
removeTabIndex();
|
|
44
|
+
target.classList.remove(targetClass);
|
|
45
|
+
};
|
|
46
|
+
function moveToTarget() {
|
|
47
|
+
addTabIndex();
|
|
48
|
+
setTimeout(() => {
|
|
49
|
+
target == null ? void 0 : target.focus();
|
|
50
|
+
}, FOCUS_TIMEOUT);
|
|
51
|
+
target == null ? void 0 : target.addEventListener("focus", handleFocusOnTarget, { once: true });
|
|
52
|
+
target == null ? void 0 : target.addEventListener("blur", handleBlurFromTarget, { once: true });
|
|
53
|
+
}
|
|
54
|
+
const handleKeyUp = (event) => {
|
|
55
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
56
|
+
moveToTarget();
|
|
57
|
+
}
|
|
58
|
+
onKeyUp == null ? void 0 : onKeyUp(event);
|
|
59
|
+
};
|
|
60
|
+
const handleClick = (event) => {
|
|
61
|
+
moveToTarget();
|
|
62
|
+
onClick == null ? void 0 : onClick(event);
|
|
63
|
+
};
|
|
64
|
+
const handleBlur = (event) => {
|
|
65
|
+
setTimeout(removeTabIndex, FOCUS_TIMEOUT);
|
|
66
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
67
|
+
};
|
|
68
|
+
return {
|
|
69
|
+
onBlur: handleBlur,
|
|
70
|
+
onClick: handleClick,
|
|
71
|
+
onKeyUp: handleKeyUp
|
|
72
|
+
};
|
|
56
73
|
};
|
|
57
74
|
|
|
58
75
|
exports.useManageFocusOnTarget = useManageFocusOnTarget;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import { type RefObject
|
|
1
|
+
{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n type FocusEventHandler,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n onBlur?: FocusEventHandler;\n onClick?: MouseEventHandler;\n onKeyUp?: KeyboardEventHandler;\n targetRef: RefObject<HTMLElement> | undefined;\n targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n onBlur?: FocusEventHandler<HTMLAnchorElement>;\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n onKeyUp,\n onBlur,\n onClick,\n targetRef,\n targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n const [target, setTarget] = useState<HTMLElement>();\n\n const hasTabIndex = useRef<boolean | string>();\n const shouldRemoveTabIndex = useRef<boolean>();\n\n useEffect(() => {\n if (targetRef?.current) {\n setTarget(targetRef.current);\n }\n }, [targetRef]);\n\n if (!target) {\n return {};\n }\n\n const addTabIndex = () => {\n const tabIndex = target.getAttribute(\"tabIndex\");\n hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n if (!hasTabIndex.current) {\n shouldRemoveTabIndex.current = true;\n target.setAttribute(\"tabIndex\", \"-1\");\n }\n };\n\n const removeTabIndex = () => {\n if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n target.removeAttribute(\"tabIndex\");\n }\n };\n\n const handleFocusOnTarget = () => {\n shouldRemoveTabIndex.current = false;\n target.classList.add(targetClass);\n };\n\n const handleBlurFromTarget = () => {\n shouldRemoveTabIndex.current = true;\n removeTabIndex();\n target.classList.remove(targetClass);\n };\n\n function moveToTarget() {\n addTabIndex();\n setTimeout(() => {\n target?.focus();\n }, FOCUS_TIMEOUT);\n\n target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n }\n\n const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n moveToTarget();\n }\n onKeyUp?.(event);\n };\n\n const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n moveToTarget();\n onClick?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n onBlur?.(event);\n };\n\n return {\n onBlur: handleBlur,\n onClick: handleClick,\n onKeyUp: handleKeyUp,\n };\n};\n"],"names":["useState","useRef","useEffect"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltStepConnector {\n grid-area: connector;\n\n transition-duration: inherit;\n transition-timing-function: inherit;\n transition-property: opacity, min-height;\n}\n\n.saltSteppedTracker-horizontal .saltStepConnector {\n position: absolute;\n transform: translateY(-100%);\n top: calc(var(--step-icon-size) / 2);\n left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n border-top-width: var(--salt-size-border-strong);\n border-top-style: var(--salt-track-borderStyle-incomplete);\n border-top-color: var(--salt-track-borderColor);\n}\n\n.saltSteppedTracker-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltSteppedTracker-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n border-top-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltSteppedTracker-vertical .saltStepConnector {\n min-height: var(--salt-size-base);\n align-self: stretch;\n justify-self: center;\n\n border-left-width: var(--salt-size-border-strong);\n border-left-style: var(--salt-track-borderStyle-incomplete);\n border-left-color: var(--salt-track-borderColor);\n}\n\n.saltSteppedTracker-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltSteppedTracker-vertical .saltStep-stage-inprogress > .saltStepConnector {\n border-left-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n opacity: 0;\n min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n opacity: 0;\n min-height: 0;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Step.Connector.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Connector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var Step_Connector = require('./Step.Connector.css.js');
|
|
8
|
+
|
|
9
|
+
const withBaseName = core.makePrefixer("saltStepConnector");
|
|
10
|
+
function StepConnector() {
|
|
11
|
+
const targetWindow = window.useWindow();
|
|
12
|
+
styles.useComponentCssInjection({
|
|
13
|
+
testId: "salt-step-connector",
|
|
14
|
+
css: Step_Connector,
|
|
15
|
+
window: targetWindow
|
|
16
|
+
});
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: withBaseName() });
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
exports.StepConnector = StepConnector;
|
|
21
|
+
//# sourceMappingURL=Step.Connector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Connector.js","sources":["../src/stepped-tracker/Step.Connector.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepConnectorCSS from \"./Step.Connector.css\";\n\nconst withBaseName = makePrefixer(\"saltStepConnector\");\n\nexport function StepConnector() {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-connector\",\n css: stepConnectorCSS,\n window: targetWindow,\n });\n\n return <div aria-hidden className={withBaseName()} />;\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepConnectorCSS"],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,SAAS,aAAgB,GAAA;AAC9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,sCAAQ,KAAI,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA,SAAA,EAAW,cAAgB,EAAA,CAAA;AACrD;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltStepDescription {\n grid-area: description;\n}\n\n.saltSteppedTracker-vertical .saltStepDescription {\n padding-bottom: var(--salt-spacing-300);\n padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepDescription {\n color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepDescription {\n color: var(--salt-status-error-foreground-informative);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Step.Description.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Description.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var Step_Description = require('./Step.Description.css.js');
|
|
9
|
+
|
|
10
|
+
const withBaseName = core.makePrefixer("saltStepDescription");
|
|
11
|
+
function StepDescription({
|
|
12
|
+
id,
|
|
13
|
+
className,
|
|
14
|
+
styleAs = "label",
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
const targetWindow = window.useWindow();
|
|
18
|
+
styles.useComponentCssInjection({
|
|
19
|
+
testId: "salt-step-description",
|
|
20
|
+
css: Step_Description,
|
|
21
|
+
window: targetWindow
|
|
22
|
+
});
|
|
23
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
|
+
core.Text,
|
|
25
|
+
{
|
|
26
|
+
id,
|
|
27
|
+
styleAs: "label",
|
|
28
|
+
className: clsx(withBaseName(), className),
|
|
29
|
+
...props
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
exports.StepDescription = StepDescription;
|
|
35
|
+
//# sourceMappingURL=Step.Description.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Description.js","sources":["../src/stepped-tracker/Step.Description.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport stepDescriptionCSS from \"./Step.Description.css\";\n\nexport interface StepDescriptionProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltStepDescription\");\n\nexport function StepDescription({\n id,\n className,\n styleAs = \"label\",\n ...props\n}: StepDescriptionProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-description\",\n css: stepDescriptionCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n styleAs=\"label\"\n className={clsx(withBaseName(), className)}\n {...props}\n />\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepDescriptionCSS","jsx","Text"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAEhD,SAAS,eAAgB,CAAA;AAAA,EAC9B,EAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,GAAG;AACL,CAAyB,EAAA;AACvB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
|