@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Checkbox/Checkbox.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { styled } from "styled-components";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import { getSubset, omitSubset } from "../utils/subset.js";
+import { addStyledProps } from "../StyledProps/index.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import Box from "../Box/Box.js";
+import ClickInputLabel from "../utils/ClickInputLabel.js";
+import Text from "../Type/Text.js";
+const checkboxStyle = (theme) => ({
+  checked: {
+    disabled: {
+      borderColor: theme.colors.lightGrey,
+      backgroundColor: theme.colors.lightGrey
+    },
+    error: {
+      borderColor: theme.colors.red,
+      backgroundColor: theme.colors.red
+    },
+    default: {
+      borderColor: theme.colors.darkBlue,
+      backgroundColor: theme.colors.darkBlue
+    }
+  },
+  unchecked: {
+    disabled: {
+      borderColor: theme.colors.lightGrey,
+      backgroundColor: theme.colors.whiteGrey
+    },
+    error: {
+      borderColor: theme.colors.red,
+      backgroundColor: theme.colors.white
+    },
+    default: {
+      borderColor: theme.colors.grey,
+      backgroundColor: theme.colors.white
+    }
+  }
+});
+const getCheckboxStyle = (props, checked) => {
+  const checkboxStyleMap = checkboxStyle(props.theme);
+  if (props.disabled) {
+    return checkboxStyleMap[checked].disabled;
+  }
+  if (props.error) {
+    return checkboxStyleMap[checked].error;
+  }
+  return checkboxStyleMap[checked].default;
+};
+const checkedStyles = {
+  borderRadius: "1px",
+  borderWidth: "0 3px 3px 0",
+  transform: "rotate(45deg)"
+};
+const indeterminateStyles = {
+  borderWidth: "0 3px 0 0",
+  transform: "rotate(90deg) translateX(1px)",
+  borderRadius: 0
+};
+const VisualCheckbox = styled.div(
+  ({ indeterminate, theme }) => ({
+    minWidth: theme.space.x2,
+    height: theme.space.x2,
+    borderRadius: theme.radii.small,
+    border: "solid 1px",
+    position: "relative",
+    "&:has(+ p)": {
+      marginTop: theme.space.x0_5,
+      marginBottom: theme.space.x0_5
+    },
+    // checkmark
+    "&:before": {
+      content: "''",
+      display: "none",
+      position: "relative",
+      left: theme.space.half,
+      width: theme.sizes.half,
+      height: theme.sizes.x1,
+      border: `solid ${theme.colors.white}`,
+      ...indeterminate ? indeterminateStyles : checkedStyles
+    }
+  }),
+  addStyledProps
+);
+const CheckboxInput = styled.input((props) => ({
+  position: "absolute",
+  opacity: "0",
+  height: "1px",
+  width: "1px",
+  [`&:focus + ${VisualCheckbox}`]: {
+    boxShadow: props.theme.shadows.focus
+  },
+  [`&:checked + ${VisualCheckbox}`]: {
+    ...getCheckboxStyle(props, "checked"),
+    "&:before": {
+      display: "block"
+    }
+  },
+  [`&:not(:checked) + ${VisualCheckbox}`]: {
+    ...getCheckboxStyle(props, "unchecked")
+  }
+}));
+const Checkbox = forwardRef((props, ref) => {
+  const { variant, className, labelText, disabled, checked, required, error, indeterminate } = props;
+  const componentVariant = useComponentVariant(variant);
+  const spaceProps = getSubset(props, propTypes.space);
+  const restProps = omitSubset(props, propTypes.space);
+  return /* @__PURE__ */ jsx(Box, { className, px: "0", ...spaceProps, children: /* @__PURE__ */ jsxs(ClickInputLabel, { variant: componentVariant, disabled, children: [
+    /* @__PURE__ */ jsx(
+      CheckboxInput,
+      {
+        type: "checkbox",
+        required,
+        "aria-required": required,
+        "aria-invalid": error,
+        indeterminate,
+        ref,
+        ...restProps
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VisualCheckbox,
+      {
+        disabled,
+        checked,
+        indeterminate,
+        "data-testid": "visual-checkbox"
+      }
+    ),
+    labelText && /* @__PURE__ */ jsx(
+      Text,
+      {
+        fontSize: componentVariant === "touch" ? "md" : void 0,
+        lineHeight: componentVariant === "touch" ? "base" : void 0,
+        disabled,
+        ml: "x1",
+        children: labelText
+      }
+    )
+  ] }) });
+});
+export {
+  Checkbox as default
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/esm/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { styled, CSSObject } from \"styled-components\";\nimport propTypes from \"@styled-system/prop-types\";\nimport { SpaceProps } from \"styled-system\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Type\";\nimport { ClickInputLabel } from \"../utils\";\nimport { getSubset, omitSubset } from \"../utils/subset\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport { addStyledProps } from \"../StyledProps\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\ntype NativeInputProps = Omit<React.ComponentPropsWithRef<\"input\">, \"size\">;\n\ntype CheckboxProps = NativeInputProps &\n  SpaceProps & {\n    children?: React.ReactNode;\n    htmlSize?: number;\n    variant?: ComponentVariant;\n    labelText?: string;\n    checked?: boolean;\n    defaultChecked?: boolean;\n    error?: boolean;\n    indeterminate?: boolean;\n    theme?: DefaultNDSThemeType;\n  };\n\nconst checkboxStyle = (theme: DefaultNDSThemeType) => ({\n  checked: {\n    disabled: {\n      borderColor: theme.colors.lightGrey,\n      backgroundColor: theme.colors.lightGrey,\n    },\n    error: {\n      borderColor: theme.colors.red,\n      backgroundColor: theme.colors.red,\n    },\n    default: {\n      borderColor: theme.colors.darkBlue,\n      backgroundColor: theme.colors.darkBlue,\n    },\n  },\n  unchecked: {\n    disabled: {\n      borderColor: theme.colors.lightGrey,\n      backgroundColor: theme.colors.whiteGrey,\n    },\n    error: {\n      borderColor: theme.colors.red,\n      backgroundColor: theme.colors.white,\n    },\n    default: {\n      borderColor: theme.colors.grey,\n      backgroundColor: theme.colors.white,\n    },\n  },\n});\n\nconst getCheckboxStyle = (props: CheckboxProps, checked: \"checked\" | \"unchecked\") => {\n  const checkboxStyleMap = checkboxStyle(props.theme);\n  if (props.disabled) {\n    return checkboxStyleMap[checked].disabled;\n  }\n  if (props.error) {\n    return checkboxStyleMap[checked].error;\n  }\n  return checkboxStyleMap[checked].default;\n};\n\nconst checkedStyles = {\n  borderRadius: \"1px\",\n  borderWidth: \"0 3px 3px 0\",\n  transform: \"rotate(45deg)\",\n};\n\nconst indeterminateStyles = {\n  borderWidth: \"0 3px 0 0\",\n  transform: \"rotate(90deg) translateX(1px)\",\n  borderRadius: 0,\n};\n\ntype VisualCheckboxProps = React.ComponentProps<\"div\"> &\n  SpaceProps & {\n    checked?: boolean;\n    disabled?: boolean;\n    indeterminate?: boolean;\n    theme?: DefaultNDSThemeType;\n  };\n\nconst VisualCheckbox = styled.div<VisualCheckboxProps>(\n  ({ indeterminate, theme }): CSSObject => ({\n    minWidth: theme.space.x2,\n    height: theme.space.x2,\n    borderRadius: theme.radii.small,\n    border: \"solid 1px\",\n    position: \"relative\",\n\n    \"&:has(+ p)\": {\n      marginTop: theme.space.x0_5,\n      marginBottom: theme.space.x0_5,\n    },\n\n    // checkmark\n    \"&:before\": {\n      content: \"''\",\n      display: \"none\",\n      position: \"relative\",\n      left: theme.space.half,\n      width: theme.sizes.half,\n      height: theme.sizes.x1,\n      border: `solid ${theme.colors.white}`,\n      ...(indeterminate ? indeterminateStyles : checkedStyles),\n    },\n  }),\n  addStyledProps\n);\n\nconst CheckboxInput = styled.input<CheckboxProps>((props) => ({\n  position: \"absolute\",\n  opacity: \"0\",\n  height: \"1px\",\n  width: \"1px\",\n  [`&:focus + ${VisualCheckbox}`]: {\n    boxShadow: props.theme.shadows.focus,\n  },\n  [`&:checked + ${VisualCheckbox}`]: {\n    ...getCheckboxStyle(props, \"checked\"),\n    \"&:before\": {\n      display: \"block\",\n    },\n  },\n  [`&:not(:checked) + ${VisualCheckbox}`]: {\n    ...getCheckboxStyle(props, \"unchecked\"),\n  },\n}));\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n  const { variant, className, labelText, disabled, checked, required, error, indeterminate } = props;\n\n  const componentVariant = useComponentVariant(variant);\n  const spaceProps = getSubset(props, propTypes.space);\n  const restProps = omitSubset(props, propTypes.space);\n\n  return (\n    <Box className={className} px=\"0\" {...spaceProps}>\n      <ClickInputLabel variant={componentVariant} disabled={disabled}>\n        <CheckboxInput\n          type=\"checkbox\"\n          required={required}\n          aria-required={required}\n          aria-invalid={error}\n          indeterminate={indeterminate}\n          ref={ref}\n          {...restProps}\n        />\n        <VisualCheckbox\n          disabled={disabled}\n          checked={checked}\n          indeterminate={indeterminate}\n          data-testid=\"visual-checkbox\"\n        />\n        {labelText && (\n          <Text\n            fontSize={componentVariant === \"touch\" ? \"md\" : undefined}\n            lineHeight={componentVariant === \"touch\" ? \"base\" : undefined}\n            disabled={disabled}\n            ml=\"x1\"\n          >\n            {labelText}\n          </Text>\n        )}\n      </ClickInputLabel>\n    </Box>\n  );\n});\n\nexport default Checkbox;\n"],"names":[],"mappings":"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"}

