@ndla/primitives 0.0.2 → 0.0.4

package/lib/FormControl.js

@@ -1,173 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFormControlProps = exports.useFormControlContext = exports.useFormControl = exports.FormControl = void 0;
-var _react = require("react");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _util = require("@ndla/util");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledFormControl = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall"
-  }
-});
-const useFormControlProvider = _ref => {
-  let {
-    id: idProp,
-    isRequired,
-    isDisabled,
-    isInvalid
-  } = _ref;
-  const id = "field-".concat(idProp);
-  const labelId = "".concat(id, "-label");
-  const errorTextId = "".concat(id, "-error-message");
-  const helpTextId = "".concat(id, "-helper");
-  const [hasErrorText, setHasErrorText] = (0, _react.useState)(false);
-  const [hasHelpText, setHasHelpText] = (0, _react.useState)(false);
-  const getHelpTextProps = (0, _react.useCallback)(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      id: helpTextId,
-      ...props,
-      ref: (0, _util.composeRefs)(forwardedRef, node => {
-        if (!node) return;
-        setHasHelpText(true);
-      })
-    };
-  }, [helpTextId]);
-  const getLabelProps = (0, _react.useCallback)(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      ...props,
-      ref: forwardedRef,
-      "data-disabled": props !== null && props !== void 0 && props["data-disabled"] ? props["data-disabled"] : isDisabled,
-      "data-invalid": props !== null && props !== void 0 && props["data-invalid"] ? props["data-invalid"] : isInvalid,
-      id: props.id !== undefined ? props.id : labelId,
-      htmlFor: props.htmlFor !== undefined ? props.htmlFor : id
-    };
-  }, [id, isDisabled, isInvalid, labelId]);
-  const getErrorMessageProps = (0, _react.useCallback)(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      id: errorTextId,
-      ...props,
-      ref: (0, _util.composeRefs)(forwardedRef, node => {
-        if (!node) return;
-        setHasErrorText(true);
-      }),
-      "aria-live": "polite"
-    };
-  }, [errorTextId]);
-  return {
-    isRequired: !!isRequired,
-    isDisabled: !!isDisabled,
-    isInvalid: !!isInvalid,
-    hasErrorText,
-    setHasErrorText,
-    hasHelpText,
-    setHasHelpText,
-    id,
-    labelId,
-    errorTextId,
-    helpTextId,
-    getHelpTextProps,
-    getErrorMessageProps,
-    getLabelProps
-  };
-};
-const FormControlContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-
-/**
- * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
- */
-const FormControl = _ref2 => {
-  let {
-    children,
-    id,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = _ref2;
-  const context = useFormControlProvider({
-    id,
-    isDisabled,
-    isInvalid,
-    isRequired
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlContext.Provider, {
-    value: context,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFormControl, {
-      ...rest,
-      children: children
-    })
-  });
-};
-exports.FormControl = FormControl;
-const useFormControlContext = () => {
-  const context = (0, _react.useContext)(FormControlContext);
-  return context;
-};
-exports.useFormControlContext = useFormControlContext;
-const useFormControlProps = _ref3 => {
-  let {
-    id,
-    disabled,
-    required,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = _ref3;
-  const field = useFormControlContext();
-  const labelIds = [];
-  if (field !== null && field !== void 0 && field.hasErrorText && field !== null && field !== void 0 && field.isInvalid) {
-    labelIds.push(field.errorTextId);
-  }
-  if (rest["aria-describedby"]) {
-    labelIds.push(rest["aria-describedby"]);
-  }
-  if (field !== null && field !== void 0 && field.hasHelpText) {
-    labelIds.push(field.helpTextId);
-  }
-  return {
-    ...rest,
-    "aria-describedby": labelIds.join(" ") || undefined,
-    id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
-    isDisabled: disabled !== null && disabled !== void 0 ? disabled : field === null || field === void 0 ? void 0 : field.isDisabled,
-    isRequired: required !== null && required !== void 0 ? required : field === null || field === void 0 ? void 0 : field.isRequired,
-    isInvalid: isInvalid !== null && isInvalid !== void 0 ? isInvalid : field === null || field === void 0 ? void 0 : field.isInvalid
-  };
-};
-exports.useFormControlProps = useFormControlProps;
-const useFormControl = props => {
-  const {
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = useFormControlProps(props);
-  return {
-    ...rest,
-    disabled: isDisabled,
-    required: isRequired,
-    "aria-invalid": isInvalid ? true : undefined,
-    "aria-required": isRequired ? true : undefined
-  };
-};
-exports.useFormControl = useFormControl;