@oneblink/apps-react 5.11.0 → 5.12.0-beta.10

package/dist/form-elements/FormElementTextarea.js

@@ -4,7 +4,9 @@ import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
+import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+    const ariaDescribedby = useElementAriaDescribedby(id, element);
     const text = typeof value === 'string' ? value : '';
     const isDisplayingCopyButton = !!element.readOnly && !!value;
     const isDisplayingLookupButton = !!element.isDataLookup || !!element.isElementLookup;
@@ -15,7 +17,7 @@ function FormElementTextarea({ id, element, value, onChange, validationMessage,
             React.createElement("div", { className: "control" },
                 React.createElement("textarea", { placeholder: element.placeholderValue, id: id, name: element.name, className: "textarea input ob-input cypress-textarea-control", value: text, onChange: (e) => onChange(element, {
                         value: e.target.value || undefined,
-                    }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty })),
+                    }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby })),
             (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                 React.createElement("div", { className: "is-flex is-justify-content-space-between" },
                     isDisplayingValidationMessage ? (React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)) : (React.createElement("div", null)),

package/dist/form-elements/FormElementTextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementTextarea.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\n\ntype Props = {\n  id: string\n  element: FormTypes.TextareaElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTextarea({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const text = typeof value === 'string' ? value : ''\n  const isDisplayingCopyButton = !!element.readOnly && !!value\n  const isDisplayingLookupButton =\n    !!element.isDataLookup || !!element.isElementLookup\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-textarea-element\">\n      <FormElementLabelContainer\n        className=\"ob-textarea\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <textarea\n            placeholder={element.placeholderValue}\n            id={id}\n            name={element.name}\n            className=\"textarea input ob-input cypress-textarea-control\"\n            value={text}\n            onChange={(e) =>\n              onChange(element, {\n                value: e.target.value || undefined,\n              })\n            }\n            required={element.required}\n            disabled={element.readOnly}\n            onBlur={setIsDirty}\n          />\n        </div>\n\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {(isDisplayingLookupButton || isDisplayingCopyButton) && (\n          <div className=\"buttons ob-buttons has-margin-top-8\">\n            {isDisplayingCopyButton && (\n              <CopyToClipboardButton\n                className=\"button ob-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            )}\n            {isDisplayingLookupButton && (\n              <LookupButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            )}\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}
+{"version":3,"file":"FormElementTextarea.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n  id: string\n  element: FormTypes.TextareaElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTextarea({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const text = typeof value === 'string' ? value : ''\n  const isDisplayingCopyButton = !!element.readOnly && !!value\n  const isDisplayingLookupButton =\n    !!element.isDataLookup || !!element.isElementLookup\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-textarea-element\">\n      <FormElementLabelContainer\n        className=\"ob-textarea\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <textarea\n            placeholder={element.placeholderValue}\n            id={id}\n            name={element.name}\n            className=\"textarea input ob-input cypress-textarea-control\"\n            value={text}\n            onChange={(e) =>\n              onChange(element, {\n                value: e.target.value || undefined,\n              })\n            }\n            required={element.required}\n            disabled={element.readOnly}\n            onBlur={setIsDirty}\n            aria-describedby={ariaDescribedby}\n          />\n        </div>\n\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {(isDisplayingLookupButton || isDisplayingCopyButton) && (\n          <div className=\"buttons ob-buttons has-margin-top-8\">\n            {isDisplayingCopyButton && (\n              <CopyToClipboardButton\n                className=\"button ob-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            )}\n            {isDisplayingLookupButton && (\n              <LookupButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            )}\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}

package/dist/form-elements/FormElementTime.js

@@ -5,7 +5,9 @@ import useFlatpickr from '../hooks/useFlatpickr';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
+import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+    const ariaDescribedby = useElementAriaDescribedby(id, element);
     const htmlDivElementRef = React.useRef(null);
     const flatpickrOptions = React.useMemo(() => {
         const opts = {
@@ -45,7 +47,7 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
         React.createElement(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required },
             React.createElement("div", { className: "field has-addons" },
                 React.createElement("div", { className: "control is-expanded has-icons-right" },
-                    React.createElement("input", { type: "time", id: id, name: element.name, placeholder: element.placeholderValue, disabled: element.readOnly, className: "input ob-input" }),
+                    React.createElement("input", { type: "time", id: id, name: element.name, placeholder: element.placeholderValue, disabled: element.readOnly, className: "input ob-input", "aria-describedby": ariaDescribedby }),
                     React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
                         React.createElement("i", { className: "material-icons is-size-5" }, "schedule"))),
                 !!element.readOnly && !!text && (React.createElement("div", { className: "control" },

package/dist/form-elements/FormElementTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\n\ntype Props = {\n  id: string\n  element: FormTypes.TimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'H:i',\n      altFormat: localisationService.getFlatpickrFormats().time,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-time-control',\n      minDate: undefined,\n      maxDate: undefined,\n      defaultDate: undefined,\n      enableTime: true,\n      noCalendar: true,\n      time_24hr: false,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [setIsDirty])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) =>\n      onChange(element, {\n        value: newValue,\n      }),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      label: element.label,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatTime(new Date(value))\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n  return (\n    <div className=\"cypress-time-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-time\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"time\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">schedule</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTime)\n"]}
+{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n  id: string\n  element: FormTypes.TimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'H:i',\n      altFormat: localisationService.getFlatpickrFormats().time,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-time-control',\n      minDate: undefined,\n      maxDate: undefined,\n      defaultDate: undefined,\n      enableTime: true,\n      noCalendar: true,\n      time_24hr: false,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [setIsDirty])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) =>\n      onChange(element, {\n        value: newValue,\n      }),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      label: element.label,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatTime(new Date(value))\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n  return (\n    <div className=\"cypress-time-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-time\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"time\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n              aria-describedby={ariaDescribedby}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">schedule</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTime)\n"]}

package/dist/form-elements/OptionButton.d.ts

@@ -6,6 +6,7 @@ type Props = {
     isSelected: boolean;
     onClick: () => void;
     className: string;
+    'aria-describedby'?: string;
 };
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/dist/form-elements/OptionButton.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import useContrastColor from '../hooks/useContrastColor';
-const OptionButton = ({ element, option, isSelected, onClick, className, }) => {
+const OptionButton = ({ element, option, isSelected, onClick, className, ...props }) => {
     const buttonContrastColor = useContrastColor(option.colour);
     return (React.createElement("button", { type: "button", className: className, style: option.colour && isSelected
             ? { backgroundColor: option.colour, color: buttonContrastColor }
-            : undefined, disabled: element.readOnly, onClick: onClick }, option.label));
+            : undefined, disabled: element.readOnly, onClick: onClick, "aria-describedby": props['aria-describedby'] }, option.label));
 };
 export default React.memo(OptionButton);
 //# sourceMappingURL=OptionButton.js.map

package/dist/form-elements/OptionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAYxD,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,GACH,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE;YAChE,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,IAEf,MAAM,CAAC,KAAK,CACN,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useContrastColor from '../hooks/useContrastColor'\nimport { FormTypes } from '@oneblink/types'\ntype Props = {\n  element:\n    | FormTypes.RadioButtonElement\n    | FormTypes.CheckboxElement\n    | FormTypes.ComplianceElement\n  option: FormTypes.ChoiceElementOption\n  isSelected: boolean\n  onClick: () => void\n  className: string\n}\nconst OptionButton = ({\n  element,\n  option,\n  isSelected,\n  onClick,\n  className,\n}: Props) => {\n  const buttonContrastColor = useContrastColor(option.colour)\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      style={\n        option.colour && isSelected\n          ? { backgroundColor: option.colour, color: buttonContrastColor }\n          : undefined\n      }\n      disabled={element.readOnly}\n      onClick={onClick}\n    >\n      {option.label}\n    </button>\n  )\n}\n\nexport default React.memo<Props>(OptionButton)\n"]}
+{"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAaxD,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAC3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE;YAChE,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,sBACE,KAAK,CAAC,kBAAkB,CAAC,IAE1C,MAAM,CAAC,KAAK,CACN,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useContrastColor from '../hooks/useContrastColor'\nimport { FormTypes } from '@oneblink/types'\ntype Props = {\n  element:\n    | FormTypes.RadioButtonElement\n    | FormTypes.CheckboxElement\n    | FormTypes.ComplianceElement\n  option: FormTypes.ChoiceElementOption\n  isSelected: boolean\n  onClick: () => void\n  className: string\n  'aria-describedby'?: string\n}\nconst OptionButton = ({\n  element,\n  option,\n  isSelected,\n  onClick,\n  className,\n  ...props\n}: Props) => {\n  const buttonContrastColor = useContrastColor(option.colour)\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      style={\n        option.colour && isSelected\n          ? { backgroundColor: option.colour, color: buttonContrastColor }\n          : undefined\n      }\n      disabled={element.readOnly}\n      onClick={onClick}\n      aria-describedby={props['aria-describedby']}\n    >\n      {option.label}\n    </button>\n  )\n}\n\nexport default React.memo<Props>(OptionButton)\n"]}

package/dist/hooks/useElementAriaDescribedby.d.ts

@@ -0,0 +1,3 @@
+import { FormTypes } from '@oneblink/types';
+declare const useElementAriaDescribedby: (id: string, element: FormTypes.FormElement) => string | undefined;
+export default useElementAriaDescribedby;

package/dist/hooks/useElementAriaDescribedby.js

@@ -0,0 +1,9 @@
+const useElementAriaDescribedby = (id, element) => {
+    return 'hintPosition' in element &&
+        element.hintPosition === 'BELOW_LABEL' &&
+        !!element.hint
+        ? `${id}-hint`
+        : undefined;
+};
+export default useElementAriaDescribedby;
+//# sourceMappingURL=useElementAriaDescribedby.js.map

package/dist/hooks/useElementAriaDescribedby.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementAriaDescribedby.js","sourceRoot":"","sources":["../../src/hooks/useElementAriaDescribedby.ts"],"names":[],"mappings":"AAEA,MAAM,yBAAyB,GAAG,CAChC,EAAU,EACV,OAA8B,EAC9B,EAAE;IACF,OAAO,cAAc,IAAI,OAAO;QAC9B,OAAO,CAAC,YAAY,KAAK,aAAa;QACtC,CAAC,CAAC,OAAO,CAAC,IAAI;QACd,CAAC,CAAC,GAAG,EAAE,OAAO;QACd,CAAC,CAAC,SAAS,CAAA;AACf,CAAC,CAAA;AAED,eAAe,yBAAyB,CAAA","sourcesContent":["import { FormTypes } from '@oneblink/types'\n\nconst useElementAriaDescribedby = (\n  id: string,\n  element: FormTypes.FormElement,\n) => {\n  return 'hintPosition' in element &&\n    element.hintPosition === 'BELOW_LABEL' &&\n    !!element.hint\n    ? `${id}-hint`\n    : undefined\n}\n\nexport default useElementAriaDescribedby\n"]}

package/dist/styles.css

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+::placeholder {
+  font-style: italic;
+}
+
 /* Bulma Utilities */
 .button, .file-cta,
 .file-name, .select select, .textarea, .input {
@@ -3916,16 +3920,16 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: hsl(0, 0%, 21%);
 }
 .select select::-moz-placeholder, .textarea::-moz-placeholder, .input::-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: #767676;
 }
 .select select::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .input::-webkit-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: #767676;
 }
 .select select:-moz-placeholder, .textarea:-moz-placeholder, .input:-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: #767676;
 }
 .select select:-ms-input-placeholder, .textarea:-ms-input-placeholder, .input:-ms-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: #767676;
 }
 .select select:hover, .textarea:hover, .input:hover, .select select.is-hovered, .is-hovered.textarea, .is-hovered.input {
   border-color: hsl(0, 0%, 71%);

package/dist/styles.scss

@@ -1,7 +1,10 @@
 //
 // Overrides
 //
-
+$input-placeholder-color: #767676;
+::placeholder {
+  font-style: italic;
+}
 $green: #3a833c;
 $primary: #407e8c;
 $warning: #b85000;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "5.11.0",
+  "version": "5.12.0-beta.10",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.6",
-    "@oneblink/sdk-core": "^6.0.0-beta.3",
+    "@oneblink/sdk-core": "^6.0.1-beta.1",
     "@react-google-maps/api": "2.19.2",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.4",
@@ -47,7 +47,7 @@
     "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.15.6",
     "@mui/x-date-pickers": "^6.19.2",
-    "@oneblink/apps": "^11.0.0-beta.1",
+    "@oneblink/apps": "^11.0.1-beta.2",
     "@oneblink/release-cli": "^3.0.1",
     "@oneblink/types": "github:oneblink/types",
     "@types/blueimp-load-image": "^5.16.6",