package/dist/esm/Checkbox/CheckboxGroup.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { styled } from "styled-components";
+import { LabelContent, LabelText } from "../FieldLabel/LabelText.js";
+import Checkbox from "./Checkbox.js";
+import Fieldset from "../Form/Fieldset.js";
+import RequirementText from "../FieldLabel/RequirementText.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import { InlineIcon } from "../Icon/Icon.js";
+import HelpText from "../FieldLabel/HelpText.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+function CheckboxGroup({
+  className,
+  id,
+  errorMessage,
+  errorList,
+  labelText,
+  helpText,
+  requirementText,
+  hint,
+  ...props
+}) {
+  const otherProps = { ...props, errorMessage, errorList };
+  return /* @__PURE__ */ jsxs(Fieldset, { className, id, children: [
+    /* @__PURE__ */ jsx(Legend, { children: /* @__PURE__ */ jsxs(LabelContent, { "data-testid": "label-content", children: [
+      /* @__PURE__ */ jsx(LabelText, { "data-testid": "label-text", children: labelText }),
+      requirementText && /* @__PURE__ */ jsx(RequirementText, { "data-testid": "requirement-text", ml: "none", children: requirementText }),
+      hint && /* @__PURE__ */ jsx(Tooltip, { tooltip: hint, children: /* @__PURE__ */ jsx(InlineIcon, { color: "darkGrey", size: "x2", icon: "info" }) })
+    ] }) }),
+    helpText && /* @__PURE__ */ jsx(HelpText, { children: helpText }),
+    getCheckboxButtons(otherProps),
+    /* @__PURE__ */ jsx(InlineValidation, { mt: "x1", errorMessage, errorList })
+  ] });
+}
+const getCheckboxButtons = (props) => {
+  const checkboxButtons = React__default.Children.map(props.children, (checkbox) => {
+    const { value, disabled, required, onChange, ...checkboxProps } = checkbox.props;
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        ...checkboxProps,
+        value,
+        disabled: props.disabled || disabled,
+        error: !!(props.errorMessage || props.errorList),
+        required: props.required || required,
+        name: props.name,
+        defaultChecked: props.defaultValue ? props.defaultValue.includes(value) : void 0,
+        checked: props.checkedValue ? props.checkedValue.includes(value) : void 0,
+        onChange: props.onChange || onChange
+      }
+    );
+  });
+  return checkboxButtons;
+};
+const Legend = styled.legend(({ theme }) => ({
+  marginBottom: theme.space.x1
+}));
+export {
+  CheckboxGroup as default
+};
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/esm/Checkbox/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport { HelpText, RequirementText } from \"../FieldLabel\";\nimport { InlineValidation } from \"../Validation\";\nimport { Fieldset } from \"../Form\";\nimport { InlineIcon } from \"../Icon\";\nimport { Tooltip } from \"../Tooltip\";\nimport LabelText, { LabelContent } from \"../FieldLabel/LabelText\";\nimport Checkbox from \"./Checkbox\";\n\ninterface CheckboxGroupProps {\n  children?: React.ReactNode;\n  errorMessage?: string;\n  errorList?: string[];\n  labelText: string;\n  name: string;\n  defaultValue?: string[];\n  checkedValue?: string[];\n  onChange?: (...args: any[]) => any;\n  className?: string;\n  id?: string;\n  helpText?: React.ReactNode;\n  requirementText?: string;\n  required?: boolean;\n  disabled?: boolean;\n  hint?: string;\n}\n\nexport default function CheckboxGroup({\n  className,\n  id,\n  errorMessage,\n  errorList,\n  labelText,\n  helpText,\n  requirementText,\n  hint,\n  ...props\n}: CheckboxGroupProps) {\n  const otherProps = { ...props, errorMessage, errorList };\n  return (\n    <Fieldset className={className} id={id}>\n      <Legend>\n        <LabelContent data-testid=\"label-content\">\n          <LabelText data-testid=\"label-text\">{labelText}</LabelText>\n          {requirementText && (\n            <RequirementText data-testid=\"requirement-text\" ml=\"none\">\n              {requirementText}\n            </RequirementText>\n          )}\n          {hint && (\n            <Tooltip tooltip={hint}>\n              <InlineIcon color=\"darkGrey\" size=\"x2\" icon=\"info\" />\n            </Tooltip>\n          )}\n        </LabelContent>\n      </Legend>\n      {helpText && <HelpText>{helpText}</HelpText>}\n      {getCheckboxButtons(otherProps)}\n      <InlineValidation mt=\"x1\" errorMessage={errorMessage} errorList={errorList} />\n    </Fieldset>\n  );\n}\n\nconst getCheckboxButtons = (props) => {\n  const checkboxButtons = React.Children.map(props.children, (checkbox) => {\n    const { value, disabled, required, onChange, ...checkboxProps } = checkbox.props;\n    return (\n      <Checkbox\n        {...checkboxProps}\n        value={value}\n        disabled={props.disabled || disabled}\n        error={!!(props.errorMessage || props.errorList)}\n        required={props.required || required}\n        name={props.name}\n        defaultChecked={props.defaultValue ? props.defaultValue.includes(value) : undefined}\n        checked={props.checkedValue ? props.checkedValue.includes(value) : undefined}\n        onChange={props.onChange || onChange}\n      />\n    );\n  });\n  return checkboxButtons;\n};\n\nconst Legend = styled.legend(({ theme }) => ({\n  marginBottom: theme.space.x1,\n}));\n"],"names":["React"],"mappings":";;;;;;;;;;;AA4BA,SAAwB,cAAc;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,aAAa,EAAE,GAAG,OAAO,cAAc,UAAA;AAC7C,SACE,qBAAC,UAAA,EAAS,WAAsB,IAC9B,UAAA;AAAA,IAAA,oBAAC,QAAA,EACC,UAAA,qBAAC,cAAA,EAAa,eAAY,iBACxB,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU,eAAY,cAAc,UAAA,WAAU;AAAA,MAC9C,mBACC,oBAAC,iBAAA,EAAgB,eAAY,oBAAmB,IAAG,QAChD,UAAA,iBACH;AAAA,MAED,QACC,oBAAC,SAAA,EAAQ,SAAS,MAChB,UAAA,oBAAC,YAAA,EAAW,OAAM,YAAW,MAAK,MAAK,MAAK,QAAO,EAAA,CACrD;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAAA,IACC,YAAY,oBAAC,UAAA,EAAU,UAAA,SAAA,CAAS;AAAA,IAChC,mBAAmB,UAAU;AAAA,IAC9B,oBAAC,kBAAA,EAAiB,IAAG,MAAK,cAA4B,UAAA,CAAsB;AAAA,EAAA,GAC9E;AAEJ;AAEA,MAAM,qBAAqB,CAAC,UAAU;AACpC,QAAM,kBAAkBA,eAAM,SAAS,IAAI,MAAM,UAAU,CAAC,aAAa;AACvE,UAAM,EAAE,OAAO,UAAU,UAAU,UAAU,GAAG,cAAA,IAAkB,SAAS;AAC3E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,UAAU,MAAM,YAAY;AAAA,QAC5B,OAAO,CAAC,EAAE,MAAM,gBAAgB,MAAM;AAAA,QACtC,UAAU,MAAM,YAAY;AAAA,QAC5B,MAAM,MAAM;AAAA,QACZ,gBAAgB,MAAM,eAAe,MAAM,aAAa,SAAS,KAAK,IAAI;AAAA,QAC1E,SAAS,MAAM,eAAe,MAAM,aAAa,SAAS,KAAK,IAAI;AAAA,QACnE,UAAU,MAAM,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlC,CAAC;AACD,SAAO;AACT;AAEA,MAAM,SAAS,OAAO,OAAO,CAAC,EAAE,aAAa;AAAA,EAC3C,cAAc,MAAM,MAAM;AAC5B,EAAE;"}

