@danske/sapphire-react-lab 0.97.0 → 0.98.0

package/build/esm/Slider/src/Slider.js

@@ -0,0 +1,83 @@
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/slider/slider.module.css';
+import { useThemeCheck, useSapphireStyleProps, Field, Label } from '@danske/sapphire-react';
+import { Slider as Slider$1, SliderTrack, SliderThumb } from 'react-aria-components';
+import React from 'react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Slider = (_a) => {
+  var _b = _a, {
+    label,
+    labelPlacement = "above",
+    note,
+    name,
+    isDisabled
+  } = _b, props = __objRest(_b, [
+    "label",
+    "labelPlacement",
+    "note",
+    "name",
+    "isDisabled"
+  ]);
+  useThemeCheck();
+  const { styleProps } = useSapphireStyleProps(props);
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, styleProps), {
+    labelPlacement
+  }), /* @__PURE__ */ React.createElement(Field.Context, null, label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, null, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement(Slider$1, __spreadProps(__spreadValues({}, props), {
+    style: { height: "100%" }
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-slider"]),
+    role: "slider"
+  }, /* @__PURE__ */ React.createElement(SliderTrack, {
+    className: clsx(styles["sapphire-slider__track"])
+  }, ({ state }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-slider__track-remaining"])
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-slider__track-fill"]),
+    style: { width: state.getThumbPercent(0) * 100 + "%" }
+  }), /* @__PURE__ */ React.createElement(SliderThumb, {
+    name,
+    className: (state2) => clsx(styles["sapphire-slider__thumb"], {
+      [styles["is-focus"]]: state2.isFocusVisible
+    }),
+    style: ({ state: state2 }) => {
+      const percent = Math.min(3 + state2.getThumbPercent(0) * 94, 100);
+      return {
+        left: `${percent}%`
+      };
+    }
+  })))))), note && /* @__PURE__ */ React.createElement(Field.Footer, null, note)));
+};
+
+export { Slider };
+//# sourceMappingURL=Slider.js.map

