npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.1 → 1.0.0-alpha.3 - Mend

@salt-ds/lab 1.0.0-alpha.1 → 1.0.0-alpha.3

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.

Files changed (458) hide show

package/dist-es/packages/lab/src/form-field/FormField.js CHANGED Viewed

@@ -1,11 +1,8 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useMemo, useState } from 'react';
-import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
+import { makePrefixer, useId, useForkRef, Tooltip } from '@salt-ds/core';
 import { FormFieldContext } from '../form-field-context/FormFieldContext.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
 import { classBase } from './constant.js';
 import { FormActivationIndicator } from './FormActivationIndicator.js';
 import { FormHelperText } from './FormHelperText.js';
@@ -108,77 +105,67 @@ const FormField = forwardRef(
     const focusClass = disableFocusRing ? "lowFocused" : "focused";
     const inlineHelperText = renderHelperText && helperTextPlacement === "bottom";
     const tooltipHelperText = renderHelperText && helperTextPlacement === "tooltip" && !hasStatusIndicator;
-    const { getTooltipProps, getTriggerProps } = useTooltip({
-      disabled: !tooltipHelperText
-    });
-    const { ref: triggerRef, ...triggerProps } = getTriggerProps({
-      className: clsx(
-        withBaseName(),
-        {
-          [withBaseName("disabled")]: disabled,
-          [withBaseName("readOnly")]: readOnly,
-          [withBaseName("warning")]: isWarning,
-          [withBaseName("error")]: isError,
-          [withBaseName("fullWidth")]: fullWidth,
-          [withBaseName(focusClass)]: states.focused,
-          [withBaseName("labelTop")]: labelTop,
-          [withBaseName("labelLeft")]: labelLeft,
-          [withBaseName(`withHelperText`)]: inlineHelperText,
-          [withBaseName(variant)]: variant
-        },
-        className
-      ),
-      ...eventHandlers,
-      ...restProps
-    });
-    const handleTriggerRef = useForkRef(triggerRef, rootRef);
-    const handleRef = useForkRef(handleTriggerRef, ref);
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx("div", {
-          ref: handleRef,
-          ...triggerProps,
-          children: /* @__PURE__ */ jsxs(FormFieldContext.Provider, {
-            value: {
-              ...states,
-              ...dispatchers,
-              ...eventHandlers,
-              a11yProps: a11yValue,
-              inFormField: true,
-              ref: rootRef
-            },
-            children: [
-              hasLabel && /* @__PURE__ */ jsx(LabelComponent, {
-                ...LabelProps,
-                validationStatus,
-                hasStatusIndicator,
-                StatusIndicatorProps: StatusIndicatorProps2,
-                className: LabelProps.className,
-                label,
-                disabled,
-                readOnly,
-                required,
-                tooltipText: helperText,
-                id: labelId
-              }),
-              children,
-              /* @__PURE__ */ jsx(ActivationIndicatorComponent, {
-                hasIcon: !hasStatusIndicator,
-                validationStatus
-              }),
-              renderHelperText && /* @__PURE__ */ jsx(HelperTextComponent, {
-                helperText,
-                helperTextPlacement,
-                ...HelperTextProps,
-                id: helperTextId
-              })
-            ]
-          })
-        }),
-        /* @__PURE__ */ jsx(Tooltip, {
-          ...getTooltipProps({ title: helperText })
+    const handleTriggerRef = useForkRef(rootRef, ref);
+    return /* @__PURE__ */ jsx(Tooltip, {
+      disabled: !tooltipHelperText,
+      content: helperText,
+      children: /* @__PURE__ */ jsx("div", {
+        ref: handleTriggerRef,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("readOnly")]: readOnly,
+            [withBaseName("warning")]: isWarning,
+            [withBaseName("error")]: isError,
+            [withBaseName("fullWidth")]: fullWidth,
+            [withBaseName(focusClass)]: states.focused,
+            [withBaseName("labelTop")]: labelTop,
+            [withBaseName("labelLeft")]: labelLeft,
+            [withBaseName(`withHelperText`)]: inlineHelperText,
+            [withBaseName(variant)]: variant
+          },
+          className
+        ),
+        ...eventHandlers,
+        ...restProps,
+        children: /* @__PURE__ */ jsxs(FormFieldContext.Provider, {
+          value: {
+            ...states,
+            ...dispatchers,
+            ...eventHandlers,
+            a11yProps: a11yValue,
+            inFormField: true,
+            ref: rootRef
+          },
+          children: [
+            hasLabel && /* @__PURE__ */ jsx(LabelComponent, {
+              ...LabelProps,
+              validationStatus,
+              hasStatusIndicator,
+              StatusIndicatorProps: StatusIndicatorProps2,
+              className: LabelProps.className,
+              label,
+              disabled,
+              readOnly,
+              required,
+              tooltipText: helperText,
+              id: labelId
+            }),
+            children,
+            /* @__PURE__ */ jsx(ActivationIndicatorComponent, {
+              hasIcon: !hasStatusIndicator,
+              validationStatus
+            }),
+            renderHelperText && /* @__PURE__ */ jsx(HelperTextComponent, {
+              helperText,
+              helperTextPlacement,
+              ...HelperTextProps,
+              id: helperTextId
+            })
+          ]
         })
-      ]
+      })
     });
   }
 );