package/dist/esm/DatePickers/DatePicker.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import { BasePicker } from "./shared/components/BasePicker.js";
+import { DatePickerHeader } from "./shared/components/DatePickerHeader.js";
+import isValid from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isValid/index.js";
+import subDays from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/subDays/index.js";
+import isAfter from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isAfter/index.js";
+import isSameDay from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isSameDay/index.js";
+import addDays from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/addDays/index.js";
+import isBefore from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isBefore/index.js";
+const DEFAULT_DATE_FORMAT = "yyyy-MMM-dd";
+const DEFAULT_PLACEHOLDER = "YYYY-Mon-DD";
+const DatePicker = forwardRef(
+  ({ selected, dateFormat = DEFAULT_DATE_FORMAT, onChange, ...props }, datePickerRef) => {
+    const [selectedDate, setSelectedDate] = useState(selected);
+    const [ref] = useState(null);
+    useEffect(() => {
+      setSelectedDate(selected);
+    }, [selected]);
+    const handleSelectedDateChange = (date) => {
+      if (onChange) {
+        onChange(date);
+      }
+      setSelectedDate(date);
+    };
+    const handleDownKey = () => {
+      const newSelectedDate = isValid(selectedDate) ? subDays(selectedDate, 1) : /* @__PURE__ */ new Date();
+      if (!props.minDate || isAfter(newSelectedDate, props.minDate) || isSameDay(newSelectedDate, props.minDate)) {
+        handleSelectedDateChange(newSelectedDate);
+      }
+    };
+    const handleUpKey = () => {
+      const newSelectedDate = isValid(selectedDate) ? addDays(selectedDate, 1) : /* @__PURE__ */ new Date();
+      if (!props.maxDate || isBefore(newSelectedDate, props.maxDate) || isSameDay(newSelectedDate, props.maxDate)) {
+        handleSelectedDateChange(newSelectedDate);
+      }
+    };
+    const handleEnterKey = () => {
+      if (ref) {
+        const isOpen = ref.isCalendarOpen();
+        ref.setOpen(!isOpen);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      BasePicker,
+      {
+        ...props,
+        selected: selectedDate,
+        dateFormat,
+        onChange: handleSelectedDateChange,
+        ref: datePickerRef,
+        defaultFormat: DEFAULT_DATE_FORMAT,
+        defaultPlaceholder: DEFAULT_PLACEHOLDER,
+        showMonthYearPicker: false,
+        disabledKeyboardNavigation: true,
+        onUpKeyPress: handleUpKey,
+        onDownKeyPress: handleDownKey,
+        onEnterKeyPress: handleEnterKey,
+        renderHeader: (headerProps) => /* @__PURE__ */ jsx(DatePickerHeader, { locale: props.locale, ...headerProps })
+      }
+    );
+  }
+);
+export {
+  DatePicker as default
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/DatePickers/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../src/DatePickers/DatePicker.tsx"],"sourcesContent":["import React, { forwardRef, useState, useEffect } from \"react\";\nimport type { ReactDatePicker, ReactDatePickerCustomHeaderProps } from \"react-datepicker\";\nimport { subDays, addDays, isValid, isAfter, isBefore, isSameDay } from \"date-fns\";\nimport { DatePickerProps } from \"./shared/types\";\nimport { BasePicker } from \"./shared/components/BasePicker\";\nimport { DatePickerHeader } from \"./shared/components/DatePickerHeader\";\n\nconst DEFAULT_DATE_FORMAT = \"yyyy-MMM-dd\";\nconst DEFAULT_PLACEHOLDER = \"YYYY-Mon-DD\";\n\nconst DatePicker = forwardRef<ReactDatePicker, DatePickerProps>(\n  ({ selected, dateFormat = DEFAULT_DATE_FORMAT, onChange, ...props }, datePickerRef) => {\n    const [selectedDate, setSelectedDate] = useState(selected);\n    const [ref] = useState(null);\n\n    useEffect(() => {\n      setSelectedDate(selected);\n    }, [selected]);\n\n    const handleSelectedDateChange = (date: Date) => {\n      if (onChange) {\n        onChange(date);\n      }\n      setSelectedDate(date);\n    };\n\n    const handleDownKey = () => {\n      const newSelectedDate = isValid(selectedDate) ? subDays(selectedDate, 1) : new Date();\n      if (!props.minDate || isAfter(newSelectedDate, props.minDate) || isSameDay(newSelectedDate, props.minDate)) {\n        handleSelectedDateChange(newSelectedDate);\n      }\n    };\n\n    const handleUpKey = () => {\n      const newSelectedDate = isValid(selectedDate) ? addDays(selectedDate, 1) : new Date();\n      if (!props.maxDate || isBefore(newSelectedDate, props.maxDate) || isSameDay(newSelectedDate, props.maxDate)) {\n        handleSelectedDateChange(newSelectedDate);\n      }\n    };\n\n    const handleEnterKey = () => {\n      if (ref) {\n        const isOpen = ref.isCalendarOpen();\n        ref.setOpen(!isOpen);\n      }\n    };\n\n    return (\n      <BasePicker\n        {...props}\n        selected={selectedDate}\n        dateFormat={dateFormat}\n        onChange={handleSelectedDateChange}\n        ref={datePickerRef}\n        defaultFormat={DEFAULT_DATE_FORMAT}\n        defaultPlaceholder={DEFAULT_PLACEHOLDER}\n        showMonthYearPicker={false}\n        disabledKeyboardNavigation\n        onUpKeyPress={handleUpKey}\n        onDownKeyPress={handleDownKey}\n        onEnterKeyPress={handleEnterKey}\n        renderHeader={(headerProps: ReactDatePickerCustomHeaderProps) => (\n          <DatePickerHeader locale={props.locale} {...headerProps} />\n        )}\n      />\n    );\n  }\n);\n\nexport default DatePicker;\n"],"names":[],"mappings":";;;;;;;;;;AAOA,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAE5B,MAAM,aAAa;AAAA,EACjB,CAAC,EAAE,UAAU,aAAa,qBAAqB,UAAU,GAAG,MAAA,GAAS,kBAAkB;AACrF,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,QAAQ;AACzD,UAAM,CAAC,GAAG,IAAI,SAAS,IAAI;AAE3B,cAAU,MAAM;AACd,sBAAgB,QAAQ;AAAA,IAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,2BAA2B,CAAC,SAAe;AAC/C,UAAI,UAAU;AACZ,iBAAS,IAAI;AAAA,MACf;AACA,sBAAgB,IAAI;AAAA,IACtB;AAEA,UAAM,gBAAgB,MAAM;AAC1B,YAAM,kBAAkB,QAAQ,YAAY,IAAI,QAAQ,cAAc,CAAC,IAAI,oBAAI,KAAA;AAC/E,UAAI,CAAC,MAAM,WAAW,QAAQ,iBAAiB,MAAM,OAAO,KAAK,UAAU,iBAAiB,MAAM,OAAO,GAAG;AAC1G,iCAAyB,eAAe;AAAA,MAC1C;AAAA,IACF;AAEA,UAAM,cAAc,MAAM;AACxB,YAAM,kBAAkB,QAAQ,YAAY,IAAI,QAAQ,cAAc,CAAC,IAAI,oBAAI,KAAA;AAC/E,UAAI,CAAC,MAAM,WAAW,SAAS,iBAAiB,MAAM,OAAO,KAAK,UAAU,iBAAiB,MAAM,OAAO,GAAG;AAC3G,iCAAyB,eAAe;AAAA,MAC1C;AAAA,IACF;AAEA,UAAM,iBAAiB,MAAM;AAC3B,UAAI,KAAK;AACP,cAAM,SAAS,IAAI,eAAA;AACnB,YAAI,QAAQ,CAAC,MAAM;AAAA,MACrB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,KAAK;AAAA,QACL,eAAe;AAAA,QACf,oBAAoB;AAAA,QACpB,qBAAqB;AAAA,QACrB,4BAA0B;AAAA,QAC1B,cAAc;AAAA,QACd,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,cAAc,CAAC,gBACb,oBAAC,oBAAiB,QAAQ,MAAM,QAAS,GAAG,YAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAIjE;AACF;"}