package/build/esm/Slider/src/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../../src/Slider/src/Slider.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/slider/slider.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  Label,\n  SapphireStyleProps,\n  Field,\n  FieldProps,\n} from '@danske/sapphire-react';\nimport {\n  Slider as RACSlider,\n  SliderProps as RACSliderProps,\n  SliderThumb as RACSliderThumb,\n  SliderThumbProps as RACSliderThumbProps,\n  SliderTrack as RACSliderTrack,\n} from 'react-aria-components';\nimport React from 'react';\n\nexport type SliderProps = {\n  label?: ReactNode;\n  /**\n   * A note to show below the slider.\n   * Use {@Link Slider.Note} to render the note.\n   */\n  note?: ReactNode;\n} & SapphireStyleProps &\n  Pick<FieldProps, 'isDisabled' | 'labelPlacement'> &\n  Pick<\n    RACSliderProps<number>, // We're only supporting sliders with one end\n    | 'minValue'\n    | 'maxValue'\n    | 'step'\n    | 'value'\n    | 'defaultValue'\n    | 'aria-label'\n    | 'onChange'\n    | 'onChangeEnd'\n  > &\n  Pick<RACSliderThumbProps, 'name'>;\n\nexport const Slider = ({\n  label,\n  labelPlacement = 'above',\n  note,\n  name,\n  isDisabled,\n  ...props\n}: SliderProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <Field {...styleProps} labelPlacement={labelPlacement}>\n      <Field.Context>\n        {label && (\n          <Field.Label>\n            <Label>{label}</Label>\n          </Field.Label>\n        )}\n\n        <Field.Control>\n          <RACSlider {...props} style={{ height: '100%' }}>\n            <div className={clsx(styles['sapphire-slider'])} role=\"slider\">\n              <RACSliderTrack\n                className={clsx(styles['sapphire-slider__track'])}\n              >\n                {({ state }) => (\n                  <>\n                    <div\n                      className={clsx(\n                        styles['sapphire-slider__track-remaining']\n                      )}\n                    />\n                    <div\n                      className={clsx(styles['sapphire-slider__track-fill'])}\n                      style={{ width: state.getThumbPercent(0) * 100 + '%' }}\n                    />\n                    <RACSliderThumb\n                      name={name}\n                      className={(state) =>\n                        clsx(styles['sapphire-slider__thumb'], {\n                          [styles['is-focus']]: state.isFocusVisible,\n                        })\n                      }\n                      style={({ state }) => {\n                        // Pad the thumb position, so it doesn't go over the track\n                        const percent = Math.min(\n                          3 + state.getThumbPercent(0) * 94,\n                          100\n                        );\n                        return {\n                          left: `${percent}%`,\n                        };\n                      }}\n                    />\n                  </>\n                )}\n              </RACSliderTrack>\n            </div>\n          </RACSlider>\n        </Field.Control>\n\n        {note && <Field.Footer>{note}</Field.Footer>}\n      </Field.Context>\n    </Field>\n  );\n};\n"],"names":["RACSlider","RACSliderTrack","RACSliderThumb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ca,MAAA,MAAA,GAAS,CAAC,EAOS,KAAA;AAPT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,GALqB,GAAA,EAAA,EAMlB,kBANkB,EAMlB,EAAA;AAAA,IALH,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACrB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,OAAP,EAAA,IAAA,EACG,yBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,IAAQ,EAAA,KAAA,CAAA,CAAA,sCAIX,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAAA,QAAA,EAAD,iCAAe,KAAf,CAAA,EAAA;AAAA,IAAsB,KAAA,EAAO,EAAE,MAAQ,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,sCACpC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,iBAAA,CAAA,CAAA;AAAA,IAAqB,IAAK,EAAA,QAAA;AAAA,GAAA,sCACnDC,WAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,wBAAA,CAAA,CAAA;AAAA,GAAA,EAEtB,CAAC,EAAE,KACF,EAAA,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KACT,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAGV,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,6BAAA,CAAA,CAAA;AAAA,IACvB,OAAO,EAAE,KAAA,EAAO,KAAM,CAAA,eAAA,CAAgB,KAAK,GAAM,GAAA,GAAA,EAAA;AAAA,GAAA,CAAA,sCAElDC,WAAD,EAAA;AAAA,IACE,IAAA;AAAA,IACA,SAAW,EAAA,CAAC,MACV,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MACpC,CAAA,MAAA,CAAO,cAAc,MAAM,CAAA,cAAA;AAAA,KAAA,CAAA;AAAA,IAGhC,KAAA,EAAO,CAAC,EAAE,KAAY,EAAA,MAAA,EAAA,KAAA;AAEpB,MAAA,MAAM,UAAU,IAAK,CAAA,GAAA,CACnB,IAAI,MAAM,CAAA,eAAA,CAAgB,KAAK,EAC/B,EAAA,GAAA,CAAA,CAAA;AAEF,MAAO,OAAA;AAAA,QACL,MAAM,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAW1B,IAAQ,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,MAAA,EAAP,IAAe,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -6,6 +6,7 @@ export { FileTrigger } from './FileDropzone/src/FileTrigger.js';
 export { Flag } from './Flag/src/Flag.js';
 export { NumberField } from './NumberField/src/NumberField.js';
 export { ProgressIndicator } from './ProgressIndicator/src/ProgressIndicator.js';
+export { Slider } from './Slider/index.js';
 export { TagGroup } from './TagGroup/src/TagGroup.js';
 export { TagItem } from './TagGroup/src/TagItem.js';
 export { LabeledValue } from './LabeledValue/src/LabeledValue.js';

package/build/esm/index.js.map

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

package/build/index.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import React__default, { ReactNode, ReactElement, RefObject, Key } from 'react';
-import { SapphireStyleProps, PopoverTriggerProps, SearchFieldPropsWithRef, ListBoxProps, TypographyHeadingProps } from '@danske/sapphire-react';
+import { SapphireStyleProps, PopoverTriggerProps, SearchFieldPropsWithRef, ListBoxProps, TypographyHeadingProps, FieldProps } from '@danske/sapphire-react';
 import { CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue, PressEvents } from '@react-types/shared';
 import { HoverProps } from '@react-aria/interactions';
 import { DropOptions } from '@react-aria/dnd';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
+import { SliderProps as SliderProps$1, SliderThumbProps } from 'react-aria-components';
 export { useLocale } from '@react-aria/i18n';
 
 interface FilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'> {
@@ -307,6 +308,23 @@ declare type ProgressIndicatorProps = {
 });
 declare const ProgressIndicator: (props: ProgressIndicatorProps) => JSX.Element;
 