package/dist-es/packages/lab/src/form-field/FormField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Dispatch,\n ElementType,\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n SetStateAction,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\nimport { classBase } from \"./constant\";\nimport {\n FormActivationIndicator,\n FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" \| \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" \| \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" \| \"warning\";\n\nexport interface A11yValueProps\n extends Pick<NecessityIndicatorOptions, \"required\"> {\n /*\n If `true`, the FormField will be disabled.\n /\n disabled?: boolean;\n /* id of the helper text node /\n helperTextId?: string;\n /* id of the label node /\n labelId?: string;\n /\n The FormField value is Readonly\n /\n readOnly?: boolean;\n\n /\n Whether the form field needs to render helper text\n /\n renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /\n The component used for activation indicator. Default to `FormActivationIndicator`.\n /\n ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n /\n Outer focus ring focus will not be applied. Defaults to false.\n /\n disableFocusRing?: boolean;\n // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n // we should also support 'auto' or explicit numeric values\n /\n Whether the form field is occupying full width.\n /\n fullWidth?: boolean;\n /\n Whether to show the StatusIndicator component for validation states.\n /\n hasStatusIndicator?: boolean;\n /\n The helper text content\n /\n helperText?: string;\n /\n The component used for the helper text. Default to `FormHelperText`.\n /\n HelperTextComponent?: ElementType<FormHelperTextProps>;\n /\n Location the helperText, values: 'bottom' (default) or 'tooltip'.\n /\n helperTextPlacement?: FormFieldHelperTextPlacement;\n /\n Props to be applied to the `HelperTextComponent`.\n \n Generic on `FormHelperTextProps` is omitted.\n /\n HelperTextProps?: Partial<FormHelperTextProps>;\n /\n The label value for the FormField\n /\n label?: string;\n /\n The component used for the label. Default to `FormLabel`.\n /\n LabelComponent?: ElementType;\n /\n Location the label, values: 'top' (default) or 'left'\n /\n labelPlacement?: FormFieldLabelPlacement;\n /\n Props to be applied to the `LabelComponent`\n /\n LabelProps?: Partial<FormLabelProps>;\n /\n Override props to be used with the StatusIndicator component\n /\n StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n /\n The state for the FormField: Must be one of: 'error'\|'warning'\|undefined\n /\n validationStatus?: FormFieldValidationStatus;\n /\n FormField variants; defaults to primary.\n /\n variant?: \"primary\" \| \"secondary\" \| \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-required\": A11yValueProps[\"required\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] \| undefined;\n disabled: A11yValueProps[\"disabled\"];\n readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n}: A11yValueProps) => {\n return useMemo(\n () => ({\n \"aria-labelledby\": labelId,\n \"aria-required\": required,\n \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n disabled,\n readOnly,\n }),\n [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n onBlur,\n onFocus,\n}: {\n onBlur?: FocusEventHandler<HTMLDivElement>;\n onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n { focused: boolean },\n { setFocused: Dispatch<SetStateAction<boolean>> },\n {\n onBlur: FocusEventHandler<HTMLDivElement>;\n onFocus: FocusEventHandler<HTMLDivElement>;\n }\n] => {\n const [focused, setFocused] = useState(false);\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(false);\n onBlur?.(event);\n };\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(true);\n onFocus?.(event);\n };\n return [\n {\n focused,\n },\n {\n setFocused,\n },\n {\n onBlur: handleBlur,\n onFocus: handleFocus,\n },\n ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n (\n {\n ActivationIndicatorComponent = FormActivationIndicator,\n children,\n className,\n disabled,\n disableFocusRing = false,\n fullWidth = true,\n hasStatusIndicator,\n HelperTextComponent = FormHelperText,\n HelperTextProps,\n helperText,\n helperTextPlacement = \"bottom\",\n label,\n LabelComponent = FormLabel,\n labelPlacement = \"top\",\n LabelProps = { displayedNecessity: \"required\" },\n onBlur,\n onFocus,\n readOnly,\n required,\n StatusIndicatorProps,\n validationStatus,\n variant = \"primary\",\n ...restProps\n }: FormFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const labelId = useId(LabelProps?.id);\n const helperTextId = useId(HelperTextProps?.id);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const renderHelperText = !!helperText;\n\n const a11yValue = useA11yValue({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n });\n\n const [states, dispatchers, eventHandlers] = useFormField({\n onBlur,\n onFocus,\n });\n\n const hasLabel = label !== undefined;\n const labelTop = hasLabel && labelPlacement === \"top\";\n const labelLeft = hasLabel && labelPlacement === \"left\";\n const isWarning = validationStatus === \"warning\";\n const isError = validationStatus === \"error\";\n const focusClass = disableFocusRing\n ? \"lowFocused\"\n : \"focused\"; / NOTE: need to look at */\n const inlineHelperText =\n renderHelperText && helperTextPlacement === \"bottom\";\n const tooltipHelperText =\n renderHelperText &&\n helperTextPlacement === \"tooltip\" &&\n !hasStatusIndicator;\n\n const { getTooltipProps, getTriggerProps } = useTooltip({\n disabled: !tooltipHelperText,\n });\n\n const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n className: clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"warning\")]: isWarning,\n [withBaseName(\"error\")]: isError,\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(focusClass)]: states.focused,\n [withBaseName(\"labelTop\")]: labelTop,\n [withBaseName(\"labelLeft\")]: labelLeft,\n [withBaseName(`withHelperText`)]: inlineHelperText,\n [withBaseName(variant)]: variant,\n },\n className\n ),\n ...eventHandlers,\n ...restProps,\n });\n\n const handleTriggerRef = useForkRef(triggerRef, rootRef);\n const handleRef = useForkRef(handleTriggerRef, ref);\n\n return (\n <>\n <div ref={handleRef} {...triggerProps}>\n <FormFieldContext.Provider\n value={{\n ...states,\n ...dispatchers,\n ...eventHandlers,\n a11yProps: a11yValue,\n inFormField: true,\n ref: rootRef,\n }}\n >\n {hasLabel && (\n <LabelComponent\n {...LabelProps}\n validationStatus={validationStatus}\n hasStatusIndicator={hasStatusIndicator}\n StatusIndicatorProps={StatusIndicatorProps}\n className={LabelProps.className}\n label={label}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n tooltipText={helperText}\n id={labelId}\n />\n )}\n {children}\n <ActivationIndicatorComponent\n hasIcon={!hasStatusIndicator}\n validationStatus={validationStatus}\n />\n {renderHelperText && (\n <HelperTextComponent\n helperText={helperText}\n helperTextPlacement={helperTextPlacement}\n {...HelperTextProps}\n id={helperTextId}\n />\n )}\n </FormFieldContext.Provider>\n </div>\n <Tooltip {...getTooltipProps({ title: helperText })} />\n </>\n );\n }\n);\n"],"names":["StatusIndicatorProps"],"mappings":";;;;;;;;;;;;;;AAkIA,MAAM,eAAe,CAAC;AAAA,EACpB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,gBAAA;AACF,CAAsB,KAAA;AACpB,EAAO,OAAA,OAAA;AAAA,IACL,OAAO;AAAA,MACL,iBAAmB,EAAA,OAAA;AAAA,MACnB,eAAiB,EAAA,QAAA;AAAA,MACjB,kBAAA,EAAoB,mBAAmB,YAAe,GAAA,KAAA,CAAA;AAAA,MACtD,QAAA;AAAA,MACA,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,OAAS,EAAA,QAAA,EAAU,QAAU,EAAA,QAAA,EAAU,kBAAkB,YAAY,CAAA;AAAA,GACxE,CAAA;AACF,CAAA,CAAA;AAGO,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,OAAA;AACF,CAUK,KAAA;AACH,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACX,CAAA;AACA,EAAM,MAAA,WAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AACA,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAA;AAAA,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,KACF;AAAA,IACA;AAAA,MACE,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,KACX;AAAA,GACF,CAAA;AACF,EAAA;AAEA,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA,CAAA;AAEpC,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,4BAA+B,GAAA,uBAAA;AAAA,IAC/B,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAmB,GAAA,KAAA;AAAA,IACnB,SAAY,GAAA,IAAA;AAAA,IACZ,kBAAA;AAAA,IACA,mBAAsB,GAAA,cAAA;AAAA,IACtB,eAAA;AAAA,IACA,UAAA;AAAA,IACA,mBAAsB,GAAA,QAAA;AAAA,IACtB,KAAA;AAAA,IACA,cAAiB,GAAA,SAAA;AAAA,IACjB,cAAiB,GAAA,KAAA;AAAA,IACjB,UAAA,GAAa,EAAE,kBAAA,EAAoB,UAAW,EAAA;AAAA,IAC9C,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,oBAAAA,EAAAA,qBAAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,OAAA,GAAU,KAAM,CAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAY,EAAE,CAAA,CAAA;AACpC,IAAM,MAAA,YAAA,GAAe,KAAM,CAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,EAAE,CAAA,CAAA;AAC9C,IAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAE3C,IAAM,MAAA,gBAAA,GAAmB,CAAC,CAAC,UAAA,CAAA;AAE3B,IAAA,MAAM,YAAY,YAAa,CAAA;AAAA,MAC7B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,MAAA,EAAQ,WAAa,EAAA,aAAa,IAAI,YAAa,CAAA;AAAA,MACxD,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,WAAW,KAAU,KAAA,KAAA,CAAA,CAAA;AAC3B,IAAM,MAAA,QAAA,GAAW,YAAY,cAAmB,KAAA,KAAA,CAAA;AAChD,IAAM,MAAA,SAAA,GAAY,YAAY,cAAmB,KAAA,MAAA,CAAA;AACjD,IAAA,MAAM,YAAY,gBAAqB,KAAA,SAAA,CAAA;AACvC,IAAA,MAAM,UAAU,gBAAqB,KAAA,OAAA,CAAA;AACrC,IAAM,MAAA,UAAA,GAAa,mBACf,YACA,GAAA,SAAA,CAAA;AACJ,IAAM,MAAA,gBAAA,GACJ,oBAAoB,mBAAwB,KAAA,QAAA,CAAA;AAC9C,IAAA,MAAM,iBACJ,GAAA,gBAAA,IACA,mBAAwB,KAAA,SAAA,IACxB,CAAC,kBAAA,CAAA;AAEH,IAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAI,UAAW,CAAA;AAAA,MACtD,UAAU,CAAC,iBAAA;AAAA,KACZ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,GAAA,EAAK,UAAe,EAAA,GAAA,YAAA,KAAiB,eAAgB,CAAA;AAAA,MAC3D,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,UAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,UACzB,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,MAAO,CAAA,OAAA;AAAA,UACnC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,UAC7B,CAAC,YAAa,CAAA,CAAA,cAAA,CAAgB,CAAI,GAAA,gBAAA;AAAA,UAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAG,aAAA;AAAA,MACH,GAAG,SAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmB,UAAW,CAAA,UAAA,EAAY,OAAO,CAAA,CAAA;AACvD,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,gBAAA,EAAkB,GAAG,CAAA,CAAA;AAElD,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,GAAK,EAAA,SAAA;AAAA,UAAY,GAAG,YAAA;AAAA,UACvB,QAAA,kBAAA,IAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,YACC,KAAO,EAAA;AAAA,cACL,GAAG,MAAA;AAAA,cACH,GAAG,WAAA;AAAA,cACH,GAAG,aAAA;AAAA,cACH,SAAW,EAAA,SAAA;AAAA,cACX,WAAa,EAAA,IAAA;AAAA,cACb,GAAK,EAAA,OAAA;AAAA,aACP;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,QAAA,oBACE,GAAA,CAAA,cAAA,EAAA;AAAA,gBACE,GAAG,UAAA;AAAA,gBACJ,gBAAA;AAAA,gBACA,kBAAA;AAAA,gBACA,oBAAsBA,EAAAA,qBAAAA;AAAA,gBACtB,WAAW,UAAW,CAAA,SAAA;AAAA,gBACtB,KAAA;AAAA,gBACA,QAAA;AAAA,gBACA,QAAA;AAAA,gBACA,QAAA;AAAA,gBACA,WAAa,EAAA,UAAA;AAAA,gBACb,EAAI,EAAA,OAAA;AAAA,eACN,CAAA;AAAA,cAED,QAAA;AAAA,8BACA,GAAA,CAAA,4BAAA,EAAA;AAAA,gBACC,SAAS,CAAC,kBAAA;AAAA,gBACV,gBAAA;AAAA,eACF,CAAA;AAAA,cACC,oCACE,GAAA,CAAA,mBAAA,EAAA;AAAA,gBACC,UAAA;AAAA,gBACA,mBAAA;AAAA,gBACC,GAAG,eAAA;AAAA,gBACJ,EAAI,EAAA,YAAA;AAAA,eACN,CAAA;AAAA,aAAA;AAAA,WAEJ,CAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,OAAA,EAAA;AAAA,UAAS,GAAG,eAAA,CAAgB,EAAE,KAAA,EAAO,YAAY,CAAA;AAAA,SAAG,CAAA;AAAA,OAAA;AAAA,KACvD,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Dispatch,\n ElementType,\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n SetStateAction,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, Tooltip, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { classBase } from \"./constant\";\nimport {\n FormActivationIndicator,\n FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" \| \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" \| \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" \| \"warning\";\n\nexport interface A11yValueProps\n extends Pick<NecessityIndicatorOptions, \"required\"> {\n /*\n If `true`, the FormField will be disabled.\n /\n disabled?: boolean;\n /* id of the helper text node /\n helperTextId?: string;\n /* id of the label node /\n labelId?: string;\n /\n The FormField value is Readonly\n /\n readOnly?: boolean;\n\n /\n Whether the form field needs to render helper text\n /\n renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /\n The component used for activation indicator. Default to `FormActivationIndicator`.\n /\n ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n /\n Outer focus ring focus will not be applied. Defaults to false.\n /\n disableFocusRing?: boolean;\n // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n // we should also support 'auto' or explicit numeric values\n /\n Whether the form field is occupying full width.\n /\n fullWidth?: boolean;\n /\n Whether to show the StatusIndicator component for validation states.\n /\n hasStatusIndicator?: boolean;\n /\n The helper text content\n /\n helperText?: string;\n /\n The component used for the helper text. Default to `FormHelperText`.\n /\n HelperTextComponent?: ElementType<FormHelperTextProps>;\n /\n Location the helperText, values: 'bottom' (default) or 'tooltip'.\n /\n helperTextPlacement?: FormFieldHelperTextPlacement;\n /\n Props to be applied to the `HelperTextComponent`.\n \n Generic on `FormHelperTextProps` is omitted.\n /\n HelperTextProps?: Partial<FormHelperTextProps>;\n /\n The label value for the FormField\n /\n label?: string;\n /\n The component used for the label. Default to `FormLabel`.\n /\n LabelComponent?: ElementType;\n /\n Location the label, values: 'top' (default) or 'left'\n /\n labelPlacement?: FormFieldLabelPlacement;\n /\n Props to be applied to the `LabelComponent`\n /\n LabelProps?: Partial<FormLabelProps>;\n /\n Override props to be used with the StatusIndicator component\n /\n StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n /\n The state for the FormField: Must be one of: 'error'\|'warning'\|undefined\n /\n validationStatus?: FormFieldValidationStatus;\n /\n FormField variants; defaults to primary.\n /\n variant?: \"primary\" \| \"secondary\" \| \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-required\": A11yValueProps[\"required\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] \| undefined;\n disabled: A11yValueProps[\"disabled\"];\n readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n}: A11yValueProps) => {\n return useMemo(\n () => ({\n \"aria-labelledby\": labelId,\n \"aria-required\": required,\n \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n disabled,\n readOnly,\n }),\n [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n onBlur,\n onFocus,\n}: {\n onBlur?: FocusEventHandler<HTMLDivElement>;\n onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n { focused: boolean },\n { setFocused: Dispatch<SetStateAction<boolean>> },\n {\n onBlur: FocusEventHandler<HTMLDivElement>;\n onFocus: FocusEventHandler<HTMLDivElement>;\n }\n] => {\n const [focused, setFocused] = useState(false);\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(false);\n onBlur?.(event);\n };\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(true);\n onFocus?.(event);\n };\n return [\n {\n focused,\n },\n {\n setFocused,\n },\n {\n onBlur: handleBlur,\n onFocus: handleFocus,\n },\n ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n (\n {\n ActivationIndicatorComponent = FormActivationIndicator,\n children,\n className,\n disabled,\n disableFocusRing = false,\n fullWidth = true,\n hasStatusIndicator,\n HelperTextComponent = FormHelperText,\n HelperTextProps,\n helperText,\n helperTextPlacement = \"bottom\",\n label,\n LabelComponent = FormLabel,\n labelPlacement = \"top\",\n LabelProps = { displayedNecessity: \"required\" },\n onBlur,\n onFocus,\n readOnly,\n required,\n StatusIndicatorProps,\n validationStatus,\n variant = \"primary\",\n ...restProps\n }: FormFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const labelId = useId(LabelProps?.id);\n const helperTextId = useId(HelperTextProps?.id);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const renderHelperText = !!helperText;\n\n const a11yValue = useA11yValue({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n });\n\n const [states, dispatchers, eventHandlers] = useFormField({\n onBlur,\n onFocus,\n });\n\n const hasLabel = label !== undefined;\n const labelTop = hasLabel && labelPlacement === \"top\";\n const labelLeft = hasLabel && labelPlacement === \"left\";\n const isWarning = validationStatus === \"warning\";\n const isError = validationStatus === \"error\";\n const focusClass = disableFocusRing\n ? \"lowFocused\"\n : \"focused\"; / NOTE: need to look at */\n const inlineHelperText =\n renderHelperText && helperTextPlacement === \"bottom\";\n const tooltipHelperText =\n renderHelperText &&\n helperTextPlacement === \"tooltip\" &&\n !hasStatusIndicator;\n\n const handleTriggerRef = useForkRef(rootRef, ref);\n\n return (\n <Tooltip disabled={!tooltipHelperText} content={helperText}>\n <div\n ref={handleTriggerRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"warning\")]: isWarning,\n [withBaseName(\"error\")]: isError,\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(focusClass)]: states.focused,\n [withBaseName(\"labelTop\")]: labelTop,\n [withBaseName(\"labelLeft\")]: labelLeft,\n [withBaseName(`withHelperText`)]: inlineHelperText,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n {...eventHandlers}\n {...restProps}\n >\n <FormFieldContext.Provider\n value={{\n ...states,\n ...dispatchers,\n ...eventHandlers,\n a11yProps: a11yValue,\n inFormField: true,\n ref: rootRef,\n }}\n >\n {hasLabel && (\n <LabelComponent\n {...LabelProps}\n validationStatus={validationStatus}\n hasStatusIndicator={hasStatusIndicator}\n StatusIndicatorProps={StatusIndicatorProps}\n className={LabelProps.className}\n label={label}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n tooltipText={helperText}\n id={labelId}\n />\n )}\n {children}\n <ActivationIndicatorComponent\n hasIcon={!hasStatusIndicator}\n validationStatus={validationStatus}\n />\n {renderHelperText && (\n <HelperTextComponent\n helperText={helperText}\n helperTextPlacement={helperTextPlacement}\n {...HelperTextProps}\n id={helperTextId}\n />\n )}\n </FormFieldContext.Provider>\n </div>\n </Tooltip>\n );\n }\n);\n"],"names":["StatusIndicatorProps"],"mappings":"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"}