package/dist/esm/DatePickers/MonthPicker.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import { noop } from "../utils/noop.js";
+import { BasePicker } from "./shared/components/BasePicker.js";
+import { MonthDatePickerHeader } from "./custom/MonthPickerHeader.js";
+const DEFAULT_MONTH_FORMAT = "yyyy-MMM";
+const DEFAULT_PLACEHOLDER = "YYYY-Mon";
+const MonthPicker = forwardRef(
+  ({ selected, dateFormat = DEFAULT_MONTH_FORMAT, onChange, ...props }, monthPickerRef) => {
+    const [selectedDate, setSelectedDate] = useState(selected);
+    const [ref] = useState(null);
+    useEffect(() => {
+      setSelectedDate(selected);
+    }, [selected]);
+    const handleSelectedDateChange = (date) => {
+      if (onChange) {
+        onChange(date);
+      }
+      setSelectedDate(date);
+    };
+    const handleUpKey = noop;
+    const handleDownKey = noop;
+    const handleEnterKey = () => {
+      if (ref) {
+        const isOpen = ref.isCalendarOpen();
+        ref.setOpen(!isOpen);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      BasePicker,
+      {
+        ...props,
+        selected: selectedDate,
+        onChange: handleSelectedDateChange,
+        ref: monthPickerRef,
+        dateFormat,
+        defaultFormat: DEFAULT_MONTH_FORMAT,
+        defaultPlaceholder: DEFAULT_PLACEHOLDER,
+        showMonthYearPicker: true,
+        renderHeader: (headerProps) => /* @__PURE__ */ jsx(MonthDatePickerHeader, { locale: props.locale, ...headerProps }),
+        onUpKeyPress: handleUpKey,
+        onDownKeyPress: handleDownKey,
+        onEnterKeyPress: handleEnterKey
+      }
+    );
+  }
+);
+export {
+  DEFAULT_MONTH_FORMAT,
+  DEFAULT_PLACEHOLDER,
+  MonthPicker as default
+};
+//# sourceMappingURL=MonthPicker.js.map

package/dist/esm/DatePickers/MonthPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.js","sources":["../../../src/DatePickers/MonthPicker.tsx"],"sourcesContent":["import React, { forwardRef, useState, useEffect } from \"react\";\nimport type { ReactDatePicker, ReactDatePickerCustomHeaderProps } from \"react-datepicker\";\nimport { noop } from \"../utils/noop\";\nimport { DatePickerProps } from \"./shared/types\";\nimport { BasePicker } from \"./shared/components/BasePicker\";\nimport { MonthDatePickerHeader } from \"./custom/MonthPickerHeader\";\n\ntype MonthPickerProps = DatePickerProps;\n\nexport const DEFAULT_MONTH_FORMAT = \"yyyy-MMM\";\nexport const DEFAULT_PLACEHOLDER = \"YYYY-Mon\";\n\nconst MonthPicker = forwardRef<ReactDatePicker, MonthPickerProps>(\n  ({ selected, dateFormat = DEFAULT_MONTH_FORMAT, onChange, ...props }, monthPickerRef) => {\n    const [selectedDate, setSelectedDate] = useState(selected);\n    const [ref] = useState(null);\n\n    useEffect(() => {\n      setSelectedDate(selected);\n    }, [selected]);\n\n    const handleSelectedDateChange = (date: Date) => {\n      if (onChange) {\n        onChange(date);\n      }\n      setSelectedDate(date);\n    };\n\n    const handleUpKey = noop;\n    const handleDownKey = noop;\n\n    const handleEnterKey = () => {\n      if (ref) {\n        const isOpen = ref.isCalendarOpen();\n        ref.setOpen(!isOpen);\n      }\n    };\n\n    return (\n      <BasePicker\n        {...props}\n        selected={selectedDate}\n        onChange={handleSelectedDateChange}\n        ref={monthPickerRef}\n        dateFormat={dateFormat}\n        defaultFormat={DEFAULT_MONTH_FORMAT}\n        defaultPlaceholder={DEFAULT_PLACEHOLDER}\n        showMonthYearPicker={true}\n        renderHeader={(headerProps: ReactDatePickerCustomHeaderProps) => (\n          <MonthDatePickerHeader locale={props.locale} {...headerProps} />\n        )}\n        onUpKeyPress={handleUpKey}\n        onDownKeyPress={handleDownKey}\n        onEnterKeyPress={handleEnterKey}\n      />\n    );\n  }\n);\n\nexport default MonthPicker;\n"],"names":[],"mappings":";;;;;AASO,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAEnC,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,UAAU,aAAa,sBAAsB,UAAU,GAAG,MAAA,GAAS,mBAAmB;AACvF,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,QAAQ;AACzD,UAAM,CAAC,GAAG,IAAI,SAAS,IAAI;AAE3B,cAAU,MAAM;AACd,sBAAgB,QAAQ;AAAA,IAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,2BAA2B,CAAC,SAAe;AAC/C,UAAI,UAAU;AACZ,iBAAS,IAAI;AAAA,MACf;AACA,sBAAgB,IAAI;AAAA,IACtB;AAEA,UAAM,cAAc;AACpB,UAAM,gBAAgB;AAEtB,UAAM,iBAAiB,MAAM;AAC3B,UAAI,KAAK;AACP,cAAM,SAAS,IAAI,eAAA;AACnB,YAAI,QAAQ,CAAC,MAAM;AAAA,MACrB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAK;AAAA,QACL;AAAA,QACA,eAAe;AAAA,QACf,oBAAoB;AAAA,QACpB,qBAAqB;AAAA,QACrB,cAAc,CAAC,gBACb,oBAAC,yBAAsB,QAAQ,MAAM,QAAS,GAAG,aAAa;AAAA,QAEhE,cAAc;AAAA,QACd,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvB;AACF;"}