+declare type SliderProps = {
+    label?: ReactNode;
+    /**
+     * A note to show below the slider.
+     * Use {@Link Slider.Note} to render the note.
+     */
+    note?: ReactNode;
+} & SapphireStyleProps & Pick<FieldProps, 'isDisabled' | 'labelPlacement'> & Pick<SliderProps$1<number>, // We're only supporting sliders with one end
+'minValue' | 'maxValue' | 'step' | 'value' | 'defaultValue' | 'aria-label' | 'onChange' | 'onChangeEnd'> & Pick<SliderThumbProps, 'name'>;
+
+declare const _Slider: (({ label, labelPlacement, note, name, isDisabled, ...props }: SliderProps) => JSX.Element) & {
+    Note: ({ children, variant, ...props }: {
+        children?: React.ReactNode;
+        variant?: "warning" | "error" | "success" | "neutral" | undefined;
+    } & React.HTMLAttributes<HTMLElement>) => React.JSX.Element;
+};
+
 interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'>, SapphireStyleProps {
     /**
      * A HelpButton element to place next to the label.
@@ -402,4 +420,4 @@ interface SapphireAlertProps extends SapphireStyleProps {
 }
 declare function Alert({ children, title, variant, ...props }: SapphireAlertProps): React__default.JSX.Element;
 
-export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionProps, Alert, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, Flag, FlagProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, ProgressIndicator, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilter, SearchableSelectFilterProps, TagGroup, TagGroupProps, TagItem };
+export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionProps, Alert, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, Flag, FlagProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, ProgressIndicator, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilter, SearchableSelectFilterProps, _Slider as Slider, SliderProps, TagGroup, TagGroupProps, TagItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.97.0",
+  "version": "0.98.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,47 +25,48 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.3.0",
+    "@danske/sapphire-react": "^5.4.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.3.0",
+    "@danske/sapphire-react": "^5.4.0",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^42.0.0",
-    "@internationalized/date": "^3.6.0",
-    "@internationalized/string": "^3.2.5",
+    "@danske/sapphire-css": "^42.1.0",
+    "@internationalized/date": "^3.9.0",
+    "@internationalized/string": "^3.2.7",
     "@react-aria/accordion": "3.0.0-alpha.37",
-    "@react-aria/button": "^3.14.0",
-    "@react-aria/combobox": "^3.13.0",
-    "@react-aria/dialog": "^3.5.28",
-    "@react-aria/dnd": "^3.11.0",
-    "@react-aria/focus": "^3.21.0",
-    "@react-aria/i18n": "^3.12.11",
-    "@react-aria/interactions": "^3.25.4",
-    "@react-aria/label": "^3.7.20",
-    "@react-aria/numberfield": "^3.12.0",
-    "@react-aria/overlays": "^3.28.0",
-    "@react-aria/progress": "^3.4.24",
-    "@react-aria/tag": "^3.7.0",
-    "@react-aria/utils": "^3.30.0",
-    "@react-aria/visually-hidden": "^3.8.26",
+    "@react-aria/button": "^3.14.1",
+    "@react-aria/combobox": "^3.13.1",
+    "@react-aria/dialog": "^3.5.29",
+    "@react-aria/dnd": "^3.11.1",
+    "@react-aria/focus": "^3.21.1",
+    "@react-aria/i18n": "^3.12.12",
+    "@react-aria/interactions": "^3.25.5",
+    "@react-aria/label": "^3.7.21",
+    "@react-aria/numberfield": "^3.12.1",
+    "@react-aria/overlays": "^3.29.0",
+    "@react-aria/progress": "^3.4.26",
+    "@react-aria/tag": "^3.7.1",
+    "@react-aria/utils": "^3.30.1",
+    "@react-aria/visually-hidden": "^3.8.27",
     "@react-spectrum/utils": "^3.12.5",
-    "@react-stately/collections": "^3.12.6",
-    "@react-stately/combobox": "^3.11.0",
-    "@react-stately/list": "^3.12.4",
-    "@react-stately/numberfield": "^3.10.0",
-    "@react-stately/toggle": "^3.9.0",
-    "@react-stately/tree": "^3.9.1",
+    "@react-stately/collections": "^3.12.7",
+    "@react-stately/combobox": "^3.11.1",
+    "@react-stately/list": "^3.13.0",
+    "@react-stately/numberfield": "^3.10.1",
+    "@react-stately/toggle": "^3.9.1",
+    "@react-stately/tree": "^3.9.2",
     "@react-stately/utils": "^3.10.8",
-    "@react-types/dialog": "^3.5.20",
-    "@react-types/shared": "^3.31.0",
+    "@react-types/dialog": "^3.5.21",
+    "@react-types/shared": "^3.32.0",
     "clsx": "^1.1.1",
+    "react-aria-components": "^1.12.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "afb5a25463f39012c3599e6242c8d308786d11e1"
+  "gitHead": "1eefb683b16687ab3fc99c15fffb03a3eca522c5"
 }