package/dist-es/packages/lab/src/form-field/StatusIndicator.js CHANGED Viewed

@@ -1,9 +1,6 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
-import { makePrefixer, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
+import { makePrefixer, StatusIndicator as StatusIndicator$1, Tooltip } from '@salt-ds/core';
 const withBaseName = makePrefixer("saltFormField");
 const StatusIndicator = (props) => {
@@ -17,33 +14,23 @@ const StatusIndicator = (props) => {
     status = "info",
     ...restProps
   } = props;
-  const { getTriggerProps, getTooltipProps } = useTooltip({
+  return /* @__PURE__ */ jsx(TooltipComponent, {
+    hideIcon: true,
+    status,
+    content: tooltipText,
     placement: "top",
-    disabled: !hasTooltip
-  });
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(TooltipComponent, {
-        ...getTooltipProps({
-          hideIcon: true,
-          status,
-          title: tooltipText,
-          ...TooltipProps2
-        })
-      }),
-      /* @__PURE__ */ jsx(StatusIndicator$1, {
-        ...getTriggerProps({
-          status,
-          ...restProps,
-          ...IconProps2,
-          className: clsx(
-            withBaseName("statusIndicator"),
-            className,
-            IconProps2 == null ? void 0 : IconProps2.className
-          )
-        })
-      })
-    ]
+    disabled: !hasTooltip,
+    ...TooltipProps2,
+    children: /* @__PURE__ */ jsx(StatusIndicator$1, {
+      status,
+      ...restProps,
+      ...IconProps2,
+      className: clsx(
+        withBaseName("statusIndicator"),
+        className,
+        IconProps2 == null ? void 0 : IconProps2.className
+      )
+    })
   });
 };

