@oneblink/apps-react 8.0.0-beta.2 → 8.0.0-beta.3

package/dist/styles.css

@@ -8790,6 +8790,15 @@ button on-loading {
     width: 25%;
   }
 }
+.ob-input[type=date]::-webkit-calendar-picker-indicator,
+.ob-input[type=time]::-webkit-calendar-picker-indicator,
+.ob-input[type=datetime-local]::-webkit-calendar-picker-indicator {
+  right: 0;
+  position: absolute;
+  padding: 11px;
+  opacity: 0;
+}
+
 .ob-number__output {
   background-color: #757575;
   color: hsl(0, 0%, 100%);

package/dist/styles.scss

@@ -117,6 +117,7 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/repeatable-set.scss';
 @import './styles/ob-image.scss';
 @import './styles/ob-files.scss';
+@import './styles/date.scss';
 @import './styles/number.scss';
 @import './styles/autocomplete.scss';
 @import './styles/lookup.scss';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -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": "^20.0.0-beta.1",
+    "@oneblink/apps": "^21.0.0-beta.1",
     "@oneblink/release-cli": "^3.3.0",
     "@oneblink/types": "github:oneblink/types",
     "@types/blueimp-load-image": "^5.16.6",

package/dist/hooks/form-date-picker/useFormDatePickerProps.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { TextFieldProps } from '@mui/material';
-import { PickersActionBarAction } from '@mui/x-date-pickers';
-export default function useFormDatePickerProps({ id, value, maxDate, minDate, icon, ariaDescribedby, autocompleteAttributes, placeholder, className, }: {
-    id: string;
-    value: string | undefined;
-    maxDate: string | undefined;
-    minDate: string | undefined;
-    icon: 'event' | 'date_range' | 'schedule';
-    ariaDescribedby: string | undefined;
-    autocompleteAttributes: string | undefined;
-    placeholder: string | undefined;
-    className: string;
-}): {
-    slots: {
-        textField: (params: React.PropsWithChildren<TextFieldProps>) => React.JSX.Element;
-        openPickerIcon: () => React.JSX.Element;
-    };
-    slotProps: {
-        actionBar: {
-            actions: PickersActionBarAction[];
-        };
-    };
-    maxDate: Date | null;
-    minDate: Date | null;
-    value: Date | null;
-};

package/dist/hooks/form-date-picker/useFormDatePickerProps.js

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { TextField, styled } from '@mui/material';
-import clsx from 'clsx';
-import MaterialIcon from '../../components/MaterialIcon';
-const StyledTextField = styled(TextField)(() => ({
-    '& .MuiOutlinedInput-root': {
-        fontFamily: 'inherit',
-        '& fieldset': {
-            borderColor: '#dbdbdb',
-        },
-        '&:hover fieldset': {
-            borderColor: '#b5b5b5',
-        },
-        '&.Mui-focused fieldset': {
-            borderColor: '#485fc7',
-            borderWidth: '1px',
-        },
-    },
-}));
-export default function useFormDatePickerProps({ id, value, maxDate, minDate, icon, ariaDescribedby, autocompleteAttributes, placeholder, className, }) {
-    const valueMemo = React.useMemo(() => {
-        return value ? new Date(value) : null;
-    }, [value]);
-    const maxDateMemo = React.useMemo(() => (maxDate ? new Date(maxDate) : null), [maxDate]);
-    const minDateMemo = React.useMemo(() => (minDate ? new Date(minDate) : null), [minDate]);
-    //must be a fuction
-    const openPickerIcon = React.useCallback(() => React.createElement(MaterialIcon, { className: "is-size-5" }, icon), [icon]);
-    return {
-        slots: {
-            textField: (params) => {
-                var _a;
-                return (React.createElement(StyledTextField, { ...params, id: id, variant: "outlined", margin: "dense", size: "small", label: undefined, placeholder: placeholder, autoComplete: autocompleteAttributes, "aria-describedby": ariaDescribedby, inputProps: {
-                        ...params.inputProps,
-                        className: clsx((_a = params.inputProps) === null || _a === void 0 ? void 0 : _a.className, 'input ob-input', className),
-                    }, fullWidth: true, 
-                    //we have our own error and helper text state
-                    error: undefined }));
-            },
-            openPickerIcon,
-        },
-        slotProps: {
-            actionBar: {
-                actions: [
-                    'clear',
-                    'today',
-                    'cancel',
-                    'accept',
-                ],
-            },
-        },
-        maxDate: maxDateMemo,
-        minDate: minDateMemo,
-        value: valueMemo,
-    };
-}
-//# sourceMappingURL=useFormDatePickerProps.js.map

package/dist/hooks/form-date-picker/useFormDatePickerProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFormDatePickerProps.js","sourceRoot":"","sources":["../../../src/hooks/form-date-picker/useFormDatePickerProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAkB,MAAM,EAAE,MAAM,eAAe,CAAA;AAEjE,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AAExD,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/C,0BAA0B,EAAE;QAC1B,UAAU,EAAE,SAAS;QACrB,YAAY,EAAE;YACZ,WAAW,EAAE,SAAS;SACvB;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,SAAS;SACvB;QACD,wBAAwB,EAAE;YACxB,WAAW,EAAE,SAAS;YACtB,WAAW,EAAE,KAAK;SACnB;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,EAAE,EACF,KAAK,EACL,OAAO,EACP,OAAO,EACP,IAAI,EACJ,eAAe,EACf,sBAAsB,EACtB,WAAW,EACX,SAAS,GAWV;IACC,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACvC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC1C,CAAC,OAAO,CAAC,CACV,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC1C,CAAC,OAAO,CAAC,CACV,CAAA;IAED,mBAAmB;IACnB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,GAAG,EAAE,CAAC,oBAAC,YAAY,IAAC,SAAS,EAAC,WAAW,IAAE,IAAI,CAAgB,EAC/D,CAAC,IAAI,CAAC,CACP,CAAA;IAED,OAAO;QACL,KAAK,EAAE;YACL,SAAS,EAAE,CAAC,MAA+C,EAAE,EAAE;;gBAAC,OAAA,CAC9D,oBAAC,eAAe,OACV,MAAM,EACV,EAAE,EAAE,EAAE,EACN,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,sBAAsB,sBAClB,eAAe,EACjC,UAAU,EAAE;wBACV,GAAG,MAAM,CAAC,UAAU;wBACpB,SAAS,EAAE,IAAI,CACb,MAAA,MAAM,CAAC,UAAU,0CAAE,SAAS,EAC5B,gBAAgB,EAChB,SAAS,CACV;qBACF,EACD,SAAS;oBACT,6CAA6C;oBAC7C,KAAK,EAAE,SAAS,GAChB,CACH,CAAA;aAAA;YACD,cAAc;SACf;QACD,SAAS,EAAE;YACT,SAAS,EAAE;gBACT,OAAO,EAAE;oBACP,OAAO;oBACP,OAAO;oBACP,QAAQ;oBACR,QAAQ;iBACmB;aAC9B;SACF;QACD,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,SAAS;KACjB,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport { TextField, TextFieldProps, styled } from '@mui/material'\nimport { PickersActionBarAction } from '@mui/x-date-pickers'\nimport clsx from 'clsx'\nimport MaterialIcon from '../../components/MaterialIcon'\n\nconst StyledTextField = styled(TextField)(() => ({\n  '& .MuiOutlinedInput-root': {\n    fontFamily: 'inherit',\n    '& fieldset': {\n      borderColor: '#dbdbdb',\n    },\n    '&:hover fieldset': {\n      borderColor: '#b5b5b5',\n    },\n    '&.Mui-focused fieldset': {\n      borderColor: '#485fc7',\n      borderWidth: '1px',\n    },\n  },\n}))\n\nexport default function useFormDatePickerProps({\n  id,\n  value,\n  maxDate,\n  minDate,\n  icon,\n  ariaDescribedby,\n  autocompleteAttributes,\n  placeholder,\n  className,\n}: {\n  id: string\n  value: string | undefined\n  maxDate: string | undefined\n  minDate: string | undefined\n  icon: 'event' | 'date_range' | 'schedule'\n  ariaDescribedby: string | undefined\n  autocompleteAttributes: string | undefined\n  placeholder: string | undefined\n  className: string\n}) {\n  const valueMemo = React.useMemo(() => {\n    return value ? new Date(value) : null\n  }, [value])\n\n  const maxDateMemo = React.useMemo(\n    () => (maxDate ? new Date(maxDate) : null),\n    [maxDate],\n  )\n  const minDateMemo = React.useMemo(\n    () => (minDate ? new Date(minDate) : null),\n    [minDate],\n  )\n\n  //must be a fuction\n  const openPickerIcon = React.useCallback(\n    () => <MaterialIcon className=\"is-size-5\">{icon}</MaterialIcon>,\n    [icon],\n  )\n\n  return {\n    slots: {\n      textField: (params: React.PropsWithChildren<TextFieldProps>) => (\n        <StyledTextField\n          {...params}\n          id={id}\n          variant=\"outlined\"\n          margin=\"dense\"\n          size=\"small\"\n          label={undefined}\n          placeholder={placeholder}\n          autoComplete={autocompleteAttributes}\n          aria-describedby={ariaDescribedby}\n          inputProps={{\n            ...params.inputProps,\n            className: clsx(\n              params.inputProps?.className,\n              'input ob-input',\n              className,\n            ),\n          }}\n          fullWidth\n          //we have our own error and helper text state\n          error={undefined}\n        />\n      ),\n      openPickerIcon,\n    },\n    slotProps: {\n      actionBar: {\n        actions: [\n          'clear',\n          'today',\n          'cancel',\n          'accept',\n        ] as PickersActionBarAction[],\n      },\n    },\n    maxDate: maxDateMemo,\n    minDate: minDateMemo,\n    value: valueMemo,\n  }\n}\n"]}