package/dist/esm/DatePickers/WeekPicker.js

@@ -0,0 +1,184 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import React__default, { forwardRef, useState, useEffect } from "react";
+import er from "../node_modules/.pnpm/react-datepicker@4.25.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-datepicker/dist/es/index.js";
+import Field from "../Form/Field.js";
+import { InputFieldDefaultProps } from "../Input/InputField.js";
+import { NDS_TO_DATE_FN_LOCALES_MAP } from "../locales.const.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import { useLocale } from "../NDSProvider/LocaleContext.js";
+import { registerDatePickerLocales } from "../utils/datePickerLocales.js";
+import { getSubset } from "../utils/subset.js";
+import { WeekPickerStyles } from "./custom/weekPickerStyles.js";
+import { DatePickerHeader } from "./shared/components/DatePickerHeader.js";
+import DatePickerInput from "./shared/components/DatePickerInput.js";
+import { getPopperModifiers } from "./shared/helpers.js";
+import { DatePickerStyles } from "./shared/styles.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+import startOfWeek from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/startOfWeek/index.js";
+import isBefore from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isBefore/index.js";
+import addDays from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/addDays/index.js";
+import endOfWeek from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/endOfWeek/index.js";
+import isValid from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isValid/index.js";
+import getYear from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/getYear/index.js";
+import getWeek from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/getWeek/index.js";
+import isSameDay from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isSameDay/index.js";
+import subDays from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/subDays/index.js";
+import isAfter from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isAfter/index.js";
+const WEEK_START_DAY = 1;
+const roundMinDateToWeekStart = (date) => {
+  if (!date) return void 0;
+  const weekStart = startOfWeek(date, { weekStartsOn: WEEK_START_DAY });
+  return isBefore(date, weekStart) ? weekStart : addDays(weekStart, 7);
+};
+const roundMaxDateToWeekEnd = (date) => {
+  if (!date) return void 0;
+  const weekEnd = endOfWeek(date, { weekStartsOn: WEEK_START_DAY });
+  return isBefore(date, weekEnd) ? addDays(startOfWeek(date, { weekStartsOn: WEEK_START_DAY }), -1) : weekEnd;
+};
+const WeekPicker = forwardRef(
+  ({
+    dateFormat,
+    errorMessage,
+    errorList,
+    inputProps,
+    minDate,
+    maxDate,
+    locale,
+    disableFlipping,
+    className,
+    onInputChange,
+    onChange,
+    onBlur,
+    onFocus,
+    selected,
+    ...props
+  }, datePickerRef) => {
+    const [selectedDate, setSelectedDate] = useState(selected);
+    const { locale: contextLocale } = useLocale();
+    const { i18n } = useTranslation();
+    const [ref, setRef] = useState(null);
+    const spaceProps = getSubset(props, propTypes.space);
+    const currentLocale = locale || contextLocale;
+    const componentVariant = useComponentVariant();
+    const t = React__default.useMemo(() => {
+      return i18n.getFixedT(currentLocale);
+    }, [i18n, currentLocale]);
+    const defaultDateFormat = t("weekPicker date format");
+    const defaultPlaceholder = t("weekPicker placeholder");
+    const weekShorthand = t("week shorthand");
+    const finalDateFormat = dateFormat || defaultDateFormat;
+    useEffect(() => {
+      registerDatePickerLocales();
+    }, []);
+    useEffect(() => {
+      setSelectedDate(selected);
+    }, [selected]);
+    const roundedMinDate = roundMinDateToWeekStart(minDate);
+    const roundedMaxDate = roundMaxDateToWeekEnd(maxDate);
+    const onRefChange = React__default.useCallback((node) => {
+      if (node) {
+        setRef(node);
+      }
+    }, []);
+    const handleInputChange = (event) => {
+      if (onInputChange) {
+        onInputChange(event.target.value);
+      }
+    };
+    const handleSelectedDateChange = (date) => {
+      if (!isValid(date)) {
+        return;
+      }
+      if (onChange) {
+        onChange({
+          startDate: startOfWeek(date, { weekStartsOn: WEEK_START_DAY }),
+          endDate: endOfWeek(date, { weekStartsOn: WEEK_START_DAY }),
+          weekNumber: getWeek(date, { weekStartsOn: WEEK_START_DAY }),
+          year: getYear(date)
+        });
+      }
+      setSelectedDate(date);
+    };
+    const handleUpKey = () => {
+      const newSelectedDate = isValid(selectedDate) ? subDays(selectedDate, 7) : startOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 1 });
+      if (!roundedMinDate || isAfter(newSelectedDate, roundedMinDate) || isSameDay(newSelectedDate, roundedMinDate)) {
+        handleSelectedDateChange(newSelectedDate);
+      }
+    };
+    const handleDownKey = () => {
+      const newSelectedDate = isValid(selectedDate) ? addDays(selectedDate, 7) : startOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 1 });
+      if (!roundedMaxDate || isBefore(newSelectedDate, roundedMaxDate) || isSameDay(newSelectedDate, roundedMaxDate)) {
+        handleSelectedDateChange(newSelectedDate);
+      }
+    };
+    const handleEnterKey = () => {
+      if (ref) {
+        const isOpen = ref.isCalendarOpen();
+        ref.setOpen(!isOpen);
+      }
+    };
+    const renderCustomHeader = (props2) => {
+      return /* @__PURE__ */ jsx(DatePickerHeader, { locale: currentLocale, ...props2 });
+    };
+    const weekPickerRefHandler = (r) => {
+      if (datePickerRef) {
+        datePickerRef["current"] = r;
+      }
+      onRefChange(r);
+    };
+    const customInputProps = {
+      ...InputFieldDefaultProps,
+      error: !!(errorMessage || errorList),
+      ...inputProps,
+      placeholder: inputProps && inputProps.placeholder || (finalDateFormat === defaultDateFormat ? defaultPlaceholder : finalDateFormat)
+    };
+    const customInput = /* @__PURE__ */ jsx(
+      DatePickerInput,
+      {
+        locale: currentLocale,
+        variant: componentVariant,
+        inputProps: customInputProps,
+        dateFormat: finalDateFormat,
+        onInputChange: handleInputChange,
+        onUpKeyPress: handleUpKey,
+        onDownKeyPress: handleDownKey,
+        onEnterKeyPress: handleEnterKey
+      }
+    );
+    return /* @__PURE__ */ jsxs(Field, { className: `${className} nds-date-picker`, ...spaceProps, children: [
+      /* @__PURE__ */ jsx(DatePickerStyles, {}),
+      /* @__PURE__ */ jsx(WeekPickerStyles, { variant: componentVariant }),
+      /* @__PURE__ */ jsx(
+        er,
+        {
+          showWeekNumbers: true,
+          showWeekPicker: true,
+          weekLabel: weekShorthand,
+          calendarStartDay: WEEK_START_DAY,
+          selected: selectedDate,
+          openToDate: selectedDate,
+          dateFormat: finalDateFormat,
+          onChange: handleSelectedDateChange,
+          customInput,
+          renderCustomHeader,
+          strictParsing: true,
+          minDate: roundedMinDate,
+          maxDate: roundedMaxDate,
+          locale: NDS_TO_DATE_FN_LOCALES_MAP[currentLocale],
+          ref: weekPickerRefHandler,
+          onFocus,
+          onBlur,
+          popperModifiers: getPopperModifiers(disableFlipping),
+          disabledKeyboardNavigation: true
+        }
+      ),
+      /* @__PURE__ */ jsx(InlineValidation, { mt: "x1", errorMessage, errorList })
+    ] });
+  }
+);
+export {
+  WeekPicker as default
+};
+//# sourceMappingURL=WeekPicker.js.map