package/dist-es/packages/lab/src/form-field/StatusIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusIndicator.js","sources":["../src/form-field/StatusIndicator.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ElementType } from \"react\";\nimport {\n StatusIndicator as BaseStatusIndicator,\n ~~makePrefixer~~,\n} from \"@salt-ds/core\";\~~nimport { Tooltip, TooltipProps, useTooltip } from \"../tooltip\";\~~n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" \| \"info\" \| \"warning\" \| \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n hasTooltip?: boolean;\n IconProps?: Partial<IconProps>;\n status?: StatusIndicatorStatus;\n TooltipComponent?: ElementType<TooltipProps>;\n TooltipProps?: Partial<TooltipProps>;\n tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n const {\n TooltipComponent = Tooltip,\n hasTooltip = false,\n TooltipProps,\n tooltipText,\n IconProps,\n className,\n status = \"info\",\n ...restProps\n } = props;\n\n ~~const~~ { ~~getTriggerProps, getTooltipProps~~ } = ~~useTooltip(~~{\n placement~~: \~~"top\",\n disabled: !hasTooltip~~,\n~~ }~~);\n~~\n ~~return (\n <>\n~~ ~~<TooltipComponent\n~~ {...~~getTooltipProps({\n hideIcon: true,\n status,\n title: tooltipText,\n ...~~TooltipProps~~,\n~~ })}\n ~~/>\~~n <BaseStatusIndicator\n {~~...getTriggerProps<typeof BaseStatusIndicator>({~~\n ~~status,\n~~ ...restProps,\n ...IconProps,\n className: clsx(\n withBaseName(\"statusIndicator\"),\n className,\n IconProps?.className\n ~~),\n~~ })}\n />\n ~~</>\~~n );\n};\n"],"names":["TooltipProps","IconProps","BaseStatusIndicator"],"mappings":"~~;;;;;;;AASA~~,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAA,OAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAAA,EAAAA,aAAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAAC,EAAAA,UAAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACN,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,~~MAAM~~,~~EAAE~~,~~eAAA~~,~~EAAiB~~,~~eAAgB,~~EAAA~~,GAAI,UAAW,CAAA~~;AAAA,~~IACtD~~,~~SAAW~~,EAAA,~~KAAA;AAAA,IACX,UAAU,CAAC,UAAA;AAAA,GACZ,CAAA,CAAA;AAED,EACE,uBAAA,~~IAAA~~,CAAA,QAAA,EAAA~~;AAAA,~~IACE~~,~~QAAA,EAAA~~;AAAA,~~sBAAC~~,~~GAAA~~,~~CAAA,gBAAA,~~EAAA~~;AAAA~~,~~QACE,GAAG,eAAgB,CAAA~~;AAAA,~~UAClB~~,~~QAAU~~,EAAA,~~IAAA~~;AAAA,~~UACV~~,~~MAAA;AAAA~~,~~UACA~~,~~KAAO,EAAA,WAAA~~;AAAA,~~UACP~~,GAAGD,aAAAA;AAAA,~~SACJ~~,~~CAAA;AAAA~~,~~OACH~~,~~CAAA;AAAA,sBACC,~~GAAA,CAAAE,iBAAA,EAAA;AAAA,~~QACE~~,~~GAAG,eAA4C,CAAA;AAAA,UAC9C,~~MAAA;AAAA,~~UACA~~,GAAG,SAAA;AAAA,~~UACH~~,GAAGD,UAAAA;AAAA,~~UACH~~,SAAW,EAAA,IAAA;AAAA,~~YACT~~,aAAa,iBAAiB,CAAA;AAAA,~~YAC9B~~,SAAA;AAAA,~~YACAA~~,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,~~WACb~~;AAAA,~~SACD~~,CAAA;AAAA,~~OACH,CAAA;AAAA,KAAA;AAAA,~~GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"StatusIndicator.js","sources":["../src/form-field/StatusIndicator.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ElementType } from \"react\";\nimport {\n makePrefixer,\n StatusIndicator as BaseStatusIndicator,\n Tooltip,\n TooltipProps,\n} from \"@salt-ds/core\";\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" \| \"info\" \| \"warning\" \| \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n hasTooltip?: boolean;\n IconProps?: Partial<IconProps>;\n status?: StatusIndicatorStatus;\n TooltipComponent?: ElementType<TooltipProps>;\n TooltipProps?: Partial<TooltipProps>;\n tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n const {\n TooltipComponent = Tooltip,\n hasTooltip = false,\n TooltipProps,\n tooltipText,\n IconProps,\n className,\n status = \"info\",\n ...restProps\n } = props;\n\n return (\n <TooltipComponent\n hideIcon\n status={status}\n content={tooltipText}\n placement=\"top\"\n disabled={!hasTooltip}\n {...TooltipProps}\n >\n <BaseStatusIndicator\n status={status}\n {...restProps}\n {...IconProps}\n className={clsx(\n withBaseName(\"statusIndicator\"),\n className,\n IconProps?.className\n )}\n />\n </TooltipComponent>\n );\n};\n"],"names":["TooltipProps","IconProps","BaseStatusIndicator"],"mappings":";;;;AAUA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAA,OAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAAA,EAAAA,aAAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAAC,EAAAA,UAAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACN,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,IACC,QAAQ,EAAA,IAAA;AAAA,IACR,MAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,SAAU,EAAA,KAAA;AAAA,IACV,UAAU,CAAC,UAAA;AAAA,IACV,GAAGD,aAAAA;AAAA,IAEJ,QAAC,kBAAA,GAAA,CAAAE,iBAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAGD,UAAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,aAAa,iBAAiB,CAAA;AAAA,QAC9B,SAAA;AAAA,QACAA,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,OACb;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/index.js CHANGED Viewed

