@salt-ds/core 1.47.4 → 1.48.0
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 +51 -0
- package/css/salt-core.css +202 -24
- package/dist-cjs/aria-announcer/AriaAnnounce.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +5 -2
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/banner/Banner.css.js +1 -1
- package/dist-cjs/breakpoints/BreakpointProvider.js +10 -7
- package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-cjs/button/useButton.js +3 -3
- package/dist-cjs/button/useButton.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-cjs/collapsible/Collapsible.js +52 -0
- package/dist-cjs/collapsible/Collapsible.js.map +1 -0
- package/dist-cjs/collapsible/CollapsibleContext.js +29 -0
- package/dist-cjs/collapsible/CollapsibleContext.js.map +1 -0
- package/dist-cjs/collapsible/CollapsiblePanel.css.js +6 -0
- package/dist-cjs/collapsible/CollapsiblePanel.css.js.map +1 -0
- package/dist-cjs/collapsible/CollapsiblePanel.js +46 -0
- package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -0
- package/dist-cjs/collapsible/CollapsibleTrigger.js +40 -0
- package/dist-cjs/collapsible/CollapsibleTrigger.js.map +1 -0
- package/dist-cjs/dialog/Dialog.js +1 -1
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/dialog/DialogHeader.css.js +1 -1
- package/dist-cjs/divider/Divider.js.map +1 -1
- package/dist-cjs/index.js +21 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +29 -26
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +3 -3
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-cjs/pagination/PageButton.css.js +1 -1
- package/dist-cjs/pill/Pill.js +1 -1
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-cjs/pill-input/useTruncatePills.js +2 -1
- package/dist-cjs/pill-input/useTruncatePills.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.css.js +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +2 -2
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/spinner/Spinner.js +3 -4
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/stepper/Step.js +1 -1
- package/dist-cjs/stepper/Step.js.map +1 -1
- package/dist-cjs/stepper/internal/StepText.css.js +1 -1
- package/dist-cjs/stepper/internal/StepText.js +0 -1
- package/dist-cjs/stepper/internal/StepText.js.map +1 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +3 -3
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +1 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/mergeProps.js +2 -2
- package/dist-cjs/utils/mergeProps.js.map +1 -1
- package/dist-cjs/utils/useControlled.js +1 -1
- package/dist-cjs/utils/useControlled.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +2 -2
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useIsFocusVisible.js +1 -1
- package/dist-cjs/utils/useIsFocusVisible.js.map +1 -1
- package/dist-cjs/utils/usePreventScroll.js.map +1 -1
- package/dist-cjs/utils/usePrevious.js.map +1 -1
- package/dist-cjs/vertical-navigation/SubMenuContext.js +39 -0
- package/dist-cjs/vertical-navigation/SubMenuContext.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigation.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigation.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigation.js +38 -0
- package/dist-cjs/vertical-navigation/VerticalNavigation.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItem.js +53 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItem.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js +88 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js +35 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js +28 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js +74 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +6 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js.map +1 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.js +39 -0
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.js.map +1 -0
- package/dist-es/aria-announcer/AriaAnnounce.js.map +1 -1
- package/dist-es/avatar/Avatar.js +5 -2
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/banner/Banner.css.js +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +11 -8
- package/dist-es/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-es/button/useButton.js +3 -3
- package/dist-es/button/useButton.js.map +1 -1
- package/dist-es/checkbox/Checkbox.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-es/collapsible/Collapsible.js +50 -0
- package/dist-es/collapsible/Collapsible.js.map +1 -0
- package/dist-es/collapsible/CollapsibleContext.js +26 -0
- package/dist-es/collapsible/CollapsibleContext.js.map +1 -0
- package/dist-es/collapsible/CollapsiblePanel.css.js +4 -0
- package/dist-es/collapsible/CollapsiblePanel.css.js.map +1 -0
- package/dist-es/collapsible/CollapsiblePanel.js +44 -0
- package/dist-es/collapsible/CollapsiblePanel.js.map +1 -0
- package/dist-es/collapsible/CollapsibleTrigger.js +38 -0
- package/dist-es/collapsible/CollapsibleTrigger.js.map +1 -0
- package/dist-es/dialog/Dialog.js +1 -1
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/dialog/DialogHeader.css.js +1 -1
- package/dist-es/divider/Divider.js.map +1 -1
- package/dist-es/index.js +10 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.js +29 -26
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +3 -3
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-es/pagination/PageButton.css.js +1 -1
- package/dist-es/pill/Pill.js +1 -1
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-es/pill-input/useTruncatePills.js +2 -1
- package/dist-es/pill-input/useTruncatePills.js.map +1 -1
- package/dist-es/radio-button/RadioButton.css.js +1 -1
- package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-es/salt-provider/SaltProvider.js +2 -2
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/spinner/Spinner.js +3 -4
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/stepper/Step.js +1 -1
- package/dist-es/stepper/Step.js.map +1 -1
- package/dist-es/stepper/internal/StepText.css.js +1 -1
- package/dist-es/stepper/internal/StepText.js +0 -1
- package/dist-es/stepper/internal/StepText.js.map +1 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +3 -3
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js +1 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +1 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/mergeProps.js +2 -2
- package/dist-es/utils/mergeProps.js.map +1 -1
- package/dist-es/utils/useControlled.js +1 -1
- package/dist-es/utils/useControlled.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +2 -2
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useIsFocusVisible.js +1 -1
- package/dist-es/utils/useIsFocusVisible.js.map +1 -1
- package/dist-es/utils/usePreventScroll.js.map +1 -1
- package/dist-es/utils/usePrevious.js.map +1 -1
- package/dist-es/vertical-navigation/SubMenuContext.js +35 -0
- package/dist-es/vertical-navigation/SubMenuContext.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigation.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigation.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigation.js +36 -0
- package/dist-es/vertical-navigation/VerticalNavigation.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItem.js +50 -0
- package/dist-es/vertical-navigation/VerticalNavigationItem.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.js +86 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemExpansionIcon.js +33 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.js +26 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.js +72 -0
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +4 -0
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js.map +1 -0
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.js +37 -0
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.js.map +1 -0
- package/dist-types/collapsible/Collapsible.d.ts +16 -0
- package/dist-types/collapsible/CollapsibleContext.d.ts +9 -0
- package/dist-types/collapsible/CollapsiblePanel.d.ts +4 -0
- package/dist-types/collapsible/CollapsibleTrigger.d.ts +5 -0
- package/dist-types/collapsible/index.d.ts +3 -0
- package/dist-types/index.d.ts +2 -0
- package/dist-types/vertical-navigation/SubMenuContext.d.ts +14 -0
- package/dist-types/vertical-navigation/VerticalNavigation.d.ts +8 -0
- package/dist-types/vertical-navigation/VerticalNavigationItem.d.ts +12 -0
- package/dist-types/vertical-navigation/VerticalNavigationItemContent.d.ts +4 -0
- package/dist-types/vertical-navigation/VerticalNavigationItemExpansionIcon.d.ts +2 -0
- package/dist-types/vertical-navigation/VerticalNavigationItemLabel.d.ts +4 -0
- package/dist-types/vertical-navigation/VerticalNavigationItemTrigger.d.ts +6 -0
- package/dist-types/vertical-navigation/VerticalNavigationSubMenu.d.ts +4 -0
- package/dist-types/vertical-navigation/index.d.ts +7 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type ReactNode,\n useContext,\n useEffect,\n} from \"react\";\nimport type { ButtonProps } from \"../button\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport {\n StepDepthContext,\n StepperOrientationContext,\n} from \"./internal/StepperProvider\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n /**\n * The label of the step\n */\n label?: ReactNode;\n /**\n * Description text is displayed just below the label\n **/\n description?: ReactNode;\n /**\n * Optional string to determine the status of the step.\n */\n status?: StepStatus;\n /**\n * The stage of the step\n */\n stage?: StepStage;\n /**\n * Whether the step item is expanded.\n */\n expanded?: boolean;\n /**\n * Initial expanded state of the step.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the step is toggled.\n */\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n | \"pending\"\n | \"locked\"\n | \"completed\"\n | \"inprogress\"\n | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n label?: ReactNode;\n description?: ReactNode;\n status?: StepStatus;\n stage?: StepStage;\n expanded?: boolean;\n defaultExpanded?: boolean;\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n {\n id: idProp,\n label,\n description,\n status,\n stage = \"pending\",\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n className,\n style,\n children,\n ...rest\n },\n ref,\n) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n const depth = useContext(StepDepthContext);\n const orientation = useContext(StepperOrientationContext);\n\n const hasNestedSteps = !!children;\n\n const [expanded, setExpanded] = useControlled({\n name: \"Step\",\n state: \"expanded\",\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n });\n\n useComponentCssInjection({\n testId: \"salt-step\",\n css: stepCSS,\n window: targetWindow,\n });\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (depth === -1) {\n console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n }\n if (depth > 2) {\n console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n }\n if (orientation === \"horizontal\" && hasNestedSteps) {\n console.warn(\n \"<Stepper /> does not support nested steps in horizontal orientation!\",\n );\n }\n }\n }, [depth, orientation]);\n\n const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n const state = status || stageText;\n\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n const expandTriggerId = `${id}-expand-trigger`;\n const nestedStepperId = `${id}-nested-stepper`;\n\n const screenReaderOnly = {\n stateId: `${id}-sr-only-state`,\n stateText: state !== \"active\" ? state : \"\",\n substepsId: `${id}-sr-only-substeps`,\n substepsText: \"substeps\",\n toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n toggleSubstepsText: \"toggle substeps\",\n };\n\n return (\n <li\n id={id}\n aria-current={ariaCurrent}\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`depth-${depth}`),\n status && withBaseName(`status-${status}`),\n !hasNestedSteps && withBaseName(\"terminal\"),\n hasNestedSteps && expanded && withBaseName(\"expanded\"),\n hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n className,\n )}\n style={\n {\n \"--saltStep-depth\": depth,\n ...style,\n } as CSSProperties\n }\n {...rest}\n ref={ref}\n >\n <StepScreenReaderOnly>\n {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n </StepScreenReaderOnly>\n {hasNestedSteps && (\n <>\n <StepScreenReaderOnly\n id={screenReaderOnly.toggleSubstepsId}\n aria-hidden\n >\n {screenReaderOnly.toggleSubstepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n {screenReaderOnly.substepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n {screenReaderOnly.stateText}\n </StepScreenReaderOnly>\n </>\n )}\n <StepConnector />\n <StepIcon\n stage={stage}\n status={status}\n sizeMultiplier={iconSizeMultiplier}\n aria-hidden\n />\n {label && (\n <StepText id={labelId} purpose=\"label\" aria-hidden>\n {label}\n </StepText>\n )}\n {description && (\n <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n {description}\n </StepText>\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <StepExpandTrigger\n id={expandTriggerId}\n aria-expanded={expanded}\n aria-controls={nestedStepperId}\n aria-labelledby={[\n labelId,\n descriptionId,\n screenReaderOnly.stateId,\n screenReaderOnly.toggleSubstepsId,\n ].join(\" \")}\n expanded={expanded}\n onClick={(event) => {\n onToggle?.(event);\n setExpanded(!expanded);\n }}\n />\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <Stepper\n id={nestedStepperId}\n aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n aria-hidden={!expanded}\n hidden={!expanded}\n >\n {children}\n </Stepper>\n )}\n </li>\n );\n});\n"],"names":["makePrefixer","forwardRef","Step","useId","useWindow","useContext","StepDepthContext","StepperOrientationContext","useControlled","useComponentCssInjection","stepCSS","useEffect","jsxs","clsx","jsx","StepScreenReaderOnly","Fragment","StepConnector","StepIcon","StepText","StepExpandTrigger","Stepper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAE/B,MAAA,IAAA,GAAOC,gBAAqC,CAAA,SAASC,KAChE,CAAA;AAAA,EACE,EAAI,EAAA,MAAA;AAAA,EACJ,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,QAAU,EAAA,YAAA;AAAA,EACV,eAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAM,MAAA,KAAA,GAAQC,iBAAWC,gCAAgB,CAAA;AACzC,EAAM,MAAA,WAAA,GAAcD,iBAAWE,yCAAyB,CAAA;AAExD,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAC,QAAA;AAEzB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,IAC5C,IAAM,EAAA,MAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,IACP,UAAY,EAAA,YAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,eAAe;AAAA,GACjC,CAAA;AAED,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,UAAU,EAAI,EAAA;AAChB,QAAA,OAAA,CAAQ,KAAK,yDAAyD,CAAA;AAAA;AAExE,MAAA,IAAI,QAAQ,CAAG,EAAA;AACb,QAAA,OAAA,CAAQ,KAAK,wDAAwD,CAAA;AAAA;AAEvE,MAAI,IAAA,WAAA,KAAgB,gBAAgB,cAAgB,EAAA;AAClD,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF;AACF,GACC,EAAA,CAAC,KAAO,EAAA,WAAW,CAAC,CAAA;AAEvB,EAAM,MAAA,WAAA,GAAc,KAAU,KAAA,QAAA,GAAW,MAAS,GAAA,MAAA;AAClD,EAAM,MAAA,kBAAA,GAAqB,KAAU,KAAA,CAAA,GAAI,GAAM,GAAA,CAAA;AAC/C,EAAM,MAAA,SAAA,GAAY,KAAU,KAAA,YAAA,GAAe,aAAgB,GAAA,KAAA;AAC3D,EAAA,MAAM,QAAQ,MAAU,IAAA,SAAA;AAExB,EAAM,MAAA,OAAA,GAAU,GAAG,EAAE,CAAA,MAAA,CAAA;AACrB,EAAM,MAAA,aAAA,GAAgB,GAAG,EAAE,CAAA,YAAA,CAAA;AAC3B,EAAM,MAAA,eAAA,GAAkB,GAAG,EAAE,CAAA,eAAA,CAAA;AAC7B,EAAM,MAAA,eAAA,GAAkB,GAAG,EAAE,CAAA,eAAA,CAAA;AAE7B,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,OAAA,EAAS,GAAG,EAAE,CAAA,cAAA,CAAA;AAAA,IACd,SAAA,EAAW,KAAU,KAAA,QAAA,GAAW,KAAQ,GAAA,EAAA;AAAA,IACxC,UAAA,EAAY,GAAG,EAAE,CAAA,iBAAA,CAAA;AAAA,IACjB,YAAc,EAAA,UAAA;AAAA,IACd,gBAAA,EAAkB,GAAG,EAAE,CAAA,wBAAA,CAAA;AAAA,IACvB,kBAAoB,EAAA;AAAA,GACtB;AAEA,EACE,uBAAAC,eAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,cAAc,EAAA,WAAA;AAAA,MACd,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,CAAS,MAAA,EAAA,KAAK,CAAE,CAAA,CAAA;AAAA,QAC7B,YAAA,CAAa,CAAS,MAAA,EAAA,KAAK,CAAE,CAAA,CAAA;AAAA,QAC7B,MAAU,IAAA,YAAA,CAAa,CAAU,OAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAAA,QACzC,CAAC,cAAkB,IAAA,YAAA,CAAa,UAAU,CAAA;AAAA,QAC1C,cAAA,IAAkB,QAAY,IAAA,YAAA,CAAa,UAAU,CAAA;AAAA,QACrD,cAAkB,IAAA,CAAC,QAAY,IAAA,YAAA,CAAa,WAAW,CAAA;AAAA,QACvD;AAAA,OACF;AAAA,MACA,KACE,EAAA;AAAA,QACE,kBAAoB,EAAA,KAAA;AAAA,QACpB,GAAG;AAAA,OACL;AAAA,MAED,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,yCAAA,EAAA,EACE,QAAG,EAAA,CAAA,EAAA,KAAK,CAAI,CAAA,EAAA,WAAA,KAAgB,MAAY,GAAA,WAAA,GAAc,EAAE,CAAA,CAAA,EAAI,gBAAiB,CAAA,SAAS,CACzF,CAAA,EAAA,CAAA;AAAA,QACC,kCAEGH,eAAA,CAAAI,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAAF,cAAA;AAAA,YAACC,yCAAA;AAAA,YAAA;AAAA,cACC,IAAI,gBAAiB,CAAA,gBAAA;AAAA,cACrB,aAAW,EAAA,IAAA;AAAA,cAEV,QAAiB,EAAA,gBAAA,CAAA;AAAA;AAAA,WACpB;AAAA,0BACAD,cAAA,CAACC,6CAAqB,EAAI,EAAA,gBAAA,CAAiB,YAAY,aAAW,EAAA,IAAA,EAC/D,2BAAiB,YACpB,EAAA,CAAA;AAAA,0BACAD,cAAA,CAACC,6CAAqB,EAAI,EAAA,gBAAA,CAAiB,SAAS,aAAW,EAAA,IAAA,EAC5D,2BAAiB,SACpB,EAAA;AAAA,SACF,EAAA,CAAA;AAAA,uCAEDE,2BAAc,EAAA,EAAA,CAAA;AAAA,wBACfH,cAAA;AAAA,UAACI,iBAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,MAAA;AAAA,YACA,cAAgB,EAAA,kBAAA;AAAA,YAChB,aAAW,EAAA;AAAA;AAAA,SACb;AAAA,QACC,KAAA,mCACEC,iBAAS,EAAA,EAAA,EAAA,EAAI,SAAS,OAAQ,EAAA,OAAA,EAAQ,aAAW,EAAA,IAAA,EAC/C,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,QAED,WAAA,mCACEA,iBAAS,EAAA,EAAA,EAAA,EAAI,eAAe,OAAQ,EAAA,aAAA,EAAc,aAAW,EAAA,IAAA,EAC3D,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,QAED,cAAA,IAAkB,gBAAgB,UACjC,oBAAAL,cAAA;AAAA,UAACM,mCAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA,eAAA;AAAA,YACJ,eAAe,EAAA,QAAA;AAAA,YACf,eAAe,EAAA,eAAA;AAAA,YACf,iBAAiB,EAAA;AAAA,cACf,OAAA;AAAA,cACA,aAAA;AAAA,cACA,gBAAiB,CAAA,OAAA;AAAA,cACjB,gBAAiB,CAAA;AAAA,aACnB,CAAE,KAAK,GAAG,CAAA;AAAA,YACV,QAAA;AAAA,YACA,OAAA,EAAS,CAAC,KAAU,KAAA;AAClB,cAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AACX,cAAA,WAAA,CAAY,CAAC,QAAQ,CAAA;AAAA;AACvB;AAAA,SACF;AAAA,QAED,cAAA,IAAkB,gBAAgB,UACjC,oBAAAN,cAAA;AAAA,UAACO,eAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA,eAAA;AAAA,YACJ,mBAAiB,CAAC,OAAA,EAAS,iBAAiB,UAAU,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA,YAChE,eAAa,CAAC,QAAA;AAAA,YACd,QAAQ,CAAC,QAAA;AAAA,YAER;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type ReactNode,\n useContext,\n useEffect,\n} from \"react\";\nimport type { ButtonProps } from \"../button\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport {\n StepDepthContext,\n StepperOrientationContext,\n} from \"./internal/StepperProvider\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n /**\n * The label of the step\n */\n label?: ReactNode;\n /**\n * Description text is displayed just below the label\n **/\n description?: ReactNode;\n /**\n * Optional string to determine the status of the step.\n */\n status?: StepStatus;\n /**\n * The stage of the step\n */\n stage?: StepStage;\n /**\n * Whether the step item is expanded.\n */\n expanded?: boolean;\n /**\n * Initial expanded state of the step.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the step is toggled.\n */\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n | \"pending\"\n | \"locked\"\n | \"completed\"\n | \"inprogress\"\n | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n label?: ReactNode;\n description?: ReactNode;\n status?: StepStatus;\n stage?: StepStage;\n expanded?: boolean;\n defaultExpanded?: boolean;\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n {\n id: idProp,\n label,\n description,\n status,\n stage = \"pending\",\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n className,\n style,\n children,\n ...rest\n },\n ref,\n) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n const depth = useContext(StepDepthContext);\n const orientation = useContext(StepperOrientationContext);\n\n const hasNestedSteps = !!children;\n\n const [expanded, setExpanded] = useControlled({\n name: \"Step\",\n state: \"expanded\",\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n });\n\n useComponentCssInjection({\n testId: \"salt-step\",\n css: stepCSS,\n window: targetWindow,\n });\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (depth === -1) {\n console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n }\n if (depth > 2) {\n console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n }\n if (orientation === \"horizontal\" && hasNestedSteps) {\n console.warn(\n \"<Stepper /> does not support nested steps in horizontal orientation!\",\n );\n }\n }\n }, [depth, orientation, hasNestedSteps]);\n\n const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n const state = status || stageText;\n\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n const expandTriggerId = `${id}-expand-trigger`;\n const nestedStepperId = `${id}-nested-stepper`;\n\n const screenReaderOnly = {\n stateId: `${id}-sr-only-state`,\n stateText: state !== \"active\" ? state : \"\",\n substepsId: `${id}-sr-only-substeps`,\n substepsText: \"substeps\",\n toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n toggleSubstepsText: \"toggle substeps\",\n };\n\n return (\n <li\n id={id}\n aria-current={ariaCurrent}\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`depth-${depth}`),\n status && withBaseName(`status-${status}`),\n !hasNestedSteps && withBaseName(\"terminal\"),\n hasNestedSteps && expanded && withBaseName(\"expanded\"),\n hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n className,\n )}\n style={\n {\n \"--saltStep-depth\": depth,\n ...style,\n } as CSSProperties\n }\n {...rest}\n ref={ref}\n >\n <StepScreenReaderOnly>\n {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n </StepScreenReaderOnly>\n {hasNestedSteps && (\n <>\n <StepScreenReaderOnly\n id={screenReaderOnly.toggleSubstepsId}\n aria-hidden\n >\n {screenReaderOnly.toggleSubstepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n {screenReaderOnly.substepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n {screenReaderOnly.stateText}\n </StepScreenReaderOnly>\n </>\n )}\n <StepConnector />\n <StepIcon\n stage={stage}\n status={status}\n sizeMultiplier={iconSizeMultiplier}\n aria-hidden\n />\n {label && (\n <StepText id={labelId} purpose=\"label\" aria-hidden>\n {label}\n </StepText>\n )}\n {description && (\n <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n {description}\n </StepText>\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <StepExpandTrigger\n id={expandTriggerId}\n aria-expanded={expanded}\n aria-controls={nestedStepperId}\n aria-labelledby={[\n labelId,\n descriptionId,\n screenReaderOnly.stateId,\n screenReaderOnly.toggleSubstepsId,\n ].join(\" \")}\n expanded={expanded}\n onClick={(event) => {\n onToggle?.(event);\n setExpanded(!expanded);\n }}\n />\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <Stepper\n id={nestedStepperId}\n aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n aria-hidden={!expanded}\n hidden={!expanded}\n >\n {children}\n </Stepper>\n )}\n </li>\n );\n});\n"],"names":["makePrefixer","forwardRef","Step","useId","useWindow","useContext","StepDepthContext","StepperOrientationContext","useControlled","useComponentCssInjection","stepCSS","useEffect","jsxs","clsx","jsx","StepScreenReaderOnly","Fragment","StepConnector","StepIcon","StepText","StepExpandTrigger","Stepper"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltStepText-label {\n grid-area: label;\n}\n\n.saltStepper-horizontal .saltStepText-label {\n margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-left: calc(
|
|
3
|
+
var css_248z = ".saltStepText-label {\n grid-area: label;\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight);\n}\n\n.saltStepper-horizontal .saltStepText-label {\n margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltStepText-description {\n grid-area: description;\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n font-family: var(--salt-text-label-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltStepper-vertical .saltStepText-description {\n padding-bottom: var(--salt-spacing-300);\n padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n color: var(--salt-status-error-foreground-informative);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=StepText.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n id,\n purpose,\n className,\n styleAs = \"label\",\n children,\n ...props\n}: StepTextProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-text\",\n css: stepTextCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n
|
|
1
|
+
{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n id,\n purpose,\n className,\n styleAs = \"label\",\n children,\n ...props\n}: StepTextProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-text\",\n css: stepTextCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n className={clsx(withBaseName(), withBaseName(purpose), className)}\n {...props}\n >\n {children}\n </Text>\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the switch will be checked.\n */\n checked?: boolean;\n /**\n * Whether the switch component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the switch will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n /**\n * The label to be shown next to the switch.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when switch loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when switch gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the switch.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n function Switch(props, ref) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckmarkSolidIcon\n aria-hidden\n className={withBaseName(\"icon\")}\n />\n )}\n </span>\n </span>\n {label && <span className={withBaseName(\"label\")}>{label}</span>}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Switch","useWindow","useComponentCssInjection","switchCss","useControlled","useFormFieldProps","value","jsxs","clsx","jsx","CheckmarkSolidIcon"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the switch will be checked.\n */\n checked?: boolean;\n /**\n * Whether the switch component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the switch will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n /**\n * The label to be shown next to the switch.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when switch loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when switch gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the switch.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n function Switch(props, ref) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n // biome-ignore lint/a11y/useAriaPropsForRole: aria-checked is not needed when input and checked is used.\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckmarkSolidIcon\n aria-hidden\n className={withBaseName(\"icon\")}\n />\n )}\n </span>\n </span>\n {label && <span className={withBaseName(\"label\")}>{label}</span>}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Switch","useWindow","useComponentCssInjection","switchCss","useControlled","useFormFieldProps","value","jsxs","clsx","jsx","CheckmarkSolidIcon"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltText {\n --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n
|
|
3
|
+
var css_248z = ".saltText {\n --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Info color */\n.saltText-info {\n --text-color: var(--salt-status-info-foreground-informative);\n}\n\n/* Error color */\n.saltText-error {\n --text-color: var(--salt-status-error-foreground-informative);\n}\n\n/* Warning color */\n.saltText-warning {\n --text-color: var(--salt-status-warning-foreground-informative);\n}\n\n/* Success color */\n.saltText-success {\n --text-color: var(--salt-status-success-foreground-informative);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n font-family: var(--salt-text-notation-fontFamily);\n font-size: var(--salt-text-notation-fontSize);\n line-height: var(--salt-text-notation-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n text-align: var(--salt-text-action-textAlign);\n font-weight: var(--salt-text-action-fontWeight);\n}\n.saltText-action.saltText strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n.saltText-action.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 1 emphasis strong */\n.saltText-display1.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display1-fontWeight-strong);\n}\n\n/* Display 1 emphasis small */\n.saltText-display1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display1-fontWeight-small);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 2 emphasis strong */\n.saltText-display2.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display2-fontWeight-strong);\n}\n\n/* Display 2 emphasis small */\n.saltText-display2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display2-fontWeight-small);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Display 3 emphasis strong */\n.saltText-display3.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display3-fontWeight-strong);\n}\n\n/* Display 3 emphasis small */\n.saltText-display3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display3-fontWeight-small);\n}\n\n/* Display 4 */\n.saltText-display4.saltText {\n font-family: var(--salt-text-display4-fontFamily);\n font-size: var(--salt-text-display4-fontSize);\n font-weight: var(--salt-text-display4-fontWeight);\n line-height: var(--salt-text-display4-lineHeight);\n}\n\n/* Display 4 emphasis strong */\n.saltText-display4.saltText strong {\n font-size: inherit;\n font-weight: var(--salt-text-display4-fontWeight-strong);\n}\n\n/* Display 4 emphasis small */\n.saltText-display4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-display4-fontWeight-small);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Text.css.js.map
|
|
@@ -6,6 +6,7 @@ var window = require('@salt-ds/window');
|
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
9
|
+
var ownerDocument = require('../utils/ownerDocument.js');
|
|
9
10
|
var useControlled = require('../utils/useControlled.js');
|
|
10
11
|
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
11
12
|
var useForkRef = require('../utils/useForkRef.js');
|
|
@@ -100,9 +101,8 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
|
|
|
100
101
|
const elements = Array.from(
|
|
101
102
|
((_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) ?? []
|
|
102
103
|
);
|
|
103
|
-
const
|
|
104
|
-
|
|
105
|
-
);
|
|
104
|
+
const doc = ownerDocument.ownerDocument(groupRef.current);
|
|
105
|
+
const currentIndex = elements.indexOf(doc.activeElement);
|
|
106
106
|
switch (event.key) {
|
|
107
107
|
case "ArrowDown":
|
|
108
108
|
case "ArrowRight":
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport {
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport {\n makePrefixer,\n ownerDocument,\n useControlled,\n useForkRef,\n} from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n ToggleButtonGroupContext,\n type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The appearance of all the toggle buttons within the group.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * Value of the toggle button group, to be used when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button group will be read-only.\n */\n readOnly?: boolean;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The visual sentimenent of all the toggle buttons within the group.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n appearance,\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n readOnly,\n sentiment,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value],\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value],\n );\n\n const focus = useCallback((id: Value) => {\n setFocused(id);\n }, []);\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused],\n );\n\n const contextValue = useMemo(\n () => ({\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n }),\n [\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n ],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n );\n\n const doc = ownerDocument(groupRef.current);\n\n const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n aria-disabled={disabled}\n aria-readonly={readOnly}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n disabled && withBaseName(\"disabled\"),\n readOnly && withBaseName(\"readOnly\"),\n className,\n )}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","ownerDocument","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
|
|
@@ -61,7 +61,7 @@ const Tooltip = React.forwardRef(
|
|
|
61
61
|
} = useTooltip.useTooltip(hookProps);
|
|
62
62
|
const triggerRef = useForkRef.useForkRef(getRefFromChildren.getRefFromChildren(children), reference);
|
|
63
63
|
const floatingRef = useForkRef.useForkRef(floating, ref);
|
|
64
|
-
const hasContent = content
|
|
64
|
+
const hasContent = content != null && content !== "";
|
|
65
65
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
66
66
|
React.isValidElement(children) && React.cloneElement(children, {
|
|
67
67
|
...mergeProps.mergeProps(getTriggerProps(), children.props),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n type HTMLAttributes,\n isValidElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n VALIDATION_NAMED_STATUS,\n type ValidationStatus,\n} from \"../status-indicator\";\nimport {\n getRefFromChildren,\n makePrefixer,\n mergeProps,\n type UseFloatingUIProps,\n useFloatingComponent,\n useForkRef,\n} from \"../utils\";\nimport { TooltipBase } from \"./TooltipBase\";\nimport { type UseTooltipProps, useTooltip } from \"./useTooltip\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n * If no status is provided, icon will also be hidden.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp,\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = disabledProp || formFieldDisabled;\n const status =\n statusProp ??\n (formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : undefined);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n disabled,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n const hasContent = content
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n type HTMLAttributes,\n isValidElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n VALIDATION_NAMED_STATUS,\n type ValidationStatus,\n} from \"../status-indicator\";\nimport {\n getRefFromChildren,\n makePrefixer,\n mergeProps,\n type UseFloatingUIProps,\n useFloatingComponent,\n useForkRef,\n} from \"../utils\";\nimport { TooltipBase } from \"./TooltipBase\";\nimport { type UseTooltipProps, useTooltip } from \"./useTooltip\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n * If no status is provided, icon will also be hidden.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp,\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = disabledProp || formFieldDisabled;\n const status =\n statusProp ??\n (formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : undefined);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n disabled,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n const hasContent = content != null && content !== \"\";\n\n return (\n <>\n {isValidElement<{ ref?: Ref<unknown> }>(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className,\n )}\n open={open && !disabled && hasContent}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","VALIDATION_NAMED_STATUS","useFloatingComponent","useTooltip","useForkRef","getRefFromChildren","jsxs","Fragment","isValidElement","cloneElement","mergeProps","jsx","clsx","TooltipBase"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAgDxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACb,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA;AAAA,QAChBC,mCAAkB,EAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA;AACjC,IAAM,MAAA,MAAA,GACJ,eACC,yBAA8B,KAAA,MAAA,IAC/BC,yCAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,MAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,kCAAqB,EAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA,CAAWC,qCAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,IAAM,MAAA,WAAA,GAAcD,qBAA2B,CAAA,QAAA,EAAU,GAAG,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,OAAW,IAAA,IAAA,IAAQ,OAAY,KAAA,EAAA;AAElD,IAAA,uBAEKE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAuCC,oBAAA,CAAA,QAAQ,CAC9C,IAAAC,kBAAA,CAAa,QAAU,EAAA;AAAA,QACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,QAC/C,GAAK,EAAA;AAAA,OACN,CAAA;AAAA,sBAEHC,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAAC,SAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,YACvC;AAAA,WACF;AAAA,UACA,IAAA,EAAM,IAAQ,IAAA,CAAC,QAAY,IAAA,UAAA;AAAA,UAC1B,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAA,kBAAAD,cAAA;AAAA,YAACE,uBAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,MAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -71,7 +71,7 @@ function useTooltip(props) {
|
|
|
71
71
|
context
|
|
72
72
|
};
|
|
73
73
|
const getTooltipProps = () => {
|
|
74
|
-
const { tabIndex, ...tooltipProps } = getFloatingProps({
|
|
74
|
+
const { tabIndex: _tabIndex, ...tooltipProps } = getFloatingProps({
|
|
75
75
|
// @ts-expect-error - `data-*` props need extra typing when not used on a DOM element.
|
|
76
76
|
"data-placement": placement,
|
|
77
77
|
ref: floating
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { type HTMLProps, useRef } from \"react\";\nimport {\n type UseFloatingUIProps,\n useControlled,\n useFloatingUI,\n} from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * When `true`, the tooltip will be disabled.\n */\n disabled?: boolean;\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n disabled,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props ?? {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const { floating, reference, x, y, strategy, placement, context, elements } =\n useFloatingUI({\n open: disabled ? false : open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n shift({ limiter: limitShift() }),\n flip({\n fallbackAxisSideDirection: \"end\",\n fallbackStrategy: \"initialPlacement\",\n }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !(disableHoverListener || disabled),\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !(disableFocusListener || disabled) }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context, { enabled: !disabled }),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n // tabIndex
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { type HTMLProps, useRef } from \"react\";\nimport {\n type UseFloatingUIProps,\n useControlled,\n useFloatingUI,\n} from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * When `true`, the tooltip will be disabled.\n */\n disabled?: boolean;\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n disabled,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props ?? {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const { floating, reference, x, y, strategy, placement, context, elements } =\n useFloatingUI({\n open: disabled ? false : open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n shift({ limiter: limitShift() }),\n flip({\n fallbackAxisSideDirection: \"end\",\n fallbackStrategy: \"initialPlacement\",\n }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !(disableHoverListener || disabled),\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !(disableFocusListener || disabled) }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context, { enabled: !disabled }),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n // tabIndex causes axe errors because it is set to \"-1\".\n const { tabIndex: _tabIndex, ...tooltipProps } = getFloatingProps({\n // @ts-expect-error - `data-*` props need extra typing when not used on a DOM element.\n \"data-placement\": placement,\n ref: floating,\n });\n\n return tooltipProps;\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","shift","limitShift","flip","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ var createChainedFunction = require('./createChainedFunction.js');
|
|
|
5
5
|
|
|
6
6
|
function mergeProps(propsA, propsB) {
|
|
7
7
|
const props = { ...propsA };
|
|
8
|
-
Object.keys(propsB)
|
|
8
|
+
for (const key of Object.keys(propsB)) {
|
|
9
9
|
const a = props[key];
|
|
10
10
|
const b = propsB[key];
|
|
11
11
|
if (typeof a === "function" && typeof b === "function" && key.indexOf("on") === 0) {
|
|
@@ -15,7 +15,7 @@ function mergeProps(propsA, propsB) {
|
|
|
15
15
|
} else {
|
|
16
16
|
props[key] = b !== void 0 ? b : a;
|
|
17
17
|
}
|
|
18
|
-
}
|
|
18
|
+
}
|
|
19
19
|
return props;
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeProps.js","sources":["../src/utils/mergeProps.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { createChainedFunction } from \"./createChainedFunction\";\n\ninterface Props {\n [key: string]: unknown;\n}\n\n/**\n * This utility merges two prop objects according to the following rules:\n *\n * - If the prop is a function and begins with \"on\" then chain the functions together\n * - If the prop key is \"className\" then merge them using `clsx`\n * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter\n */\nexport function mergeProps(\n propsA: Props,\n propsB: Props,\n): Record<string, unknown> {\n const props = { ...propsA };\n\n Object.keys(propsB)
|
|
1
|
+
{"version":3,"file":"mergeProps.js","sources":["../src/utils/mergeProps.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { createChainedFunction } from \"./createChainedFunction\";\n\ninterface Props {\n [key: string]: unknown;\n}\n\n/**\n * This utility merges two prop objects according to the following rules:\n *\n * - If the prop is a function and begins with \"on\" then chain the functions together\n * - If the prop key is \"className\" then merge them using `clsx`\n * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter\n */\nexport function mergeProps(\n propsA: Props,\n propsB: Props,\n): Record<string, unknown> {\n const props = { ...propsA };\n\n for (const key of Object.keys(propsB)) {\n const a: any = props[key];\n const b: any = propsB[key];\n\n if (\n typeof a === \"function\" &&\n typeof b === \"function\" &&\n key.indexOf(\"on\") === 0\n ) {\n props[key] = createChainedFunction(a, b);\n } else if (\n typeof a === \"string\" &&\n typeof b === \"string\" &&\n key === \"className\"\n ) {\n props[key] = clsx(a, b);\n } else {\n props[key] = b !== undefined ? b : a;\n }\n }\n\n return props;\n}\n"],"names":["createChainedFunction","clsx"],"mappings":";;;;;AAcgB,SAAA,UAAA,CACd,QACA,MACyB,EAAA;AACzB,EAAM,MAAA,KAAA,GAAQ,EAAE,GAAG,MAAO,EAAA;AAE1B,EAAA,KAAA,MAAW,GAAO,IAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAG,EAAA;AACrC,IAAM,MAAA,CAAA,GAAS,MAAM,GAAG,CAAA;AACxB,IAAM,MAAA,CAAA,GAAS,OAAO,GAAG,CAAA;AAEzB,IACE,IAAA,OAAO,CAAM,KAAA,UAAA,IACb,OAAO,CAAA,KAAM,cACb,GAAI,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CACtB,EAAA;AACA,MAAA,KAAA,CAAM,GAAG,CAAA,GAAIA,2CAAsB,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KACzC,MAAA,IACE,OAAO,CAAM,KAAA,QAAA,IACb,OAAO,CAAM,KAAA,QAAA,IACb,QAAQ,WACR,EAAA;AACA,MAAA,KAAA,CAAM,GAAG,CAAA,GAAIC,SAAK,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,KAAA,CAAM,GAAG,CAAA,GAAI,CAAM,KAAA,MAAA,GAAY,CAAI,GAAA,CAAA;AAAA;AACrC;AAGF,EAAO,OAAA,KAAA;AACT;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useControlled.js","sources":["../src/utils/useControlled.ts"],"sourcesContent":["import {\n type Dispatch,\n isValidElement,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nexport interface UseControlledProps<T> {\n /**\n * Holds the component value when it's controlled.\n */\n controlled?: T;\n /**\n * The default value when uncontrolled.\n */\n default: T;\n /**\n * The component name displayed in warnings.\n */\n name: string;\n /**\n * The name of the state variable displayed in warnings.\n */\n state?: string;\n}\n\n/**\n * Copied from MUI (v5) useControlled hook with one additional returned value\n * @see https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/packages/material-ui-utils/src/useControlled.js\n */\nexport function useControlled<S>({\n controlled,\n default: defaultProp,\n name,\n state = \"value\",\n}: UseControlledProps<S>): [S, Dispatch<SetStateAction<S>>, boolean] {\n const { current: isControlled } = useRef(controlled !== undefined);\n const [valueState, setValue] = useState<S>(defaultProp);\n const value = controlled !== undefined ? controlled : valueState;\n const { current: defaultValue } = useRef(defaultProp);\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (isControlled !== (controlled !== undefined)) {\n console.error(\n [\n `Salt: A component is changing the ${\n isControlled ? \"\" : \"un\"\n }controlled ${state} state of ${name} to be ${\n isControlled ? \"un\" : \"\"\n }controlled.`,\n \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,\n \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n \"More info: https://reactjs.org/link/controlled-components\",\n ].join(\"\\n\"),\n );\n }\n }\n return undefined;\n }, [state, name, controlled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: uses JSON.stringify to compare defaultProp\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isControlled && defaultValue !== defaultProp) {\n console.error(\n [\n `Salt: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +\n `To suppress this warning opt to use a controlled ${name}.`,\n ].join(\"\\n\"),\n );\n }\n }\n return undefined;\n }, [JSON.stringify(defaultProp, ignoreReactElements)]);\n\n const setValueIfUncontrolled: Dispatch<SetStateAction<S>> = useCallback(\n (newValue) => {\n if (!isControlled) {\n setValue(newValue);\n }\n },\n [],\n );\n\n return [value, setValueIfUncontrolled, isControlled];\n}\n\n// Ignore ReactElements in JSON, they contain circular refs\nfunction ignoreReactElements<T>(
|
|
1
|
+
{"version":3,"file":"useControlled.js","sources":["../src/utils/useControlled.ts"],"sourcesContent":["import {\n type Dispatch,\n isValidElement,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nexport interface UseControlledProps<T> {\n /**\n * Holds the component value when it's controlled.\n */\n controlled?: T;\n /**\n * The default value when uncontrolled.\n */\n default: T;\n /**\n * The component name displayed in warnings.\n */\n name: string;\n /**\n * The name of the state variable displayed in warnings.\n */\n state?: string;\n}\n\n/**\n * Copied from MUI (v5) useControlled hook with one additional returned value\n * @see https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/packages/material-ui-utils/src/useControlled.js\n */\nexport function useControlled<S>({\n controlled,\n default: defaultProp,\n name,\n state = \"value\",\n}: UseControlledProps<S>): [S, Dispatch<SetStateAction<S>>, boolean] {\n const { current: isControlled } = useRef(controlled !== undefined);\n const [valueState, setValue] = useState<S>(defaultProp);\n const value = controlled !== undefined ? controlled : valueState;\n const { current: defaultValue } = useRef(defaultProp);\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (isControlled !== (controlled !== undefined)) {\n console.error(\n [\n `Salt: A component is changing the ${\n isControlled ? \"\" : \"un\"\n }controlled ${state} state of ${name} to be ${\n isControlled ? \"un\" : \"\"\n }controlled.`,\n \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,\n \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n \"More info: https://reactjs.org/link/controlled-components\",\n ].join(\"\\n\"),\n );\n }\n }\n return undefined;\n }, [state, name, controlled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: uses JSON.stringify to compare defaultProp\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isControlled && defaultValue !== defaultProp) {\n console.error(\n [\n `Salt: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +\n `To suppress this warning opt to use a controlled ${name}.`,\n ].join(\"\\n\"),\n );\n }\n }\n return undefined;\n }, [JSON.stringify(defaultProp, ignoreReactElements)]);\n\n const setValueIfUncontrolled: Dispatch<SetStateAction<S>> = useCallback(\n (newValue) => {\n if (!isControlled) {\n setValue(newValue);\n }\n },\n [],\n );\n\n return [value, setValueIfUncontrolled, isControlled];\n}\n\n// Ignore ReactElements in JSON, they contain circular refs\nfunction ignoreReactElements<T>(_key: string, value: T): T | null {\n return isValidElement(value) ? null : value;\n}\n"],"names":["useRef","useState","useEffect","useCallback","isValidElement"],"mappings":";;;;AAiCO,SAAS,aAAiB,CAAA;AAAA,EAC/B,UAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,IAAA;AAAA,EACA,KAAQ,GAAA;AACV,CAAqE,EAAA;AACnE,EAAA,MAAM,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAAA,YAAA,CAAO,eAAe,MAAS,CAAA;AACjE,EAAA,MAAM,CAAC,UAAA,EAAY,QAAQ,CAAA,GAAIC,eAAY,WAAW,CAAA;AACtD,EAAM,MAAA,KAAA,GAAQ,UAAe,KAAA,MAAA,GAAY,UAAa,GAAA,UAAA;AACtD,EAAA,MAAM,EAAE,OAAA,EAAS,YAAa,EAAA,GAAID,aAAO,WAAW,CAAA;AAEpD,EAAAE,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,YAAA,MAAkB,eAAe,MAAY,CAAA,EAAA;AAC/C,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAAA,kCAAA,EACE,YAAe,GAAA,EAAA,GAAK,IACtB,CAAA,WAAA,EAAc,KAAK,CAAA,UAAA,EAAa,IAAI,CAAA,OAAA,EAClC,YAAe,GAAA,IAAA,GAAO,EACxB,CAAA,WAAA,CAAA;AAAA,YACA,6EAAA;AAAA,YACA,qDAAqD,IAAI,CAAA,2CAAA,CAAA;AAAA,YACzD,4HAAA;AAAA,YACA;AAAA,WACF,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,MAAA;AAAA,GACN,EAAA,CAAC,KAAO,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA;AAG5B,EAAAA,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,CAAC,YAAgB,IAAA,YAAA,KAAiB,WAAa,EAAA;AACjD,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAA6C,0CAAA,EAAA,KAAK,CAA6B,0BAAA,EAAA,IAAI,8EAC7B,IAAI,CAAA,CAAA;AAAA,WAC5D,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,MAAA;AAAA,KACN,CAAC,IAAA,CAAK,UAAU,WAAa,EAAA,mBAAmB,CAAC,CAAC,CAAA;AAErD,EAAA,MAAM,sBAAsD,GAAAC,iBAAA;AAAA,IAC1D,CAAC,QAAa,KAAA;AACZ,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;AACnB,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA,CAAC,KAAO,EAAA,sBAAA,EAAwB,YAAY,CAAA;AACrD;AAGA,SAAS,mBAAA,CAAuB,MAAc,KAAoB,EAAA;AAChE,EAAO,OAAAC,oBAAA,CAAe,KAAK,CAAA,GAAI,IAAO,GAAA,KAAA;AACxC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n autoUpdate,\n FloatingFocusManager,\n type FloatingFocusManagerProps,\n FloatingPortal,\n flip,\n limitShift,\n type Middleware,\n type Platform,\n platform,\n type Strategy,\n shift,\n type UseFloatingOptions,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n type ComponentPropsWithoutRef,\n createContext,\n forwardRef,\n type ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n * `width` and `height` are used to define the size of the floating element.\n *\n */\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n position?: Strategy;\n /**\n * Makes the page unscrollable when the floating component is open.\n */\n lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n width,\n height,\n focusManagerProps,\n lockScroll,\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n\n const { themeNext } = useTheme();\n usePreventScroll({ isDisabled: !lockScroll || !open });\n\n const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n if (focusManagerProps && open) {\n return (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </ChosenSaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <div style={style} {...rest} ref={ref} />\n </ChosenSaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps,\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n extends Pick<\n UseFloatingOptions,\n \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n > {\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame],\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n ...other\n } = props;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n open,\n boolean,\n reason,\n ) => {\n update();\n onOpenChange?.(open, boolean, reason);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n ...other,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","useTheme","usePreventScroll","SaltProviderNext","SaltProvider","FloatingPortal","jsx","FloatingFocusManager","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n autoUpdate,\n FloatingFocusManager,\n type FloatingFocusManagerProps,\n FloatingPortal,\n flip,\n limitShift,\n type Middleware,\n type Platform,\n platform,\n type Strategy,\n shift,\n type UseFloatingOptions,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n type ComponentPropsWithoutRef,\n createContext,\n forwardRef,\n type ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determining whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Use this prop when `FloatingFocusManager` is needed for floating component\n */\n focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n /**\n * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n * `width` and `height` are used to define the size of the floating element.\n *\n */\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n position?: Strategy;\n /**\n * Makes the page unscrollable when the floating component is open.\n */\n lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n width: _width,\n height: _height,\n focusManagerProps,\n lockScroll,\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n\n const { themeNext } = useTheme();\n usePreventScroll({ isDisabled: !lockScroll || !open });\n\n const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n if (focusManagerProps && open) {\n return (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <FloatingFocusManager {...focusManagerProps}>\n <div style={style} {...rest} ref={ref} />\n </FloatingFocusManager>\n </ChosenSaltProvider>\n </FloatingPortal>\n );\n }\n\n return open ? (\n <FloatingPortal>\n <ChosenSaltProvider applyClassesTo=\"scope\">\n <div style={style} {...rest} ref={ref} />\n </ChosenSaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps,\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n extends Pick<\n UseFloatingOptions,\n \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n > {\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame || false,\n }),\n [platformProp, middleware, animationFrame],\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n ...other\n } = props;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n open,\n boolean,\n reason,\n ) => {\n update();\n onOpenChange?.(open, boolean, reason);\n };\n\n const {\n platform: contextPlatform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n ...other,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlatform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","useTheme","usePreventScroll","SaltProviderNext","SaltProvider","FloatingPortal","jsx","FloatingFocusManager","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsFocusVisible.js","sources":["../src/utils/useIsFocusVisible.ts"],"sourcesContent":["// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js\nimport {\n type FocusEvent,\n type MutableRefObject,\n type Ref,\n useCallback,\n useRef,\n} from \"react\";\n\nlet hadKeyboardEvent = true;\nlet hadFocusVisibleRecently = false;\nlet hadFocusVisibleRecentlyTimeout: number;\n\nconst inputTypesWhitelist: Record<string, boolean> = {\n text: true,\n search: true,\n url: true,\n tel: true,\n email: true,\n password: true,\n number: true,\n date: true,\n month: true,\n week: true,\n time: true,\n datetime: true,\n \"datetime-local\": true,\n};\n\n/**\n * Computes whether the given element should automatically trigger the\n * `focus-visible` class being added, i.e. whether it should always match\n * `:focus-visible` when focused.\n * @param {Element} node\n * @returns {boolean}\n */\nfunction focusTriggersKeyboardModality(node: HTMLElement) {\n if (\n node.tagName === \"INPUT\" &&\n inputTypesWhitelist[(node as HTMLInputElement).type] &&\n !(node as HTMLInputElement).readOnly\n ) {\n return true;\n }\n\n if (node.tagName === \"TEXTAREA\" && !(node as HTMLInputElement).readOnly) {\n return true;\n }\n\n return node.isContentEditable;\n}\n\n/**\n * Keep track of our keyboard modality state with `hadKeyboardEvent`.\n * If the most recent user interaction was via the keyboard;\n * and the key press did not include a meta, alt/option, or control key;\n * then the modality is keyboard. Otherwise, the modality is not keyboard.\n * @param {KeyboardEvent} event\n */\nfunction handleKeyDown(event: KeyboardEvent) {\n if (event.metaKey || event.altKey || event.ctrlKey) {\n return;\n }\n hadKeyboardEvent = true;\n}\n\n/**\n * If at any point a user clicks with a pointing device, ensure that we change\n * the modality away from keyboard.\n * This avoids the situation where a user presses a key on an already focused\n * element, and then clicks on a different element, focusing it with a\n * pointing device, while we still think we're in keyboard modality.\n */\nfunction handlePointerDown() {\n hadKeyboardEvent = false;\n}\n\nfunction handleVisibilityChange(this: Document) {\n if (this.visibilityState === \"hidden\") {\n // If the tab becomes active again, the browser will handle calling focus\n // on the element (Safari actually calls it twice).\n // If this tab change caused a blur on an element with focus-visible,\n // re-apply the class when the user switches back to the tab.\n if (hadFocusVisibleRecently) {\n hadKeyboardEvent = true;\n }\n }\n}\n\nfunction prepare(doc: Document) {\n doc.addEventListener(\"keydown\", handleKeyDown, true);\n doc.addEventListener(\"mousedown\", handlePointerDown, true);\n doc.addEventListener(\"pointerdown\", handlePointerDown, true);\n doc.addEventListener(\"touchstart\", handlePointerDown, true);\n doc.addEventListener(\"visibilitychange\", handleVisibilityChange, true);\n}\n\nexport function teardown(doc: Document): void {\n doc.removeEventListener(\"keydown\", handleKeyDown, true);\n doc.removeEventListener(\"mousedown\", handlePointerDown, true);\n doc.removeEventListener(\"pointerdown\", handlePointerDown, true);\n doc.removeEventListener(\"touchstart\", handlePointerDown, true);\n doc.removeEventListener(\"visibilitychange\", handleVisibilityChange, true);\n}\n\nfunction isFocusVisible(event: FocusEvent<HTMLElement>) {\n const { target } = event;\n try {\n return target.matches(\":focus-visible\");\n } catch
|
|
1
|
+
{"version":3,"file":"useIsFocusVisible.js","sources":["../src/utils/useIsFocusVisible.ts"],"sourcesContent":["// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js\nimport {\n type FocusEvent,\n type MutableRefObject,\n type Ref,\n useCallback,\n useRef,\n} from \"react\";\n\nlet hadKeyboardEvent = true;\nlet hadFocusVisibleRecently = false;\nlet hadFocusVisibleRecentlyTimeout: number;\n\nconst inputTypesWhitelist: Record<string, boolean> = {\n text: true,\n search: true,\n url: true,\n tel: true,\n email: true,\n password: true,\n number: true,\n date: true,\n month: true,\n week: true,\n time: true,\n datetime: true,\n \"datetime-local\": true,\n};\n\n/**\n * Computes whether the given element should automatically trigger the\n * `focus-visible` class being added, i.e. whether it should always match\n * `:focus-visible` when focused.\n * @param {Element} node\n * @returns {boolean}\n */\nfunction focusTriggersKeyboardModality(node: HTMLElement) {\n if (\n node.tagName === \"INPUT\" &&\n inputTypesWhitelist[(node as HTMLInputElement).type] &&\n !(node as HTMLInputElement).readOnly\n ) {\n return true;\n }\n\n if (node.tagName === \"TEXTAREA\" && !(node as HTMLInputElement).readOnly) {\n return true;\n }\n\n return node.isContentEditable;\n}\n\n/**\n * Keep track of our keyboard modality state with `hadKeyboardEvent`.\n * If the most recent user interaction was via the keyboard;\n * and the key press did not include a meta, alt/option, or control key;\n * then the modality is keyboard. Otherwise, the modality is not keyboard.\n * @param {KeyboardEvent} event\n */\nfunction handleKeyDown(event: KeyboardEvent) {\n if (event.metaKey || event.altKey || event.ctrlKey) {\n return;\n }\n hadKeyboardEvent = true;\n}\n\n/**\n * If at any point a user clicks with a pointing device, ensure that we change\n * the modality away from keyboard.\n * This avoids the situation where a user presses a key on an already focused\n * element, and then clicks on a different element, focusing it with a\n * pointing device, while we still think we're in keyboard modality.\n */\nfunction handlePointerDown() {\n hadKeyboardEvent = false;\n}\n\nfunction handleVisibilityChange(this: Document) {\n if (this.visibilityState === \"hidden\") {\n // If the tab becomes active again, the browser will handle calling focus\n // on the element (Safari actually calls it twice).\n // If this tab change caused a blur on an element with focus-visible,\n // re-apply the class when the user switches back to the tab.\n if (hadFocusVisibleRecently) {\n hadKeyboardEvent = true;\n }\n }\n}\n\nfunction prepare(doc: Document) {\n doc.addEventListener(\"keydown\", handleKeyDown, true);\n doc.addEventListener(\"mousedown\", handlePointerDown, true);\n doc.addEventListener(\"pointerdown\", handlePointerDown, true);\n doc.addEventListener(\"touchstart\", handlePointerDown, true);\n doc.addEventListener(\"visibilitychange\", handleVisibilityChange, true);\n}\n\nexport function teardown(doc: Document): void {\n doc.removeEventListener(\"keydown\", handleKeyDown, true);\n doc.removeEventListener(\"mousedown\", handlePointerDown, true);\n doc.removeEventListener(\"pointerdown\", handlePointerDown, true);\n doc.removeEventListener(\"touchstart\", handlePointerDown, true);\n doc.removeEventListener(\"visibilitychange\", handleVisibilityChange, true);\n}\n\nfunction isFocusVisible(event: FocusEvent<HTMLElement>) {\n const { target } = event;\n try {\n return target.matches(\":focus-visible\");\n } catch {\n // Browsers not implementing :focus-visible will throw a SyntaxError.\n // We use our own heuristic for those browsers.\n // Rethrow might be better if it's not the expected error but do we really\n // want to crash if focus-visible malfunctioned?\n }\n\n // No need for validFocusTarget check. The user does that by attaching it to\n // focused events only.\n return hadKeyboardEvent || focusTriggersKeyboardModality(target);\n}\n\nexport function useIsFocusVisible<T extends HTMLElement = HTMLElement>(): {\n isFocusVisibleRef: MutableRefObject<boolean>;\n onBlur: () => void;\n onFocus: (event: FocusEvent<T>) => void;\n ref: Ref<T>;\n} {\n const ref = useCallback((node: T | null) => {\n if (node != null) {\n prepare(node.ownerDocument);\n }\n }, []);\n\n const isFocusVisibleRef = useRef(false);\n\n /**\n * Should be called if a blur event is fired\n */\n function handleBlurVisible() {\n // checking against potential state variable does not suffice if we focus and blur synchronously.\n // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.\n // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.\n // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751\n // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).\n if (isFocusVisibleRef.current) {\n // To detect a tab/window switch, we look for a blur event followed\n // rapidly by a visibility change.\n // If we don't see a visibility change within 100ms, it's probably a\n // regular focus change.\n hadFocusVisibleRecently = true;\n window.clearTimeout(hadFocusVisibleRecentlyTimeout);\n hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {\n hadFocusVisibleRecently = false;\n }, 100);\n\n isFocusVisibleRef.current = false;\n\n return true;\n }\n\n return false;\n }\n\n /**\n * Should be called if a blur event is fired\n */\n function handleFocusVisible(event: FocusEvent<HTMLElement>) {\n if (isFocusVisible(event)) {\n isFocusVisibleRef.current = true;\n return true;\n }\n return false;\n }\n\n return {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref,\n };\n}\n"],"names":["useCallback","useRef"],"mappings":"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"}
|