package/dist/esm/DatePickers/WeekPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeekPicker.js","sources":["../../../src/DatePickers/WeekPicker.tsx"],"sourcesContent":["import propTypes from \"@styled-system/prop-types\";\nimport {\n  addDays,\n  endOfWeek,\n  getWeek,\n  getYear,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isValid,\n  startOfWeek,\n  subDays,\n} from \"date-fns\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport ReactDatePicker, { ReactDatePickerCustomHeaderProps } from \"react-datepicker\";\nimport { useTranslation } from \"react-i18next\";\nimport Field, { FieldProps } from \"../Form/Field\";\nimport { InputFieldDefaultProps, InputFieldProps } from \"../Input/InputField\";\nimport { NDS_TO_DATE_FN_LOCALES_MAP } from \"../locales.const\";\nimport { useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport { useLocale } from \"../NDSProvider/LocaleContext\";\nimport { registerDatePickerLocales } from \"../utils/datePickerLocales\";\nimport { getSubset } from \"../utils/subset\";\nimport { InlineValidation } from \"../Validation\";\nimport { WeekPickerStyles } from \"./custom/weekPickerStyles\";\nimport { DatePickerHeader } from \"./shared/components/DatePickerHeader\";\nimport DatePickerInput from \"./shared/components/DatePickerInput\";\nimport { getPopperModifiers } from \"./shared/helpers\";\nimport { DatePickerStyles } from \"./shared/styles\";\n\ntype OmittedFieldProps = \"onChange\" | \"onBlur\" | \"onFocus\";\n\ninterface WeekRange {\n  startDate: Date;\n  endDate: Date;\n  weekNumber: number;\n  year: number;\n}\n\ninterface WeekPickerProps extends Omit<FieldProps, OmittedFieldProps> {\n  selected?: Date | null;\n  onChange?: (weekRange: WeekRange) => void;\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  onInputChange?: (value: string) => void;\n  dateFormat?: string;\n  inputProps?: InputFieldProps;\n  errorMessage?: string;\n  errorList?: string[];\n  minDate?: Date;\n  maxDate?: Date;\n  locale?: string;\n  disableFlipping?: boolean;\n}\n\nconst WEEK_START_DAY = 1; // Monday\n\nconst roundMinDateToWeekStart = (date: Date | undefined): Date | undefined => {\n  if (!date) return undefined;\n  const weekStart = startOfWeek(date, { weekStartsOn: WEEK_START_DAY });\n  return isBefore(date, weekStart) ? weekStart : addDays(weekStart, 7);\n};\n\nconst roundMaxDateToWeekEnd = (date: Date | undefined): Date | undefined => {\n  if (!date) return undefined;\n  const weekEnd = endOfWeek(date, { weekStartsOn: WEEK_START_DAY });\n  return isBefore(date, weekEnd) ? addDays(startOfWeek(date, { weekStartsOn: WEEK_START_DAY }), -1) : weekEnd;\n};\n\nconst WeekPicker = forwardRef<unknown, WeekPickerProps>(\n  (\n    {\n      dateFormat,\n      errorMessage,\n      errorList,\n      inputProps,\n      minDate,\n      maxDate,\n      locale,\n      disableFlipping,\n      className,\n      onInputChange,\n      onChange,\n      onBlur,\n      onFocus,\n      selected,\n      ...props\n    },\n    datePickerRef\n  ) => {\n    const [selectedDate, setSelectedDate] = useState(selected);\n    const { locale: contextLocale } = useLocale();\n    const { i18n } = useTranslation();\n    const [ref, setRef] = useState(null);\n    const spaceProps = getSubset(props, propTypes.space);\n\n    const currentLocale = locale || contextLocale;\n\n    const componentVariant = useComponentVariant();\n\n    const t = React.useMemo(() => {\n      return i18n.getFixedT(currentLocale);\n    }, [i18n, currentLocale]);\n\n    const defaultDateFormat = t(\"weekPicker date format\");\n    const defaultPlaceholder = t(\"weekPicker placeholder\");\n    const weekShorthand = t(\"week shorthand\");\n\n    const finalDateFormat = dateFormat || defaultDateFormat;\n\n    useEffect(() => {\n      registerDatePickerLocales();\n    }, []);\n\n    useEffect(() => {\n      setSelectedDate(selected);\n    }, [selected]);\n\n    const roundedMinDate = roundMinDateToWeekStart(minDate);\n    const roundedMaxDate = roundMaxDateToWeekEnd(maxDate);\n\n    const onRefChange = React.useCallback((node) => {\n      if (node) {\n        setRef(node);\n      }\n    }, []);\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (onInputChange) {\n        onInputChange(event.target.value);\n      }\n    };\n\n    const handleSelectedDateChange = (date: Date) => {\n      if (!isValid(date)) {\n        return;\n      }\n\n      if (onChange) {\n        onChange({\n          startDate: startOfWeek(date, { weekStartsOn: WEEK_START_DAY }),\n          endDate: endOfWeek(date, { weekStartsOn: WEEK_START_DAY }),\n          weekNumber: getWeek(date, { weekStartsOn: WEEK_START_DAY }),\n          year: getYear(date),\n        });\n      }\n      setSelectedDate(date);\n    };\n\n    const handleUpKey = () => {\n      const newSelectedDate = isValid(selectedDate)\n        ? subDays(selectedDate, 7)\n        : startOfWeek(new Date(), { weekStartsOn: 1 });\n      if (!roundedMinDate || isAfter(newSelectedDate, roundedMinDate) || isSameDay(newSelectedDate, roundedMinDate)) {\n        handleSelectedDateChange(newSelectedDate);\n      }\n    };\n\n    const handleDownKey = () => {\n      const newSelectedDate = isValid(selectedDate)\n        ? addDays(selectedDate, 7)\n        : startOfWeek(new Date(), { weekStartsOn: 1 });\n      if (!roundedMaxDate || isBefore(newSelectedDate, roundedMaxDate) || isSameDay(newSelectedDate, roundedMaxDate)) {\n        handleSelectedDateChange(newSelectedDate);\n      }\n    };\n\n    const handleEnterKey = () => {\n      if (ref) {\n        const isOpen = ref.isCalendarOpen();\n        ref.setOpen(!isOpen);\n      }\n    };\n\n    const renderCustomHeader = (props: ReactDatePickerCustomHeaderProps) => {\n      return <DatePickerHeader locale={currentLocale} {...props} />;\n    };\n\n    const weekPickerRefHandler = (r: ReactDatePicker<string>) => {\n      if (datePickerRef) {\n        datePickerRef[\"current\"] = r;\n      }\n      onRefChange(r);\n    };\n\n    const customInputProps = {\n      ...InputFieldDefaultProps,\n      error: !!(errorMessage || errorList),\n      ...inputProps,\n      placeholder:\n        (inputProps && inputProps.placeholder) ||\n        (finalDateFormat === defaultDateFormat ? defaultPlaceholder : finalDateFormat),\n    };\n\n    const customInput = (\n      <DatePickerInput\n        locale={currentLocale}\n        variant={componentVariant}\n        inputProps={customInputProps}\n        dateFormat={finalDateFormat}\n        onInputChange={handleInputChange}\n        onUpKeyPress={handleUpKey}\n        onDownKeyPress={handleDownKey}\n        onEnterKeyPress={handleEnterKey}\n      />\n    );\n\n    return (\n      <Field className={`${className} nds-date-picker`} {...spaceProps}>\n        <DatePickerStyles />\n        <WeekPickerStyles variant={componentVariant} />\n        <ReactDatePicker\n          showWeekNumbers\n          showWeekPicker\n          weekLabel={weekShorthand}\n          calendarStartDay={WEEK_START_DAY}\n          selected={selectedDate}\n          openToDate={selectedDate}\n          dateFormat={finalDateFormat}\n          onChange={handleSelectedDateChange}\n          customInput={customInput}\n          renderCustomHeader={renderCustomHeader}\n          strictParsing\n          minDate={roundedMinDate}\n          maxDate={roundedMaxDate}\n          locale={NDS_TO_DATE_FN_LOCALES_MAP[currentLocale]}\n          ref={weekPickerRefHandler}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          popperModifiers={getPopperModifiers(disableFlipping)}\n          disabledKeyboardNavigation\n        />\n        <InlineValidation mt=\"x1\" errorMessage={errorMessage} errorList={errorList} />\n      </Field>\n    );\n  }\n);\n\nexport default WeekPicker;\n"],"names":["React","props","ReactDatePicker"],"mappings":"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"}