@@ -15,6 +15,7 @@ export { isPlainObject } from './utils/isPlainObject.js';
 export { partition } from './utils/partition.js';
 export { useClickOutside } from './utils/useClickOutside.js';
 export { useEventCallback } from './utils/useEventCallback.js';
+export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI } from './utils/useFloatingUI.js';
 export { useIsViewportLargerThanBreakpoint } from './utils/useIsViewportLargerThanBreakpoint.js';
 export { useLayoutEffectOnce } from './utils/useLayoutEffectOnce.js';
 export { useLayoutEffectSkipFirst } from './utils/useLayoutEffectSkipFirst.js';
@@ -26,7 +27,6 @@ export { Accordion } from './accordion/Accordion.js';
 export { AccordionSummary } from './accordion/AccordionSummary.js';
 export { AccordionDetails } from './accordion/AccordionDetails.js';
 export { AppHeader } from './app-header/AppHeader.js';
-export { Avatar } from './avatar/Avatar.js';
 export { Badge } from './badge/Badge.js';
 export { Banner } from './banner/Banner.js';
 export { Breadcrumb } from './breadcrumbs/Breadcrumb.js';
@@ -115,7 +115,6 @@ export { ParentChildLayout } from './parent-child-layout/ParentChildLayout.js';
 export { Pill } from './pill/Pill.js';
 export { ClosablePill } from './pill/ClosablePill.js';
 export { SelectablePill } from './pill/SelectablePill.js';
-export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI } from './popper/useFloatingUI.js';
 export { Portal } from './portal/Portal.js';
 export { CircularProgress, SIZE_OPTIONS } from './progress/CircularProgress/CircularProgress.js';
 export { LinearProgress } from './progress/LinearProgress/LinearProgress.js';
@@ -141,8 +140,6 @@ export { SearchInput } from './search-input/SearchInput.js';
 export { SkipLink } from './skip-link/SkipLink.js';
 export { SkipLinks } from './skip-link/SkipLinks.js';
 export { Slider } from './slider/Slider.js';
-export { Spinner, SpinnerSizeValues } from './spinner/Spinner.js';
-export { SplitLayout } from './split-layout/SplitLayout.js';
 export { useStepperInput } from './stepper-input/useStepperInput.js';
 export { StepperInput } from './stepper-input/StepperInput.js';
 export { Switch } from './switch/Switch.js';
@@ -160,9 +157,6 @@ export { Toolbar } from './toolbar/Toolbar.js';
 export { Tooltray } from './toolbar/Tooltray.js';
 export { ToolbarButton } from './toolbar/ToolbarButton.js';
 export { ToolbarField } from './toolbar/toolbar-field/ToolbarField.js';
-export { Tooltip } from './tooltip/Tooltip.js';
-export { TooltipContext, useTooltipContext } from './tooltip/TooltipContext.js';
-export { useTooltip } from './tooltip/useTooltip.js';
 export { Tree } from './tree/Tree.js';
 export { Window, WindowContext, isDesktop, useWindow } from './window/WindowContext.js';
 export { ElectronWindow } from './window/ElectronWindow.js';

package/dist-es/packages/lab/src/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-es/packages/lab/src/layer-layout/LayerLayout.js CHANGED Viewed

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import { clsx } from 'clsx';
-import { makePrefixer, usePrevious } from '@salt-ds/core';
-import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
 import { Scrim } from '../scrim/Scrim.js';
 import '../scrim/ScrimContext.js';
 import './LayerLayout.css.js';
