@airplane/views/dist/components/datepicker/DatePicker.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { jsx } from "react/jsx-runtime";
import { createStyles } from "@mantine/core";
import { DatePicker as DatePicker$1 } from "@mantine/dates";
import { forwardRef } from "react";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { useCommonLayoutStyle } from "../layout/useCommonLayoutStyle.js";
import { useDatePickerState } from "../../state/components/datepicker/useDatePickerState.js";
import { useRegisterFormInput } from "../../state/components/form/useRegisterFormInput.js";
import { useInput } from "../../state/components/input/useInput.js";
import { useComponentId } from "../../state/components/useId.js";
const useStyles = createStyles((theme) => {
  return {
    weekend: {
      color: `${theme.colors.dark[6]} !important`
    },
    selected: {
      background: `${theme.colors.primary[5]} !important`
    }
  };
});
const DatePickerComponent = /* @__PURE__ */ forwardRef(({
  value,
  clearable = false,
  size = "sm",
  onChange,
  width,
  height,
  grow,
  className,
  style,
  ...props
}, ref) => {
  const {
    classes,
    cx
  } = useStyles();
  const {
    classes: layoutClasses
  } = useCommonLayoutStyle({
    width,
    height,
    grow
  });
  const onChangeMantine = onChange && ((d) => onChange(d ?? void 0));
  return /* @__PURE__ */ jsx(DatePicker$1, { ref, value: value || null, clearButtonLabel: "clear", className: cx(layoutClasses.style, className), style, dayClassName: (date, modifiers) => cx({
    [classes.weekend]: modifiers.weekend && !modifiers.outside && !modifiers.selected && !modifiers.disabled,
    [classes.selected]: modifiers.selected
  }), allowFreeInput: true, clearable, size, inputFormat: "MMM DD, YYYY", onChange: onChangeMantine, ...props });
});
DatePickerComponent.displayName = "DatePickerComponent";
const DatePicker = /* @__PURE__ */ forwardRef((props, ref) => {
  return /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: DISPLAY_NAME, children: /* @__PURE__ */ jsx(DatePickerWithoutRef, { ...props, innerRef: ref }) });
});
const DISPLAY_NAME = "DatePicker";
DatePicker.displayName = DISPLAY_NAME;
const DatePickerWithoutRef = (props) => {
  const id = useComponentId(props.id);
  const {
    state,
    dispatch
  } = useDatePickerState(id, {
    initialState: {
      disabled: props.disabled ?? props.defaultDisabled,
      value: props.value ?? props.defaultValue
    }
  });
  const {
    inputProps
  } = useInput(props, state, dispatch, (v) => v);
  useRegisterFormInput(id, "date-picker");
  const {
    innerRef,
    validate: _,
    onChange: __,
    defaultDisabled: ___,
    defaultValue: ____,
    ...restProps
  } = props;
  return /* @__PURE__ */ jsx(DatePickerComponent, { ref: innerRef, ...inputProps, ...restProps });
};
export {
  DatePicker,
  DatePickerComponent,
  DatePickerWithoutRef
};
//# sourceMappingURL=DatePicker.js.map