package/dist/esm/DatePickers/custom/MonthPickerHeader.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { localizedFormat } from "../../utils/localized-date-fns.js";
+import { useTranslation } from "../../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Flex from "../../Flex/Flex.js";
+import ControlIcon from "../../Button/ControlIcon.js";
+import Text from "../../Type/Text.js";
+function MonthDatePickerHeader({
+  date,
+  increaseYear,
+  decreaseYear,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+  locale
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", pb: "x1_5", children: [
+    /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        icon: "leftArrow",
+        label: t("go to previous year"),
+        onClick: decreaseYear,
+        disabled: prevMonthButtonDisabled
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { fontWeight: "bold", color: "blackBlue", px: "x8", fontSize: "large", style: { textTransform: "capitalize" }, children: localizedFormat(date, "yyyy", locale) }),
+    /* @__PURE__ */ jsx(
+      ControlIcon,
+      {
+        icon: "rightArrow",
+        label: t("go to next year"),
+        onClick: increaseYear,
+        disabled: nextMonthButtonDisabled
+      }
+    )
+  ] });
+}
+export {
+  MonthDatePickerHeader
+};
+//# sourceMappingURL=MonthPickerHeader.js.map

package/dist/esm/DatePickers/custom/MonthPickerHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPickerHeader.js","sources":["../../../../src/DatePickers/custom/MonthPickerHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactDatePickerCustomHeaderProps } from \"react-datepicker\";\nimport { useTranslation } from \"react-i18next\";\nimport { ControlIcon } from \"../../Button\";\nimport { Flex } from \"../../Flex\";\nimport { localizedFormat } from \"../../utils/localized-date-fns\";\nimport { Text } from \"../../Type\";\n\nexport function MonthDatePickerHeader({\n  date,\n  increaseYear,\n  decreaseYear,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n  locale,\n}: ReactDatePickerCustomHeaderProps & { locale?: string }) {\n  const { t } = useTranslation();\n\n  return (\n    <Flex justifyContent=\"space-between\" alignItems=\"center\" pb=\"x1_5\">\n      <ControlIcon\n        icon=\"leftArrow\"\n        label={t(\"go to previous year\")}\n        onClick={decreaseYear}\n        disabled={prevMonthButtonDisabled}\n      />\n      <Text fontWeight=\"bold\" color=\"blackBlue\" px=\"x8\" fontSize=\"large\" style={{ textTransform: \"capitalize\" }}>\n        {localizedFormat(date, \"yyyy\", locale)}\n      </Text>\n      <ControlIcon\n        icon=\"rightArrow\"\n        label={t(\"go to next year\")}\n        onClick={increaseYear}\n        disabled={nextMonthButtonDisabled}\n      />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAQO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2D;AACzD,QAAM,EAAE,EAAA,IAAM,eAAA;AAEd,8BACG,MAAA,EAAK,gBAAe,iBAAgB,YAAW,UAAS,IAAG,QAC1D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,qBAAqB;AAAA,QAC9B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,wBAEX,MAAA,EAAK,YAAW,QAAO,OAAM,aAAY,IAAG,MAAK,UAAS,SAAQ,OAAO,EAAE,eAAe,aAAA,GACxF,0BAAgB,MAAM,QAAQ,MAAM,GACvC;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,iBAAiB;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}