+import { makePrefixer, usePrevious } from '@salt-ds/core';
+import '../utils/useFloatingUI.js';
+import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
 const LAYER_POSITIONS = [
   "center",

package/dist-es/packages/lab/src/layer-layout/LayerLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ~~useState~~, ~~useEffect~~ } from \"react\";\nimport { clsx } from \"clsx\";\nimport { ~~Breakpoints~~, ~~makePrefixer,~~ ~~usePrevious~~ } from \"~~@salt-ds/core~~\";\n\nimport { ~~useIsViewportLargerThanBreakpoint~~ } from \"~~../utils~~\";\n\nimport { ~~Scrim,~~ ~~ScrimProps~~ } from \"../~~scrim~~\";\~~nimport \"./LayerLayout.css\";\~~n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = typeof LAYER_POSITIONS[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Disable the scrim.\n /\n disableScrim?: boolean;\n /\n Defines the layer position within the screen.\n /\n position?: LayerPositions;\n /\n Breakpoint at which the layer will become fullscreen.\n /\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Display or hide the component.\n /\n isOpen?: boolean;\n /\n Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) \|\| (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["LayerLayout"],"mappings":"~~;;;;;;;;;AASO~~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"}
1	+ {"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\nimport \"./LayerLayout.css\";\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = typeof LAYER_POSITIONS[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Disable the scrim.\n /\n disableScrim?: boolean;\n /\n Defines the layer position within the screen.\n /\n position?: LayerPositions;\n /\n Breakpoint at which the layer will become fullscreen.\n /\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Display or hide the component.\n /\n isOpen?: boolean;\n /\n Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) \|\| (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["LayerLayout"],"mappings":"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"}

package/dist-es/packages/lab/src/list/Highlighter.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = ".saltHighlighter-highlight {\n  font-weight: var(--salt-typography-fontWeight-bold);\n}\n";
+var css_248z = ".saltHighlighter-highlight {\n  font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/list/Highlighter.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
 import { escapeRegExp } from '../utils/escapeRegExp.js';
 import 'react';
+import '../utils/useFloatingUI.js';
 import './Highlighter.css.js';
 const withBaseName = makePrefixer("saltHighlighter");

package/dist-es/packages/lab/src/list/Highlighter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Highlighter.js","sources":["../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n matchPattern?: RegExp \| string;\n text?: string;\n}\n\nexport const Highlighter = (\n props: HighlighterProps\n): ReactElement<HighlighterProps> => {\n const { matchPattern, text = \"\" } = props;\n const matchRegex =\n typeof matchPattern === \"string\"\n ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n : matchPattern;\n\n if (matchRegex === undefined) {\n return <>{text}</>;\n }\n return (\n <span>\n {text.split(matchRegex).map((part, index) =>\n part.match(matchRegex) ? (\n <strong\n className={withBaseName(\"highlight\")}\n key={`${index}-${part}`}\n >\n {part}\n </strong>\n ) : (\n part\n )\n )}\n </span>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;~~AAMA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAOtC,MAAA,WAAA,GAAc,CACzB,KACmC,KAAA;AACnC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AACpC,EAAM,MAAA,UAAA,GACJ,OAAO,YAAA,KAAiB,QACpB,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAI,YAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AAEN,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA,EAAA,IAAA;AAAA,KAAK,CAAA,CAAA;AAAA,GACjB;AACA,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACE,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAE,CAAA,GAAA;AAAA,MAAI,CAAC,IAAM,EAAA,KAAA,KACjC,KAAK,KAAM,CAAA,UAAU,oBAClB,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QAGlC,QAAA,EAAA,IAAA;AAAA,OAFI,EAAA,CAAA,EAAG,KAAS,CAAA,CAAA,EAAA,IAAA,CAAA,CAGnB,CAEA,GAAA,IAAA;AAAA,KAEJ;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Highlighter.js","sources":["../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n matchPattern?: RegExp \| string;\n text?: string;\n}\n\nexport const Highlighter = (\n props: HighlighterProps\n): ReactElement<HighlighterProps> => {\n const { matchPattern, text = \"\" } = props;\n const matchRegex =\n typeof matchPattern === \"string\"\n ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n : matchPattern;\n\n if (matchRegex === undefined) {\n return <>{text}</>;\n }\n return (\n <span>\n {text.split(matchRegex).map((part, index) =>\n part.match(matchRegex) ? (\n <strong\n className={withBaseName(\"highlight\")}\n key={`${index}-${part}`}\n >\n {part}\n </strong>\n ) : (\n part\n )\n )}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAOtC,MAAA,WAAA,GAAc,CACzB,KACmC,KAAA;AACnC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AACpC,EAAM,MAAA,UAAA,GACJ,OAAO,YAAA,KAAiB,QACpB,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAI,YAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AAEN,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA,EAAA,IAAA;AAAA,KAAK,CAAA,CAAA;AAAA,GACjB;AACA,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACE,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAE,CAAA,GAAA;AAAA,MAAI,CAAC,IAAM,EAAA,KAAA,KACjC,KAAK,KAAM,CAAA,UAAU,oBAClB,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QAGlC,QAAA,EAAA,IAAA;AAAA,OAFI,EAAA,CAAA,EAAG,KAAS,CAAA,CAAA,EAAA,IAAA,CAAA,CAGnB,CAEA,GAAA,IAAA;AAAA,KAEJ;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/list/List.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
 import { useImperativeScrollingAPI } from '../common-hooks/useImperativeScrollingAPI.js';
 import { LIST_FOCUS_VISIBLE } from '../common-hooks/useKeyboardNavigation.js';
 import '../responsive/useResizeObserver.js';
+import '../utils/useFloatingUI.js';
 import { isSelected } from '../common-hooks/utils/isSelected.js';
 import { ListItemProxy, ListItem } from './ListItem.js';
 import { useList } from './useList.js';

package/dist-es/packages/lab/src/list/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.js","sources":["../src/list/List.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n cloneElement,\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactElement,\n useRef,\n} from \"react\";\nimport {\n CollectionIndexer,\n CollectionItem,\n isSelected,\n itemToString as defaultItemToString,\n LIST_FOCUS_VISIBLE,\n ScrollingAPI,\n SelectionStrategy,\n useCollectionItems,\n useImperativeScrollingAPI,\n} from \"../common-hooks\";\n\nimport { ListItem as DefaultListItem, ListItemProxy } from \"./ListItem\";\nimport { ListItemProps, ListProps } from \"./listTypes\";\nimport { useList } from \"./useList\";\nimport { useListHeight } from \"./useListHeight\";\n\nimport \"./List.css\";\n\nconst defaultEmptyMessage = \"No data to display\";\n\nconst withBaseName = makePrefixer(\"saltList\");\n\nexport const List = forwardRef(function List<\n Item,\n Selection extends SelectionStrategy = \"default\"\n>(\n {\n ListItem = DefaultListItem,\n ListPlaceholder,\n borderless,\n children,\n className,\n collapsibleHeaders = false,\n defaultHighlightedIndex,\n defaultSelected,\n disabled: listDisabled = false,\n disableFocus = false,\n disableTypeToSelect,\n displayedItemCount = 10,\n emptyMessage,\n focusVisible: focusVisibleProp,\n getItemHeight: getItemHeightProp,\n getItemId,\n height,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n itemGapSize = 0,\n itemHeight: itemHeightProp,\n itemTextHighlightPattern,\n itemToString = defaultItemToString,\n listHandlers: listHandlersProp,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: selectedProp,\n selectionStrategy,\n checkable = selectionStrategy === \"multiple\",\n scrollingApiRef,\n // TODO do we still need these ?\n selectionKeys,\n showEmptyMessage = false,\n source,\n style: styleProp,\n stickyHeaders,\n tabToSelect,\n width,\n ...htmlAttributes\n }: ListProps<Item, Selection>,\n forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n const id = useIdMemo(idProp);\n const rootRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const rowHeightProxyRef = useRef<HTMLDivElement>(null);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n label: \"List\",\n source,\n children,\n options: {\n collapsibleHeaders,\n // Add Group ChildTypes to options\n getItemId,\n itemToString,\n },\n });\n\n const { preferredHeight } = useListHeight({\n borderless,\n displayedItemCount,\n getItemHeight: getItemHeightProp,\n height,\n itemCount: collectionHook.data.length,\n itemGapSize,\n itemHeight: itemHeightProp,\n rowHeightRef: rowHeightProxyRef,\n });\n\n const {\n focusVisible,\n highlightedIndex,\n listControlProps,\n listHandlers,\n listItemHeaderHandlers,\n scrollIntoView,\n selected,\n } = useList<Item, Selection>({\n collapsibleHeaders,\n collectionHook,\n containerRef: rootRef,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(defaultSelected),\n disabled: listDisabled,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n label: id,\n listHandlers: listHandlersProp, // should this be in context ?\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(selectedProp),\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n });\n\n useImperativeScrollingAPI({\n collectionHook,\n forwardedRef: scrollingApiRef,\n scrollableRef: rootRef,\n scrollIntoView,\n });\n\n // focusVisible passes as a prop takes precedence\n const appliedFocusVisible = focusVisibleProp ?? focusVisible;\n\n const createHeader: (\n idx: { value: number },\n headerId: string,\n title: string,\n expanded?: boolean\n ) => ReactElement = function createHeader(idx, headerId, title, expanded) {\n const header = (\n <ListItem\n {...listItemHeaderHandlers}\n className={clsx(\"saltListItemHeader\", {\n focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value,\n })}\n aria-expanded={expanded}\n data-idx={collapsibleHeaders ? idx.value : undefined}\n data-highlighted={idx.value === highlightedIndex \|\| undefined}\n data-sticky={stickyHeaders}\n data-selectable={false}\n id={headerId}\n key={`header-${idx.value}`}\n label={title}\n // role=\"presentation\"\n />\n );\n idx.value += 1;\n return header;\n };\n\n const getItemHeight =\n getItemHeightProp === undefined ? () => itemHeightProp : getItemHeightProp;\n\n function renderCollectionItem(\n list: ReactElement[],\n item: CollectionItem<Item>,\n idx: { value: number }\n ) {\n // Note, a number of these props are specific to ListItem. What if user\n // implements a custom ListItem but neglects to handle all these props.\n // Is that on them ?\n const { disabled, value, id: itemId, label } = item;\n const isChildItem = isValidElement(value);\n const listItemProps: ListItemProps<Item> & {\n key: string;\n \"data-idx\": number;\n } = {\n className: clsx({\n saltHighlighted: idx.value === highlightedIndex,\n saltFocusVisible: appliedFocusVisible === idx.value,\n }),\n disabled: disabled \|\| listDisabled,\n id: itemId,\n item: isChildItem ? undefined : item?.value ?? undefined,\n itemHeight: getItemHeight(idx.value),\n itemTextHighlightPattern,\n key: itemId,\n \"data-idx\": idx.value,\n label,\n role: \"option\",\n selected: isSelected<Item>(selected, item),\n showCheckbox: checkable,\n };\n list.push(\n isChildItem ? (\n cloneElement(value, listItemProps)\n ) : (\n <ListItem {...listItemProps} />\n )\n );\n\n idx.value += 1;\n }\n\n const addGroup: (\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number }\n ) => void = function addGroup(\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number }\n ) {\n const { count = 0, id, expanded, label = \"\" } = items[idx.value];\n const header = createHeader(idx, id, label, expanded);\n const childItems: ReactElement \| ReactElement[] =\n expanded !== false\n ? [header].concat(\n renderCollectionItems(items, idx, idx.value + count) \|\| []\n )\n : header;\n\n list.push(\n <div key={id} role=\"group\">\n {childItems}\n </div>\n );\n };\n\n const renderCollectionItems = (\n items: CollectionItem<Item>[],\n idx: CollectionIndexer = { value: 0 },\n end = items.length\n ): ReactElement[] \| undefined => {\n const listItems: ReactElement[] = [];\n while (idx.value < end) {\n const item = items[idx.value];\n if (item.header) {\n listItems.push(\n createHeader(idx, item.id, item.label!, item.expanded === false)\n );\n } else if (item.childNodes) {\n addGroup(listItems, items, idx);\n } else {\n renderCollectionItem(listItems, item, idx);\n }\n }\n return listItems;\n };\n\n function renderEmpty() {\n if (emptyMessage \|\| showEmptyMessage) {\n return (\n <span className={withBaseName(\"empty-message\")}>\n {emptyMessage ?? defaultEmptyMessage}\n </span>\n );\n } else {\n return null;\n }\n }\n\n const renderContent = () => {\n if (collectionHook.data.length) {\n return renderCollectionItems(collectionHook.data);\n } else {\n renderEmpty();\n }\n };\n\n const contentHeight = \"auto\";\n const sizeStyles = {\n \"--list-item-gap\": itemGapSize ? `${itemGapSize}px` : undefined,\n minWidth,\n minHeight,\n width: width ?? \"100%\",\n height: height ?? \"100%\",\n maxWidth: maxWidth ?? width,\n maxHeight: maxHeight ?? preferredHeight,\n };\n return (\n <div\n aria-multiselectable={\n selectionStrategy === \"multiple\" \|\|\n selectionStrategy === \"extended\" \|\|\n selectionStrategy === \"extended-multi-range\" \|\|\n undefined\n }\n {...htmlAttributes}\n {...listHandlers}\n {...listControlProps}\n className={clsx(withBaseName(), className, {\n // TODO low-emphasis\n [withBaseName(\"borderless\")]: borderless,\n saltDisabled: listDisabled,\n [withBaseName(\"collapsible\")]: collapsibleHeaders,\n saltFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE,\n })}\n id={`${id}`}\n ref={useForkRef<HTMLDivElement>(rootRef, forwardedRef)}\n role=\"listbox\"\n style={{ ...styleProp, ...sizeStyles }}\n tabIndex={listDisabled \|\| disableFocus ? undefined : 0}\n >\n <ListItemProxy ref={rowHeightProxyRef} />\n {collectionHook.data.length === 0 && ListPlaceholder !== undefined ? (\n <>\n <ListPlaceholder />\n </>\n ) : (\n <div\n className={withBaseName(\"scrollingContentContainer\")}\n ref={contentRef}\n style={{ height: contentHeight }}\n >\n {renderContent()}\n </div>\n )}\n </div>\n );\n}) as <Item = string, Selection extends SelectionStrategy = \"default\">(\n props: ListProps<Item, Selection> & {\n ref?: ForwardedRef<ScrollingAPI<Item>>;\n }\n) => ReactElement<ListProps<Item, Selection>>;\n"],"names":["List","ListItem","DefaultListItem","itemToString","defaultItemToString","createHeader","addGroup","id"],"mappings":"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"}
1	+ {"version":3,"file":"List.js","sources":["../src/list/List.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n cloneElement,\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactElement,\n useRef,\n} from \"react\";\nimport {\n CollectionIndexer,\n CollectionItem,\n isSelected,\n itemToString as defaultItemToString,\n LIST_FOCUS_VISIBLE,\n ScrollingAPI,\n SelectionStrategy,\n useCollectionItems,\n useImperativeScrollingAPI,\n} from \"../common-hooks\";\n\nimport { ListItem as DefaultListItem, ListItemProxy } from \"./ListItem\";\nimport { ListItemProps, ListProps } from \"./listTypes\";\nimport { useList } from \"./useList\";\nimport { useListHeight } from \"./useListHeight\";\n\nimport \"./List.css\";\n\nconst defaultEmptyMessage = \"No data to display\";\n\nconst withBaseName = makePrefixer(\"saltList\");\n\nexport const List = forwardRef(function List<\n Item,\n Selection extends SelectionStrategy = \"default\"\n>(\n {\n ListItem = DefaultListItem,\n ListPlaceholder,\n borderless,\n children,\n className,\n collapsibleHeaders = false,\n defaultHighlightedIndex,\n defaultSelected,\n disabled: listDisabled = false,\n disableFocus = false,\n disableTypeToSelect,\n displayedItemCount = 10,\n emptyMessage,\n focusVisible: focusVisibleProp,\n getItemHeight: getItemHeightProp,\n getItemId,\n height,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n itemGapSize = 0,\n itemHeight: itemHeightProp,\n itemTextHighlightPattern,\n itemToString = defaultItemToString,\n listHandlers: listHandlersProp,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: selectedProp,\n selectionStrategy,\n checkable = selectionStrategy === \"multiple\",\n scrollingApiRef,\n // TODO do we still need these ?\n selectionKeys,\n showEmptyMessage = false,\n source,\n style: styleProp,\n stickyHeaders,\n tabToSelect,\n width,\n ...htmlAttributes\n }: ListProps<Item, Selection>,\n forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n const id = useIdMemo(idProp);\n const rootRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const rowHeightProxyRef = useRef<HTMLDivElement>(null);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n label: \"List\",\n source,\n children,\n options: {\n collapsibleHeaders,\n // Add Group ChildTypes to options\n getItemId,\n itemToString,\n },\n });\n\n const { preferredHeight } = useListHeight({\n borderless,\n displayedItemCount,\n getItemHeight: getItemHeightProp,\n height,\n itemCount: collectionHook.data.length,\n itemGapSize,\n itemHeight: itemHeightProp,\n rowHeightRef: rowHeightProxyRef,\n });\n\n const {\n focusVisible,\n highlightedIndex,\n listControlProps,\n listHandlers,\n listItemHeaderHandlers,\n scrollIntoView,\n selected,\n } = useList<Item, Selection>({\n collapsibleHeaders,\n collectionHook,\n containerRef: rootRef,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(defaultSelected),\n disabled: listDisabled,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n label: id,\n listHandlers: listHandlersProp, // should this be in context ?\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(selectedProp),\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n });\n\n useImperativeScrollingAPI({\n collectionHook,\n forwardedRef: scrollingApiRef,\n scrollableRef: rootRef,\n scrollIntoView,\n });\n\n // focusVisible passes as a prop takes precedence\n const appliedFocusVisible = focusVisibleProp ?? focusVisible;\n\n const createHeader: (\n idx: { value: number },\n headerId: string,\n title: string,\n expanded?: boolean\n ) => ReactElement = function createHeader(idx, headerId, title, expanded) {\n const header = (\n <ListItem\n {...listItemHeaderHandlers}\n className={clsx(\"saltListItemHeader\", {\n focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value,\n })}\n aria-expanded={expanded}\n data-idx={collapsibleHeaders ? idx.value : undefined}\n data-highlighted={idx.value === highlightedIndex \|\| undefined}\n data-sticky={stickyHeaders}\n data-selectable={false}\n id={headerId}\n key={`header-${idx.value}`}\n label={title}\n // role=\"presentation\"\n />\n );\n idx.value += 1;\n return header;\n };\n\n const getItemHeight =\n getItemHeightProp === undefined ? () => itemHeightProp : getItemHeightProp;\n\n function renderCollectionItem(\n list: ReactElement[],\n item: CollectionItem<Item>,\n idx: { value: number }\n ) {\n // Note, a number of these props are specific to ListItem. What if user\n // implements a custom ListItem but neglects to handle all these props.\n // Is that on them ?\n const { disabled, value, id: itemId, label } = item;\n const isChildItem = isValidElement(value);\n const listItemProps: ListItemProps<Item> & {\n key: string;\n \"data-idx\": number;\n } = {\n className: clsx({\n saltHighlighted: idx.value === highlightedIndex,\n saltFocusVisible: appliedFocusVisible === idx.value,\n }),\n disabled: disabled \|\| listDisabled,\n id: itemId,\n item: isChildItem ? undefined : item?.value ?? undefined,\n itemHeight: getItemHeight(idx.value),\n itemTextHighlightPattern,\n key: itemId,\n \"data-idx\": idx.value,\n label,\n role: \"option\",\n selected: isSelected<Item>(selected, item),\n showCheckbox: checkable,\n };\n list.push(\n isChildItem ? (\n cloneElement(value, listItemProps)\n ) : (\n <ListItem {...listItemProps} />\n )\n );\n\n idx.value += 1;\n }\n\n const addGroup: (\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number }\n ) => void = function addGroup(\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number }\n ) {\n const { count = 0, id, expanded, label = \"\" } = items[idx.value];\n const header = createHeader(idx, id, label, expanded);\n const childItems: ReactElement \| ReactElement[] =\n expanded !== false\n ? [header].concat(\n renderCollectionItems(items, idx, idx.value + count) \|\| []\n )\n : header;\n\n list.push(\n <div key={id} role=\"group\">\n {childItems}\n </div>\n );\n };\n\n const renderCollectionItems = (\n items: CollectionItem<Item>[],\n idx: CollectionIndexer = { value: 0 },\n end = items.length\n ): ReactElement[] \| undefined => {\n const listItems: ReactElement[] = [];\n while (idx.value < end) {\n const item = items[idx.value];\n if (item.header) {\n listItems.push(\n createHeader(idx, item.id, item.label!, item.expanded === false)\n );\n } else if (item.childNodes) {\n addGroup(listItems, items, idx);\n } else {\n renderCollectionItem(listItems, item, idx);\n }\n }\n return listItems;\n };\n\n function renderEmpty() {\n if (emptyMessage \|\| showEmptyMessage) {\n return (\n <span className={withBaseName(\"empty-message\")}>\n {emptyMessage ?? defaultEmptyMessage}\n </span>\n );\n } else {\n return null;\n }\n }\n\n const renderContent = () => {\n if (collectionHook.data.length) {\n return renderCollectionItems(collectionHook.data);\n } else {\n renderEmpty();\n }\n };\n\n const contentHeight = \"auto\";\n const sizeStyles = {\n \"--list-item-gap\": itemGapSize ? `${itemGapSize}px` : undefined,\n minWidth,\n minHeight,\n width: width ?? \"100%\",\n height: height ?? \"100%\",\n maxWidth: maxWidth ?? width,\n maxHeight: maxHeight ?? preferredHeight,\n };\n return (\n <div\n aria-multiselectable={\n selectionStrategy === \"multiple\" \|\|\n selectionStrategy === \"extended\" \|\|\n selectionStrategy === \"extended-multi-range\" \|\|\n undefined\n }\n {...htmlAttributes}\n {...listHandlers}\n {...listControlProps}\n className={clsx(withBaseName(), className, {\n // TODO low-emphasis\n [withBaseName(\"borderless\")]: borderless,\n saltDisabled: listDisabled,\n [withBaseName(\"collapsible\")]: collapsibleHeaders,\n saltFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE,\n })}\n id={`${id}`}\n ref={useForkRef<HTMLDivElement>(rootRef, forwardedRef)}\n role=\"listbox\"\n style={{ ...styleProp, ...sizeStyles }}\n tabIndex={listDisabled \|\| disableFocus ? undefined : 0}\n >\n <ListItemProxy ref={rowHeightProxyRef} />\n {collectionHook.data.length === 0 && ListPlaceholder !== undefined ? (\n <>\n <ListPlaceholder />\n </>\n ) : (\n <div\n className={withBaseName(\"scrollingContentContainer\")}\n ref={contentRef}\n style={{ height: contentHeight }}\n >\n {renderContent()}\n </div>\n )}\n </div>\n );\n}) as <Item = string, Selection extends SelectionStrategy = \"default\">(\n props: ListProps<Item, Selection> & {\n ref?: ForwardedRef<ScrollingAPI<Item>>;\n }\n) => ReactElement<ListProps<Item, Selection>>;\n"],"names":["List","ListItem","DefaultListItem","itemToString","defaultItemToString","createHeader","addGroup","id"],"mappings":"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"}

package/dist-es/packages/lab/src/list/ListItem.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = ".saltListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-text-primary-foreground);\n  --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n  --list-item-selected-focus-outlineColor: var(--salt-color-white); /* TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n  font-weight: var(--salt-typography-fontWeight-bold);\n}\n\n.saltListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--saltList-item-cursor, pointer);\n  background: var(--saltList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--saltList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-size-unit);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n  --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n  content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n";
+var css_248z = ".saltListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-text-primary-foreground);\n  --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--saltList-item-cursor, pointer);\n  background: var(--saltList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--saltList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-size-unit);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n  --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n  content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/lab/src/list/VirtualizedList.js CHANGED Viewed

@@ -7,6 +7,7 @@ import '../common-hooks/keyUtils.js';
 import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
 import { useImperativeScrollingAPI } from '../common-hooks/useImperativeScrollingAPI.js';
 import '../responsive/useResizeObserver.js';
+import '../utils/useFloatingUI.js';
 import { isSelected } from '../common-hooks/utils/isSelected.js';
 import { useListHeight } from './useListHeight.js';
 import { ListItemProxy, ListItem } from './ListItem.js';